{"id":8739,"date":"2018-01-10T09:37:50","date_gmt":"2018-01-10T09:37:50","guid":{"rendered":"http:\/\/rifetheme.com\/help\/docs\/customizing-the-theme\/header\/main-menu\/"},"modified":"2020-11-02T11:14:28","modified_gmt":"2020-11-02T11:14:28","slug":"main-menu","status":"publish","type":"docs","link":"https:\/\/rifetheme.com\/apollo13-framework\/docs\/customizing-the-theme\/header\/main-menu\/","title":{"rendered":"Main Menu"},"content":{"rendered":"

Accessed in Appearance \u2192 Customize \u2192 Header Settings \u2192 Main Menu.<\/strong><\/p>\n

General info<\/h2>\n

Here you can set everything that is part of main menu. So colors, font size\/weight, separators, openers, etc.<\/p>\n

Good start however is to prepare your menu<\/a> first.<\/p>\n

Submenus<\/h2>\n

In our theme submenu are opened by clicking on parent item or submenu opener.<\/p>\n

This is pattern we decide to use for menu, to be future and touch devices friendly – you can see it on all our demos.<\/p>\n

So there is no option “hover to open submenu”<\/strong>. Thanks to this, submenus are also less annoying for you users as they don’t disappear when user mouse cursor will get slightly off submenu box.<\/p>\n

Read more here if you are interested in topic https:\/\/www.smashingmagazine.com\/2014\/09\/efficiently-simplifying-navigation-interaction-design\/#clicking<\/a><\/p>\n

Submenu openers<\/h3>\n

By default parents of submenu are normal links, so clicking on them will open new page instead of submenu. That is why there is option to define submenu openers. You can activate it in Appearance \u2192 Customize \u2192 Header Settings \u2192 Main Menu \u2192 Submenu\/mega menu open icons<\/strong><\/p>\n

Thanks to not switching off parent links you can have parent page and submenu at the same time. However if you like to make whole parent option to open submenu<\/strong> please check this<\/a>.<\/p>\n

Accessibility focus rings on the menu<\/h2>\n

Since version 2.2.0 we have improved accessibility of the theme. Why this is important we write more in our update post on our blog<\/a>.<\/p>\n

However, there are some users that don’t like the default browser focus ring and want to disable it.<\/p>\n

As we don’t feel this the right decision to make, we will not be adding option for this in theme. However, if you feel strongly that look on the focus is more important for you, you can add such Custom CSS to disable these focus rings:<\/p>\n

\r\n\/* focus ring on submenu opening icons *\/\r\n.top-menu i.sub-mark:focus {\r\n    outline: none;\r\n}\r\n\/* focus ring on menu items *\/\r\n.top-menu > li > a:focus, .top-menu > li > span.title:focus {\r\n    outline: none;\r\n}<\/code><\/pre>\n
 <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":39,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_tag":[],"class_list":["post-8739","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/comments?post=8739"}],"version-history":[{"count":3,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8739\/revisions"}],"predecessor-version":[{"id":9155,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8739\/revisions\/9155"}],"up":[{"embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/39"}],"next":[{"title":"Top bar","link":"https:\/\/rifetheme.com\/apollo13-framework\/docs\/customizing-the-theme\/header\/top-bar\/","href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/8740"}],"prev":[{"title":"SVG logo","link":"https:\/\/rifetheme.com\/apollo13-framework\/docs\/customizing-the-theme\/header\/svg-logo\/","href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/docs\/9114"}],"wp:attachment":[{"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/media?parent=8739"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/rifetheme.com\/apollo13-framework\/wp-json\/wp\/v2\/doc_tag?post=8739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}