[Resolved] Underline menu navigation on hover and current

[Dennis]

Hey,

what do I have to insert into the CSS field to get a simple underline that you see on most websites nowadays? I also want the current page to be underlined.

[Leo]

Hi there,

It depends on what you want to underline. But the style should be border-bottom: 2px solid #000000

Maybe you would be interested in this? https://docs.generatepress.com/article/adding-menu-hover-animation/

[Dennis]

So basically I want the current page in the menu to be underlined and underline on hover. I’ve tried modifying the code from the link but it ended up weird on mobile and tablets..

Also, I don’t want any animation with it.

[Leo]

OK then scratch that then just use this:

@media (min-width:769px) {
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        border-bottom: 2px solid #ffffff;
    }
}

[Dennis]

Awesome! I didn’t get quite the results I wanted from your code so I kinda assembled the one you posted before (from the link) and the new one:

@media (min-width: 769px) {
	.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50%;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    height: 4px;

    background-color: currentColor;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after{
    width: 50%;
}
}

What do you think about that code? It works great on desktop but I was trying to get it to work on mobile (with a max width of 768) but the underlining is always out of place.

Any ideas?

[Leo]

Code looks good.

Mobile is a bit tricky. Can you show me what you have so far?

[Dennis]

I actually settled for a different approach which works great on mobile too.

However, I changed the text colour of the primary navigation and now the text next to the burger menu on mobile has the same colour. Is it possible to make it black instead of the text colour specified in the customize menu?

[Leo]

Try this CSS:

.menu-toggle .mobile-menu {
    color: #000000 !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Dennis]

hey, didnt work!

[Leo]

Can you link me to the site?

[Dennis]

sure, here you go: http://foundwith.in

[Leo]

Looks like you removed the menu text?

The toggle can be changed like this:

@media (max-width: 768px)
    .mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
        color: #000000;
    }
}

[Dennis]

yep that work! thank you so much for your patience. 🙂
had to add one bracket after the first line

just out of curiosity, how do i tackle learning CSS best? where do I start? any tips?

[Leo]

I learned from doing the free course here: https://www.codecademy.com/

Then it’s just using the developer tool of your browser 🙂

[Mihail]

hi all 😉

i used this code:

@media (min-width: 769px) {
	.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50%;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    height: 4px;

    background-color: currentColor;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after{
    width: 50%;
}
}

Everything works well until it comes to the dropdown menu.
https://prnt.sc/1o238fg

Is it possible to align the underline so that it appears exclusively below the menu text?

I want it to be like this:
https://prnt.sc/1o24igh

[Author]

Posts