{"id":396556,"date":"2023-10-02T11:17:30","date_gmt":"2023-10-02T10:17:30","guid":{"rendered":"https:\/\/www.megamenu.com\/?post_type=ht_kb&#038;p=396556"},"modified":"2023-10-03T17:40:13","modified_gmt":"2023-10-03T16:40:13","slug":"how-do-i-change-the-keyboard-navigation-highlight-color","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/how-do-i-change-the-keyboard-navigation-highlight-color\/","title":{"rendered":"How do I change the keyboard navigation highlight color?"},"content":{"rendered":"\n<p>To change the outline colour of highlighted menu items when using keyboard navigation (from the default blue color), go to <em>Mega Menu &gt; Menu Themes &gt; Custom Styling<\/em> and add the following:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#{$wrap}.mega-keyboard-navigation {\n    .mega-menu-toggle:focus,\n    .mega-toggle-block:focus,\n    .mega-toggle-block a:focus,\n    .mega-toggle-block .mega-search input[type=text]:focus,\n    .mega-toggle-block button.mega-toggle-animated:focus,\n    #{$menu} a:focus,\n    #{$menu} span:focus,\n    #{$menu} input:focus,\n    #{$menu} li.mega-menu-item a.mega-menu-link:focus {\n        outline-color: red;\n        outline-offset: -3px;\n    }\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>To change the outline colour of highlighted menu items when using keyboard navigation (from the default blue color), go to Mega Menu &gt; Menu Themes &gt; 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}&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-396556","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faqs"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"To change the outline colour of highlighted menu items when using keyboard navigation (from the default blue color), go to Mega Menu &gt; Menu Themes &gt; 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}...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/396556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=396556"}],"version-history":[{"count":6,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/396556\/revisions"}],"predecessor-version":[{"id":396953,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/396556\/revisions\/396953"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=396556"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=396556"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=396556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}