When a visitor navigates the menu using the keyboard, the focused menu item is highlighted with an outline. To change the outline, go to Mega Menu > Menu Themes > General Settings and adjust the “Keyboard Highlight Outline” option:
- Color: the color of the outline (default: blue).
- Width: the thickness of the outline.
- Offset: the distance between the outline and the edge of the menu item. A negative value draws the outline inside the menu item.
Save the theme to apply your changes.
Using Custom CSS
If you need more control (for example, to style only certain elements), go to Mega Menu > Menu Themes > Custom Styling and add the following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#{$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; } } |