WordPress.org

Ready to get started?Download WordPress

Forums

Frontier
[resolved] How to remove the down-arrow on nav-menu buttons that have a sub-menu (13 posts)

  1. Ian Schoonover
    Member
    Posted 8 months ago #

    Hello all, just wondering how I can remove the down arrow on nav-menu buttons that have a submenu, i.e., the 'Services' and 'Project Highlights' buttons at http://www.lawlerh2o.com/wp
    I don't want to remove it from the desktop version. The real problem I'm having is when viewing the mobile version of the site, the down arrows don't show up, making the nav text: 'Services' and 'Project Highlights', appear off-center. Having said that, I would be fine with either removing the arrow from the mobile version, or being able to make it appear.

    Thank you in advance!
    Ian

  2. ronangelo
    Member
    Theme Author

    Posted 8 months ago #

    @iantskon
    I'm not sure why the arrows wouldn't show up. Maybe the particular mobile browser doesn't support it. You can remove the arrows by adding this on the Custom CSS option.

    @media screen and (max-width:480px){
       #menu-main .menu-main > .parent-menu-item > a:after,
       #menu-main .menu-main > ul  > .parent-menu-item > a:after {
    	content: none;
       }
    }
  3. Ian Schoonover
    Member
    Posted 8 months ago #

    @ronangelo
    That worked! Thank you,
    I think cross browser/device compatibility is probably my biggest challenge right now as beginning/intermediate web developer.
    For instance, the website looks fine on the Chrome for Android browser, but on the default Android OS browser the menu has equal margins on either side instead of extending the buttons out to the edges.
    See links below:

    Chrome version: http://www.sulu13.net/example/chromev.png
    Default version: http://sulu13.net/example/defaultv.png

    The only other strange thing I've noticed is when going from page to page on the blog/website, the whole content area shifts it's center over a few pixels. For instance, when going from 'Home' to 'DBE/WBE' it moves to the right. This isn't something I think the client would see, but if it's fixable that would be great.

    @ronangelo
    I really appreciate your help on this stuff and I know you're time is valuable, so I'd be happy to shoot you over a donation for taking the time to help me straighten some of these issues out.

  4. ronangelo
    Member
    Theme Author

    Posted 8 months ago #

    @iantskon

    on the default Android OS browser the menu has equal margins on either side instead of extending the buttons out to the edges.

    Remember when you added a display: table to center the menu. That is inherited even when the menu is viewed on a small screen. You'll have to add display: block to override that on screens with 480px or smaller.

    You can replace your Custom CSS content with this
    http://pastebin.com/5qYZ8GPN
    Copy the contents of your Custom CSS first. You can save that someplace in case you want to put it back.

    The only other strange thing I've noticed is when going from page to page on the blog/website, the whole content area shifts it's center over a few pixels.

    Are you seeing this when viewing on desktop. Maybe you're just seeing the effects of the browser having a vertical scrollbar on the side. Since the 'DBE/WBE' page doesn't have content and does not extend to the bottom it doesn't have a scrollbar. Or maybe your seeing something other than this?

    I really appreciate your help on this stuff and I know you're time is valuable, so I'd be happy to shoot you over a donation for taking the time to help me straighten some of these issues out.

    You don't really have to :) I really appreciate your last donation.

    Thanks,
    Ron

  5. ronangelo
    Member
    Theme Author

    Posted 8 months ago #

    Just a heads-up. I noticed your header image changes from page to page. If you made changes to the theme files without using a child theme, your changes will be lost if you update the theme. If you choose not to update the theme, you can just change the Theme Name on the style.css to remove any update notice.

  6. Ian Schoonover
    Member
    Posted 8 months ago #

    @ronangelo
    The CSS modifications worked perfectly for the Android browser, thank you.

    As for the content shift, yes, you're right, it's the scroll bar that changes the center of the page. I completely overlooked it. >.<

    The header images change, but that is a plug-in called unique header, I didn't actually go into the editor and change each page's header specifically with PHP, so i'm assuming an update won't affect this, no?

    I need to get my act together and make a child theme just to be safe, but I have yet to do that successfully as I am just learning PHP calls, etc. Also, having the custom CSS module in 'Frontier Options' has kept me out of the editor for the most part. I can't recall any significant changes made to any of the php files or css within the editor, but I'm sure I'll be made aware of them (if there are any) once the next update comes out :P

    As for the donation, your help is worth much more to me than I can donate, plus I'm sure this won't be the last you'll hear from me as I am just now entering into CSS and PHP, so it's no big deal for me to "buy you lunch". Thanks again!

    Cheers

  7. Ian Schoonover
    Member
    Posted 8 months ago #

    @ronangelo

    I just did the update, it appears the only thing that changed was the z-index on the navigation which put the sub-menu drop-down in front of the slider rather than behind it. Simple fix.

  8. brantonc
    Member
    Posted 6 months ago #

    I am having a problem similar to the one reported by Ian: my nav menu arrows (for items with submenus) have disappeared, and I would like to get them back. Note that I disabled the Top Menu in Frontier Options, and set the menu in question (mainmenu) to Primary in Menu Settings. I find that if I uncheck "Primary" and check "Top Bar" without making any other changes, the arrows reappear, but the menu items decide to order alphabetically rather than in the specified menu order. The behavior is consistent across multiple browsers and computers (magcryst.org). I am using the Intelliwidget plugin for per-page side-bar menus. But the problem was present before I added this.

  9. Ian Schoonover
    Member
    Posted 6 months ago #

    @brantonc It doesn't look like any of your menu items have sub menus, so why would they have arrows to begin with?

  10. brantonc
    Member
    Posted 6 months ago #

    Actually, there are sub-menus on the Reports and Meetings menu items. Their failure to present themselves is part of the problem. I just unchecked "Primary" and checked "Top bar" for my 'mainmenu' in the Menu settings, so that you can see a different view of the problem -- I'll leave it like this for a few hours tonight. I'm new to WP and tried many themes this weekend before settling on Frontier. It's a great theme -- there's just this one quirk to figure out.

  11. Ian Schoonover
    Member
    Posted 6 months ago #

    I see, I'm not entirely sure how to fix your problem without seeing what's going on in your dashboard and troubleshooting from there, but I can bet that the author, Ron Angelo, can help you sort it out. Although it may require you to create a new thread to get his attention..
    In the mean time, I noticed that when you click (press) the sub-menus from a mobile device (samsung galaxy s4), the sub menu will appear, but then disappear as the link that you've selected loads its page, i.e., 'Reports'. I solved this dilemma by creating Links as custom menu items and setting their targets to #, thus loading nothing while allowing the submenu drop down to remain shown while in mobile view. This might be something to consider.
    Hope that helps, best of luck!

  12. brantonc
    Member
    Posted 6 months ago #

    Thanks Ian. I now see that I failed to explicitly include the submenu items in the menu. The fact that the submenus present themselves anyway (in the primary menu) when I incorrectly associate the menu with the disabled top bar (a minor weakness) led me to believe that they appear automatically without any action on my part. Problem solved.

    Regarding the disappearing submenu links on a phone/tablet, I have decided that I prefer this behavior. But thanks for identifying an alternative!

  13. Ian Schoonover
    Member
    Posted 6 months ago #

    great, cheers!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.