New to the community? Start here

Add custom css for navigation items

I would like to highlight on my navigation menu any active item(page its currently on), hovering item, and also have the submenu item highlighted along with their parent top menu item as well.

Thu, 30 May 2019 13:01:14
  • Dimitris Kalliris
    • Support Team Lead

    Hello there Amin,

    hope you’re doing well today! :slight_smile:

    Could you please try the following CSS rule?

    You can use it in Appearance -> Customize -> Additional CSS, via the theme’s options panel (if any) or your child theme’s style.css file (if any).

    li.current-page-ancestor > a:before,
    
li.current-menu-item > a:before {
    
content: "";
    
position: absolute;
    
z-index: -2;
    
left: 0;
    
right: 100%;
    
bottom: 50%;
    
background: #F1CD2C;
    
width: 100%;
    
height: 3px;
    
-webkit-transition-property: right;
    
transition-property: right;
    
-webkit-transition-duration: 0.3s;
    
transition-duration: 0.3s;
    
-webkit-transition-timing-function: ease-out;
    
transition-timing-function: ease-out;
    
}

    Warm regards,

    Dimitris