border-bottom issue with page-in-header

  • Resolved thewiseass

    (@thewiseass)


    6 years, 12 months ago

    I’m using border-bottom to add a line on hover for the main navigation and it works nicely…except that in using logo-in-menu, the border shows under the logo when hovering over it. I’ve been tweaking the CSS and can’t get it to work. Here’s the code I’ve used to no avail:

    [code lang=""]
    #masthead.masthead-logo-in-menu .main-navigation:before {
    border-bottom: 0px solid #ffffff !important;
    }

    #masthead.masthead-logo-in-menu .main-navigation:after {
    border-bottom: 0px solid #ffffff !important;
    }

    #masthead.masthead-logo-in-menu .logo > img {
    border-bottom: 0px solid #ffffff !important;
    }
    [/code]

    Is this even possible to keep the lines on hover for the menu items, but not on the logo in logo-in-header. Help!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi, try making your selector more specific. At the moment you’re adding:

    .main-navigation a:hover

    Make it specific to the list rather:

    .main-navigation ul li a:hover

    Thread Starter thewiseass

    (@thewiseass)

    Doh! I should have thought of that. Thanks so much, Andrew! Adding that to my Vantage notes…just in case I forget. Works perfectly. Another reason why I love using Vantage.

    Super ?? Glad to hear that helped.

    All the best.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘border-bottom issue with page-in-header’ is closed to new replies.