• Resolved capic07

    (@capic07)


    First off, thanks so much for the great plugin. Secondly, I apologize for my ignorance.

    I’m helping a friend with her portfolio site, and while I got the plugin mostly down, I’m having trouble with stylizing the nav bar. In particular, when a single page holds multiple content Ids, all are considered “current menu item” and affected. So, if I have the current page set to underline in navbar, all links to content Ids on that page will be underlined in the navbar. I’ve went through most of the forum and tried everything, but I must be missing something. That, or her theme is overriding my custom CSS.

    The site in progress is: http://elisabethbowerman.com/

    Thanks in advance for any insight you can provide!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Can you show or link to an example of this happening please as I can only access an About page which doesn’t seem to have an issue.

    Thanks.

    Thread Starter capic07

    (@capic07)

    Thank you for the reply! I’ve updated the site so you can visually see the problem as well. Home and portfolio both get underlined when either is active.

    Thanks, but I’m not seeing any underlining when testing using 4 of the most popular browsers.

    This code is ensuring a text-decoration isn’t being applied to the menu items.

    nav.standard ul li.current-menu-item a, 
    nav.standard ul li.current_page_item a, 
    nav.standard ul li.current-menu-item a:hover, 
    nav.standard ul li.current_page_item a:hover, 
    .is-work nav.standard ul li.portfolio-grid a {
        text-decoration: none !important;
    }

    Perhaps you’re viewing a cached version of the site? Have you tried clearing any plugin or browser cache’s and refreshing your site?

    Hope this helps.

    Try adding this using a Custom CSS plugin:

    nav.standard ul li a,
    nav.standard ul li:hover a {
        text-decoration: none !important;
    }

    The issue is you have multiple styles being applied using !important, I have just found a bunch of inline styles being applied that is forcing the text underline to appear, to counter this we also need to use !important, and to ensure we override the previous styles we can use a plugin, or a Child Theme style.css file if you’re using one.

    Let me know how you get on.

    • This reply was modified 7 years, 5 months ago by ThemeSumo.
    Thread Starter capic07

    (@capic07)

    Ahhhhhhh. Was definitely working with a cached site. Any idea for css to override those to get the underline effect to be visible?

    Thread Starter capic07

    (@capic07)

    I was trying to use !important to override the paid theme css. I want underlines to appear under active menu item, without highlighting more than one content ID at a time.

    Ie. The default css from the “uneditable” theme has no hover or clicked effects. Was trying to add in a current page underline css effect to override the css. Apparently, like you pointed out, I was looking at a cached version, which was my first problem.

    Thread Starter capic07

    (@capic07)

    Sorry for the delay, I’ve updated the site and tested that the underlining is happening so you can see that both IDs are being considered active at the same time. Just trying to have the one currently scrolled on as active.
    http://elisabethbowerman.com/

    Any suggestions for fixing that are greatly appreciated.

    Plugin Author malihu

    (@malihu)

    Hello,

    Current menu items are styled by the theme (which is a common practice for all wp themes).

    You have the following custom CSS rules (index on line 13):

    nav.standard ul li.current-menu-item a, nav.standard ul li.current_page_item a, nav.standard ul li.current-menu-item a:hover, nav.standard ul li.current_page_item a:hover, .is-work nav.standard ul li.portfolio-grid a {
        text-decoration: underline !important;
    }
    
    nav.standard ul li a {
        text-decoration: none !important;
    }

    Try removing the above and add the following rule so the links are highlighted by “Page scroll to id”:

    nav.standard ul li a.mPS2id-highlight {
        text-decoration: underline;
    }

    This should do what you need 😉

    As a side note, try to reduce the size of your images because the site takes a long time to load the first time.

    Thread Starter capic07

    (@capic07)

    Ah that is definitely why. Thank you very much for the help! Her paid 3rd party theme/editor automatically undoes any changes to the base css (only allows override code, but no deletions), so I’m going to look into alternatives, but at least I understand why it’s happening now.

    And agreed on the images. I told her they needed to be compressed, because they are huge.

    Thanks again!!

    Plugin Author malihu

    (@malihu)

    You’re welcome 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Trouble Overriding CSS for Current Menu Item’ is closed to new replies.