[Resolved] Main Navigation Styling

Home Forums Support Main Navigation Styling

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1011355
    David

    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

    #1011403
    David
    Staff
    Customer Support

    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;
    }
    #1011442
    David

    That’s great, thanks David.

    #1011447
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.