Keep active menu item highlighted/active state

[Chem]

When working with the Menu Component, you may decide to keep the active menu item highlighted, as shown in the GIF below.

Note: This works with all themes

To do this, add the following code to the JavaScript section of the layout or page where your menu is located.

JavaScript

$('.navbar .item').on("click",function(){
    $('.navbar .item').removeClass('active');
    $(this).addClass('active');
});

[Lee]

Just wanted to add a few additional customizations for the menu that you can use to change the color of the menu, menu items, and menu text. This CSS code applies styles dynamically based on whether the mouse has hovered over, clicked, or activated a menu item.

/*Change the default background color of the menu*/
.navbar{
    background-color: gray;
    border-color: gray;
}

/*Change the default text color of the menu*/
.navbar-default .navbar-nav>li>a{
    color: black;
}

/*Change the background color and text color of a menu item on hover*/
.navbar-default .navbar-nav>li>a:hover{
    background-color: blue;
    color: black;
}

/*Change the background color and text color of a menu item on click*/
.navbar-default .navbar-nav>li>a:focus{
    background-color: green;
    color: black;
}

/*Change the background color and text color of an active menu item*/
.navbar .active a{
    background-color: green !important;
    color: black !important;
}