Navigation menu overlay settings

Navigation menu overlay settings

— Create infinite overlay settings with our new plugin settings.

Menu overlay

Go to your navigation.

  1. Wordpress by Popeye Cloud > Navigation
  2. Select a menu to edit  > choose one from the drop down and click ‘select”
  3. Menu overlay settings > choose a content block that you like to show when clicking of by hovering your menu item (test 3 click in this example)
  4. Set different settings and behaviours for your menu overlay: width, visibility, background,…
  5. Click ‘save menu’

The navbar visibility yes or no is een option where you can determine whether your navigation will be in front or over your navbar. The background visibility is where you can determine if there is a background when the menu is shown.

Tips 'n tricks

Save your settings!


Create unique navigation and menu structure for specific website page

Create a unique navigation and menu structure for each page in your website/webshop.

— You may want to refer to a different navigation on certain pages in your website/webshop. Below you will learn how to set a different menu for each page.

Set up a general navigation

Go to theme options to first set the general settings for your menu correctly.

  1. Wordpress by Popeye Cloud > Theme options
  2. Click in general Navbar > menu and choose in overlay menus for ‘overlay custom’
  3. Set a ‘navbar content block light’ and a ‘navbar content block dark’
  4. Set a ‘menu content block’ that serves as your overlay menu used on mobile. This is the menu that you see when choosing the three stripes on mobile

There are two content blocks that serve as navigation bar. This is applied so that your navbar can be shown in a light color (usually white) on a dark image and the navbar in a dark color (usually black) on a light image. You can define this for a row on your page.

The content blocks that you choose here (navbar content block – light, navbar content block – dark and menu content block) are automatically set as the menu for the entire website/webshop.

Set a individual navigation for each page

Give a page an individual menu in the backend

  1. Go to the page where you want to select another menu and click edit page.
  2. Scroll all the way down to page options > menu
  3. Here you can set a new navbar light, dark and overlay mobile which will only be visible on that page
  4. Save changes

If you want to keep the same formatting of fonts etc but only change the links we always recommend duplicating the content block you set in the theme options, rename it and change the content. This way the layout is maintained throughout the site.

Go to ‘content block’ in the side bar and choose ‘duplicate this’.

Navbar content block light & navbar content block dark

Setting a light and dark version of your navigation bar is important for the different backgrounds it is displayed on. You always set this on your first column of the page because this is where the navigation is displayed on.

  1. Click ‘edit this column’ > style > skin light or dark
  2. Save changes

Tips 'n tricks

What you set in the theme options are your default settings!