1. Home
  2. Docs
  3. Customizing the Theme
  4. Header Settings
  5. Main Menu

Main Menu

Accessed in Appearance → Customize → Header Settings → Main Menu.

General info

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

Good start however is to prepare your menu first.

Submenus

In our theme submenu are opened by clicking on parent item or submenu opener.

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

So there is no option “hover to open submenu”. 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.

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

Submenu openers

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 → Customize → Header Settings → Main Menu → Submenu/mega menu open icons

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 please check this.

Accessibility focus rings on the menu

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.

However, there are some users that don’t like the default browser focus ring and want to disable it.

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:


/* focus ring on submenu opening icons */
.top-menu i.sub-mark:focus {
    outline: none;
}
/* focus ring on menu items */
.top-menu > li > a:focus, .top-menu > li > span.title:focus {
    outline: none;
}

 

Was this article helpful to you? Yes No