How do I change the keyboard navigation highlight color?

To change the outline colour of highlighted menu items when using keyboard navigation (from the default blue color), go to Mega Menu > Menu Themes > Custom Styling and add the following:

#{$wrap}.mega-keyboard-navigation {
    .mega-menu-toggle:focus,
    .mega-toggle-block:focus,
    .mega-toggle-block a:focus,
    .mega-toggle-block .mega-search input[type=text]:focus,
    .mega-toggle-block button.mega-toggle-animated:focus,
    #{$menu} a:focus,
    #{$menu} span:focus,
    #{$menu} input:focus,
    #{$menu} li.mega-menu-item a.mega-menu-link:focus {
        outline-color: red;
        outline-offset: -3px;
    }
}

Related Articles