Archived topic
Menu Items Underline
27 replies · Started by bluebit on February 24, 2018
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
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 :)
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;
}
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;
}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;
}
The time seems to be working for me. Change it to 10s to see it really obviously.
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.
how do i also put the underlines in the secondary nav menu that's on top of the page? aguamarina.co
Try replacing .main-navigation with .secondary-navigation in the code.
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;
}
You need two separate blocks of code. One with .main-navigation and the other one with .secondary-navigation
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;
}
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;
}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.
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/
