[Resolved] Menu Items Underline

[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

[Tom]

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 🙂

[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;
}

[Tom]

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;
}

[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;
}

[Tom]

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

[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.

[bluebit]

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

[Leo]

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

[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;
}

[Leo]

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

[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;
}

[Leo]

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;
}

[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.

[Tom]

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/

[Author]

Posts