Use the Full-width menu module of the page designer to place a menu anywhere on your website. This will help your visitors navigate easily within your pages, creating a good user experience.
This module can only be inserted inside full-width sections. After adding one, click on the gray plus sign and select the fullwidth menu module from the list. If you prefer to find the module automatically, it’s also possible to type its name in the search bar on top.
The contents tab is the place to define what menu will appear on your module.
Pick a menu to be used with this module. You can add new menus using the Appearance-> Menus option on the left menu bar. All the new menus added will appear as an option on this module’s dropdown selection.
If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can style your menu.
Decide where the sub-menus will open. It’s possible to make them open downwards or upwards.
By default, the menu links will extend only to the bounds of the default content width, but you can enable them to extend the full width of the page.
Select the color of the active link, the dropdown menu text, and the mobile menu text. Pick also the text orientation and if it will appear with a dark or light color, depending on the background.
Select the color of the dropdown menu background, menu line, and mobile menu background.
Customize the font, color, size, spacing, height, and shadow of the menu text.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.
Let’s show an example of how to display a menu after the header.
On the content settings, we can select the options.
- Background color: #161616
- Links text orientation: center
- Menu font weight: semi bold
- Menu text color: #ffffff
Here it is: