[Resolved] hover on menu animation changes height of header / menu bar

Home Forums Support [Resolved] hover on menu animation changes height of header / menu bar

Home Forums Support hover on menu animation changes height of header / menu bar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #712352
    Cristina
    
    .navigation-search input[type="search"], 
    .navigation-search input[type="search"]:active,
    .navigation-search input[type="search"]:focus {
        color: #000;
        background-color: #fff;
    }
    
    .main-navigation li a:after,
    .secondary-navigation li a:after {
        opacity: 0;
        transition: opacity 500ms ease-in-out;
        content: "";
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a:after, 
    .main-navigation .main-nav ul li:hover > a:after, 
    .main-navigation .main-nav ul li.sfHover:hover > a:after,
    .secondary-navigation .main-nav ul li[class*="current-menu-"] > a:after, 
    .secondary-navigation .main-nav ul li:hover > a:after, 
    .secondary-navigation .main-nav ul li.sfHover:hover > a:after {
        content: "";
        display: block;
        width: 100%;
        border-bottom: 2px solid #A13643;
        position: relative;
        top: -20px;
        opacity: 1;
    }
    
    

    I’ve add this css a long time ago. It is a way of adding the red underline on the hover menu.
    Now i see that when i hover (see project page) the menu has a little jump on the image bellow.
    I’m thinking this happens because on hover, the menu needs a bit more space to render that line. (? maybe)

    The problem is i’ve added more space to the height and it does not fix my problem.
    I have 72px on menu item height in primary nav and on sticky, also the header padding is zero.
    Any ideas how i can control that underline on hover, to not mess with the primary menu height?
    ty

    #712353
    David
    Staff
    Customer Support

    Hi there,

    try this CSS, it basically moves the border to the non hover state, so the height doesn’t change:

    .main-navigation li a:after,
    .secondary-navigation li a:after {
        opacity: 0;
        transition: opacity 500ms ease-in-out;
        content: "";
        display: block;
        width: 100%;
        border-bottom: 2px solid #A13643;
        position: relative;
        top: -20px;
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a:after, 
    .main-navigation .main-nav ul li:hover > a:after, 
    .main-navigation .main-nav ul li.sfHover:hover > a:after,
    .secondary-navigation .main-nav ul li[class*="current-menu-"] > a:after, 
    .secondary-navigation .main-nav ul li:hover > a:after, 
    .secondary-navigation .main-nav ul li.sfHover:hover > a:after {
        opacity: 1;
    }
    #712472
    Cristina

    That easy!.. solved.

    Also, many thanks for the quick response.

    #712485
    David
    Staff
    Customer Support

    Glad to be of help

    #1132193
    Damon

    Ooh, thank you for this, I am going to adapt it to my site.
    Please could someone let me know how I can stop the border being shown on drop down menu items?

    #1132344
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try adding this CSS:

    .main-navigation .sub-menu li a:after {
        display: none;
    }
    #1132679
    Damon

    Cheers Tom, you’re a star.

    #1133181
    Tom
    Lead Developer
    Lead Developer

    Glad I could help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.