Trouble Overriding CSS for Current Menu Item
-
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!
-
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.
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.
Ahhhhhhh. Was definitely working with a cached site. Any idea for css to override those to get the underline effect to be visible?
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.
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.
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.
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!!
You’re welcome 🙂
- The topic ‘Trouble Overriding CSS for Current Menu Item’ is closed to new replies.