WordPress.org

Ready to get started?Download WordPress

Forums

Problem styling links in custom menu widget (2 posts)

  1. Garfield1983
    Member
    Posted 3 years ago #

    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: http://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?

  2. Garfield1983
    Member
    Posted 3 years ago #

    Seems to be a browser-specific issue with Safari/Chrome related to problems with using display: block; with . Changing this to display: inline; for my sidebar widgets seems to have resolved the issue.

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic