{"id":178159,"date":"2018-12-10T14:01:13","date_gmt":"2018-12-10T14:01:13","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/how-to-add-a-scrollbar-to-the-mobile-menu-copy\/"},"modified":"2018-12-10T14:07:57","modified_gmt":"2018-12-10T14:07:57","slug":"how-to-apply-hover-styling-to-top-level-items-on-mobile","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/how-to-apply-hover-styling-to-top-level-items-on-mobile\/","title":{"rendered":"How to apply hover styling to top level items on mobile"},"content":{"rendered":"<p>Previous to v2.5.3, hover styles would be applied to the mobile menu using the following theme editor options. These options can be found under <em>Mega Menu &gt; Menu Themes &gt; Mobile Menu<\/em>:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/12\/mobile-menu-hover-styling.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-178161\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/12\/mobile-menu-hover-styling.png\" alt=\"\" width=\"1818\" height=\"1418\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/12\/mobile-menu-hover-styling.png 1818w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/12\/mobile-menu-hover-styling-300x234.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/12\/mobile-menu-hover-styling-768x599.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/12\/mobile-menu-hover-styling-1024x799.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/12\/mobile-menu-hover-styling-50x39.png 50w\" sizes=\"auto, (max-width: 1818px) 100vw, 1818px\" \/><\/a><\/p>\n<p>In v2.5.3 we made a change to remove the &#8220;:hover&#8221; styling from the top level items in mobile. We made this change because mobile browsers can sometimes incorrectly leave the hover styling applied to (what <em>should<\/em> be) inactive elements.<\/p>\n<p>This change means the menu items will only become highlighted once they are tapped\/active.<\/p>\n<p>If you wish to restore the hover styling for your mobile menu, go to <em>Mega Menu &gt; Menu Themes &gt; Custom Styling<\/em> and add the following:<\/p>\n<pre class=\"lang:default decode:true\">@include mobile {\r\n    #{$wrap} #{$menu} &gt; li.mega-menu-item &gt; a.mega-menu-link:hover {\r\n        color: $mobile_menu_item_link_color_hover;\r\n        @include background($mobile_menu_item_background_hover_from, $mobile_menu_item_background_hover_to);\r\n    }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Previous to v2.5.3, hover styles would be applied to the mobile menu using the following theme editor options. These options can be found under Mega Menu &gt; Menu Themes &gt; Mobile Menu: In v2.5.3 we made a change to remove the &#8220;:hover&#8221; styling from the top level items in mobile&#8230;.<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-178159","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":"Previous to v2.5.3, hover styles would be applied to the mobile menu using the following theme editor options. These options can be found under Mega Menu &gt; Menu Themes &gt; Mobile Menu: In v2.5.3 we made a change to remove the &#8220;:hover&#8221; styling from the top level items in mobile....","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/178159","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=178159"}],"version-history":[{"count":2,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/178159\/revisions"}],"predecessor-version":[{"id":178160,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/178159\/revisions\/178160"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=178159"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=178159"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=178159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}