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 the main menu. So colors, font size/weight, separators, opening/closing icons, etc.

Good start, however, is to prepare your menu first.

In Rife Pro, there are more Hover effects to choose from.

Submenus

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

This is a pattern we decide to use for the 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 your 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 a new page instead of a submenu. That is why there is an option to define the submenu opening icons. You can activate it in Appearance → Customize → Header Settings → Main Menu → Submenu/Mega-Menu : Opening/Closing 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 3 No 9