Archived topic

Main Navigation Styling

3 replies · Started by David on September 17, 2019

Viewing posts 1–4 of 4

September 17, 2019 at 3:00 am #1011355

Hello

I've added this code to show a orange line on hover in the main navigation, but I'm struggling to keep the orange line underneath on the active page link. Any ideas what I need to add...

.main-navigation .main-nav ul li::after {content: '';display: block;width: 0;height: 2px;background: #F77E0B;transition: width .3s;}
.main-navigation .main-nav ul li:hover::after {width: 100%;//transition: width .3s;}
.main-navigation .main-nav ul li::after [class*="current-menu-"] > a {width: 100%;content: '';display: block;width: 0;height: 2px;background: #000;}

Website is http://185.20.51.60/~possibilitypersp/

Thanks
Dave

September 17, 2019 at 4:01 am #1011403

Hi there,

your CSS should look like this:

.main-navigation .main-nav ul li::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #F77E0B;
    transition: width .3s;
}

.main-navigation .main-nav ul li:hover::after,
.main-navigation .main-nav ul li.current-menu-item::after {
    width: 100%;
    transition: width .3s;
}

September 17, 2019 at 4:49 am #1011442

That's great, thanks David.

September 17, 2019 at 4:55 am #1011447

You're welcome

This archived topic is closed to new replies.

Start building better websites today.