Menu - OceanWP Settings
Using the Menu feature of OceanWP Settings, you can apply a custom menu for a specific page, post, product, etc.
Main website menu is assigned via Appearance > Menus, by checking the correct box below the menu content.
Let's say your website uses a menu called "Main Menu" with specific items.
If you wish to display a different menu on a specific page and with different menu items, use the Menu option of OceanWP Settings.
Main Navigation Menu - Menu OceanWP Settings
You can create as many menus as you want with as many different menu items as you want via Appearance > Menus. Also, you don't need to assign any specific roles to them unless these menus are to be used across the entire website.
Assign a different menu to any page by choosing the correct menu from the Main Navigation Menu dropdown.
The Main Navigation Menu dropdown will display all menus you have created via Appearance > Menus, so you can choose any of the available options.
Typography - Menu OceanWP Settings
Besides assigning a custom menu to any page or post, you can also apply different typography settings to the menu.
Default Menu typography options are assigned via Customize > Typography > Main Menu.
With the new OceanWP Settings, you can access all typography settings by clicking the icon next to the Typography heading, and in case you wish to apply different settings from those in the Customizer.
Clicking the icon next to the Typography settings will open a modal with all available typography options.
Font Family - Menu Typography
Using the Font Family dropdown option you can set any font family of choice for a menu on a specific page.
To find the specific font, you can simply browse through available options on type in the font name in the main box.
Not Responsive: The Font Family option is not responsive. This means that you get to choose a single font family for all devices.
Font Weight - Menu Typography
If your font family of choice supports any font weights, the Font Weight option will appear.
Using the dropdown menu, you can choose from all available font weight options. Available font weights depend on the font family itself. Some font families support only one font weight, some all of them.
Not Responsive: The Font Weight option is not responsive. This means that you get to choose a single font weight for all devices.
Font Subset - Menu Typography
If your font family of choice supports any font subsets, the Font Subset option will appear.
Using the dropdown menu, you can choose from all available font subsets. Available font subsets depend on the font family itself.
Not Responsive: The Font Subset option is not responsive. This means that you get to choose a single font subset for all devices.
Font Size - Menu Typography
Apply the font size settings by using the slider or by manually adding the value in the correspondent box.
Likewise, you can choose the corresponding unit for your font size. Available font size units include:
- px (pixels),
- % (percentage), and
- em.
Responsive: The Font Size option is responsive. This means that you get to choose a different font size per device (if needed). However, the font size unit itself is not responsive and one and the same will be utilized for all devices.
Text Transform - Menu Typography
The Text Transform option has 4 available settings:
- Default (utilizing Customizer settings),
- Capitalize (capitalize first letter of each word aka Capitalize First Letter Of Each Word),
- Uppercase (all letters are caps aka ALL LETTERS ARE CAPS), and
- Lowercase (all letters are lower case).
Not Responsive: The Text Transform option is not responsive. This means that you get to choose a single option for all devices.
Line Height & Letter Spacing - Menu Typography
Apply the line height or letter spacing settings by using the slider or by manually adding the value in the correspondent boxes. The line height settings function exactly like the font size settings.
Responsive: Both the Line Height and Letter Spacing options are responsive. This means that you get to choose a different values per device (if needed). However, the font size unit itself is not responsive and one and the same will be utilized for all devices.
Typography Responsive Settings - Menu Typography
Adjust all responsive typography settings per device (and if needed) by selecting the correct device from the top of the Typography settings popup.
Colors - Menu OceanWP Settings
Using the available color options, you can assign different colors to your menu items if those differ from the main colors you assigned via Customize > Header > Menu.
Available color options include:
- Link Color: regular link color.
- Link Color: Hover: link color on mouse hover.
- Link Color: Active: link color of a menu item in active state (the page item is open).
- Link Background: regular link color background.
- Link Background: Hover: background color on mouse hover.
- Link Background: Active: background color of a menu item in active state (the page item is open).
- Simple Social Background: background color of icons of the social menu in the header (Customize > Header > Social Menu).
- Simple Social Background: Hover: background color of social menu icons on mouse hover.
- Simple Social Color: color of the logo of the social menu icons.
- Simple Social Color: Hover: color of the logo of the social menu icons on hover.
To access the color options click on the color icon next to the corresponding item.
That's it!
Enjoy building your website!