Overlay navigation is a new trend in web-design, removing the traditional menu from your sites pages. The special thing about the overlay menu is that it doesn’t have a fixed size like modals, it can cover all the screen or you can set a custom margin around the menu. This type has 12 predefined opening animation and also 6 extra hover transitions on menu items.
Now we will introduce how to set up a menu with the Overlay menu position type in details, and also will introduce the available settings.

Related parameters

Basic parameters

With the Overlay option you can set the width of the menu items. You can add that by pixels or in a percent value.

Overlay Margin will concern to the whole overlay layer. You can set each margin value separately by pixels or in a percent value.

Theme parameters

With Color behind the site option you are able to set the background color behind the site during the overlay opened.

You can define the Menu background-image or simply a background color with the Menu background parameters.

Animation parameters

Overlay animation parameter means that which animation will used for menu opening effect. You can select from 12 predefined animations. All of them work on mobile devices. Click the button below to check the effects on the demo site.

Overlay animations - DEMO

Text animation will mean the special hover effect for the menu items. These animations are specialized for the overlay menu. You can select from 6 different one:

• Square brackets
• Underline 1
• Underline 2
• Swipe up
• Push down
• Fill out

• < Prev