Problem styling links in custom menu widget
-
I’ve added the custom menu feature to the Primepress theme (I made a child theme of Primepress and am doing all my edits in that) and made some modifications to the style of the main menu itself. It’s looking fine, however I also need to use a custom menu widget in the sidebar for a different list of menu links. When I first added this, it automatically inherited all the styles from the affecting the main menu (the .menu class) so i’ve created some new style rules to override that.
It looks fine except i’m having trouble underlining the links on mouse hover. I’m using bullet points and I find that both the text and the bullet point are showing as a hyperlink – ie. both are underlined – rather than just the text like my other widgets.
Links inherit the underline attribute from the following line in the original style.css:
a { text-decoration:none; }
This is overruled for menu items with the line:
ul.menu li a:hover { text-decoration: none; }
This is fine, but when I try to override this in my custom style rules I see the problem described above:
/* style the custom menu widgets */ body.custom #pp-sidebars ul.menu { position: static; padding: 0; } body.custom #pp-sidebars ul.menu li { float: none; margin: 0.25em 0px; background: transparent; font-weight: normal; font-size: 100%; line-height: 1.4166; } body.custom #pp-sidebars ul.menu li a{ color:#0070C5; padding: 0; } body.custom #pp-sidebars ul.menu li a:hover{ background: transparent; text-decoration: underline; } body.custom #pp-sidebars ul.menu li.current_page_item a, #pp-sidebars ul.menu li.current_page_item a:hover{ color: #0070C5; background: transparent;}
You can see the issue on the (very work in progress!) site here: https://development.rixcentre.org/ See the difference in the link underline between the Get Involved links (a custom menu widget) and the Useful Links (a normal widget).
Any help would be much appreciated.
EDIT: The short-code isn’t working in the code above. This is the line where I am overriding the text-decoration style:
body.custom #pp-sidebars ul.menu li a:hover{ background: transparent; text-decoration: underline; }
I suspect, however, that this has something to do with the html generated by the custom menu widget?
- The topic ‘Problem styling links in custom menu widget’ is closed to new replies.