In this guide, we will walk you through the process of adding the WP Menu element to your page and explain where the menus are pulled from.
Step 1: Create a Menu under the Appearance >> Menus.
For detailed instructions on how to set up a menu, please refer to this resource:
https://docs.optimizepress.com/article/2728-create-menus-in-wordpress/
Step 2: Within the OptimizePress Builder, click the (+) Elements section and look for the WP Menu.
Step 3: Drag the WP Menu element to the location where you want it to be displayed on your page.
Step 4: Set the specific menu you want to show on the element by clicking the List Menu (grid-like icon).
In this section, we will guide you through customizing the styling of the WP Menu element using the toolbar options.
Styles and Presets: Hover over the WP menu element and click on the Styles and Presets icon.
This feature will allow you to choose from the existing presets and set the following features:
Positioning: In this feature, you'll be able to manage the margin, padding, alignment, and width of the WP menu element.
Responsive: In this feature, you can manage how the WP Menu element will behave on specific devices.
Advanced: In this feature, you'll be able to see the element ID, set up the element caption, CSS classes, and z-index.
Text Options: Hover over the WP menu element and click on the Text Options (T) icon. This feature will allow you to set up the text styling of the WP menu element.
Below are the available features you can manage:
Font: In this feature, you'll be able to set up the Font Family and Font Weight.
Note: You can hit the "Reset Property" icon to reset the settings to default.
Size: In this feature, you'll be able to set up the Font Size, Line Height, and Letter Spacing of the WP Menu element.
Note: You can hit the "Reset Property" icon to reset the settings to default.
Styling: In this feature, you'll be able to set up the Font Style, Text Transform, and Text Decoration of the WP Menu element.
Colour Options: Hover over the WP menu element and click on the Colour Options (colour-picker) icon. This feature will allow you to modify the Text Colour and Background Colour of the WP Menu element.
Alignment: Hover over the WP menu element and click on the Alignment icon. This feature will allow you to modify how the menu items will be aligned: Start, Center, End, Space Between, and Space Evenly.
Move Element: Use this to drag the WP Menu element to any part of the page you want it to be moved.
Cloned Element: Use this to clone or duplicate the WP element. This is helpful when you want to set up the same WP menu element on other parts of the page retaining its settings.
Delete Element: Click on the Bin icon to delete the WP Element from the builder.
Advanced Settings: Click on the Gear-like icon to setup the following properties on the WP Menu element: Space Above Element, Space Below Element, Width, Alignment
This section will show you how to customize the WP Menu items.
Select an item from the WP Menu element, and a Menu Item toolbar will appear.
Hover over the available options on the toolbar to customize the WP Menu items.
Below are the available features you can manage:
Styling Lock & Override: Click the padlock icon to lock or unlock the styling. This is best if you want to apply the customization to all the WP menu items.
Menu Item: You may customize the menu item size and icons in this option.
Text Options: Hover over the Text Options (T) icon. This feature will allow you to set up the text styling of the WP menu item.
Colour Options: Hover over the Colour Options (colour-picker) icon. This feature will allow you to modify the Text Colour, Icon Colour, and Background Colour of the WP Menu item.
Borders: This option will let you customize the border setting of the WP menu item.
Alignment: Hover over the Alignment icon. This feature will allow you to modify how the menu items will be aligned: Start, Center, End, Space Between, and Space Evenly.
Hover State: This option will let you set how the WP menu item will behave when in hover state. You can customize the border, text, icon, and background settings.
Advanced Settings: Use this option to customize the responsive, shadow styling, triangle, and advanced setup on both the normal and hover state of the WP menu item.
To control the responsiveness of the WP menu element, follow the steps below:
Within the WP Menu toolbar, go to the Advanced Settings.
Toggle the Responsive feature
Set your preferred behavior
How to edit the WP Menu element on Tablet and Mobile views
Use the device preview option of the page builder to see how the WP Menu element behaves on different devices and set customization using the responsive tool to your design preference.
For a detailed guide on how to edit elements for Mobile and Tablet views within the page builder, you may check out this article:
https://docs.optimizepress.com/article/2399-how-to-edit-the-mobile-version-of-your-site/
If you need any help please reach out to our support team and they'll be happy to help with any questions you may have about the WP Menu element
