[Resolved] Menu Items Underline

Home Forums Support [Resolved] Menu Items Underline

Home Forums Support Menu Items Underline

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #504660
    bluebit

    I’m trying to get the main menu to show an underline below each menu item when its activated or hovered on. This is what I have so far: https://aguamarina.co

    This is the code I’m using:


    @media
    (min-width:769px) {
    .main-navigation .menu > .menu-item > a::after {
    content: “”;
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: all 0.3s ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
    width: 60%;
    }
    }

    A few problems:

    – How to get the underline length to show from the first letter to the last letter of a main menu item word?

    – How to make the underline just appear, no animation that starts from the center and moves the the outsides. I’m think maybe it needs to be a box and the left top right sides of the box are invisible and the bottom part of the box is the line and shows itself once activated or hovered.

    – How to add the underlines to the secondary menu?

    – On mobile, you have to click the menu item twice for the menu to work

    GP Premium 1.5.6
    #504921
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot instead of that CSS:

    .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 {
        content: "";
        display: block;
        width: 100%;
        border-bottom: 1px solid #222;
    }

    Let me know 🙂

    #505305
    bluebit

    It works, but how to make the underline move up closer to the words? and change that the underline appears a little bit slower? https://aguamarina.co

    I modified the code to this, just changed the color and border bottom thicker 🙂

    .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 {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 2px solid #59e5ee;
    }

    #505366
    Tom
    Lead Developer
    Lead Developer

    Try this instead:

    .main-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 {
        content: "";
        display: block;
        width: 100%;
        border-bottom: 1.5px solid #59e5ee;
        position: relative;
        top: -10px;
        opacity: 1;
    }
    #505399
    bluebit

    The underline moving closer to the text worked, the transition time I tried to play with and it appears that it whatever time i put in, it does not affect it, nothing happens.

    Heres the code, i changed transition time to 1600 instead of 500, and you can see nothing happens aguamarina.co

    .main-navigation li a:after {
    opacity: 0;
    transition: opacity 1600ms 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 {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 1.5px solid #59e5ee;
    position: relative;
    top: -15px;
    opacity: 1;
    }

    #505640
    Tom
    Lead Developer
    Lead Developer

    The time seems to be working for me. Change it to 10s to see it really obviously.

    #506241
    bluebit

    It works on firefox, but on my safari it doesn’t work. I changed it now to 1s, safari its instant, firefox its 1 second slow.

    #506319
    bluebit

    how do i also put the underlines in the secondary nav menu that’s on top of the page? aguamarina.co

    #506431
    Leo
    Staff
    Customer Support

    Try replacing .main-navigation with .secondary-navigation in the code.

    #507229
    bluebit

    that removed it from the main and put it in the secondary nav, but i want it in both. aguamarina.co

    here is the current code:

    .main-navigation li a:after {
    opacity: 0;
    transition: opacity 1s 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 {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 1.5px solid #59e5ee;
    position: relative;
    top: -15px;
    opacity: 1;
    }

    #507412
    Leo
    Staff
    Customer Support

    You need two separate blocks of code. One with .main-navigation and the other one with .secondary-navigation

    #507503
    bluebit

    like this?

    .main-navigation li a:after {
    opacity: 0;
    transition: opacity 1s 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: 1.5px solid #59e5ee;
    position: relative;
    top: -15px;
    opacity: 1;
    }

    #508034
    Leo
    Staff
    Customer Support

    Try this:

    .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: 1.5px solid #59e5ee;
        position: relative;
        top: -10px;
        opacity: 1;
    }
    #509231
    bluebit

    check out what happens: aguamarina.co

    Few problems, the entire pages moves down a little when you select the top navigation, and in safari the underline is instantly shown, not delayed like in firefox.

    #509390
    Tom
    Lead Developer
    Lead Developer

    Try this to stop it from pushing down:

    .main-navigation .main-nav ul li:not(:hover):not([class*="current-menu-"]) a,
    .secondary-navigation .main-nav ul li:not(:hover):not([class*="current-menu-"]) a {
        border-bottom: 1.5px solid transparent;
    }

    You’re likely using an old version of Safari which doesn’t support transition. You may need to put your CSS block with the transition declaration into a tool like this to add the necessary prefixes: https://autoprefixer.github.io/

Viewing 15 posts - 1 through 15 (of 28 total)
  • The topic ‘Menu Items Underline’ is closed to new replies.