The inner pages navigation can be customized so as to differ from navigation in the front-page.
Thus, there’s a specific section dedicated to Inner Pages Navigation.
Go to the Customizer -> Navigation -> Inner Page Navigation.
It is important that you have an inner page open, when customizing navigation for the inner pages. Otherwise, the changes you apply here will not be visible.
Inner Pages Navigation Options
The options for configuring navigation within inner pages are:
Use front page navigation style
This option is for replicating the navigation style of the front page, to the inner pages of the website. It will take the configurations from the front-page navigation style and apply them to the inner pages.
If this option is enabled, there will be no additional features for customization of the inner pages navigation.
Stick to top
When enabled, this option makes the navigation bar stick to top when visitors scroll down an inner page.
Boxed navigation
Check this to make the navigation bar the same size as other elements; by default, the navigation bar is wider.
Show navigation bottom border
This allows you to insert a line delimiting the navigation bar from the rest of the inner page. This will be the navigation bottom border. Depending on the settings you apply to it, the bottom border will be more visible or subtler, but perfectly integrated into the overall design.
Transparent navigation bar
If you enable this option, the navigation bar will have no distinctive color from the header. This way, there’ll be a very cohesive integration of the navigation bar in the webpage.
Navigation bar type
6 types are available for the inner pages navigation bar:
- Logo on left, navigation on right
- Logo on center, navigation below
- Logo inside navigation (the logo symbol will be part of the items comprised by the navigation menu)
- Logo, navigation, custom area (you can add a customized button in the custom area)
- Menu, logo, custom area (you can add a customized button in the custom area)
- Logo, custom area, navigation below
Navigation Style
4 styles are available for the inner pages navigation:
- Simple text menu – the menu in the navigation bar will have no additional customization; it will be displayed in plain text
- Material buttons – the items in the navigation bar will be contained by Material buttons
- Bordered active item – for a more precise orientation of visitors within the page and the website, the active element in the menu will be bordered
- Background color active item – to help users get oriented into the website/webpage, you can set the active item to be marked by a certain background color. Select this if it matches your overall design.
Buttons Settings
- For the simple text menu, you have the option to set the spacing between the menu buttons. Click on Buttons Settings, choose the preferred values and see the difference in live preview:
- For Material buttons, you have the option to set the spacing between the buttons, and adjust the roundness of the buttons corners, as well.
- For the bordered active item, several features are available for in-depth customization. Click on Buttons Settings and set values for:
Buttons spacing – this defines the distance between the buttons for the elements contained by the menu
Border style – from here, you can choose for the active item to be underlined, bordered at the top and at the bottom, or only bordered at the top.
Border thickness – set how thick or thin you want the border of the active item to be. Adjust the values and compare several results in live preview.
Border distance – this refers to the space between the borders and the active item itself. You can set the borders to be at a greater distance from the text of the active item, or at a narrower distance, according to your design preferences.
Hover effect – this is the effect obtained when hovering over the item with the mouse. You can choose from: borders out, borders in, borders grow. In case you select borders grow, you will have the possibility to choose the directions to Left and Right or Center.
- For the background color active item, you have the possibility to adjust the spacing between the buttons in the menu, to apply a hover effect and to adjust the roundness of the buttons contained in the navigation bar.
The hover effect includes variants such as: pull down, pull up, pull up and down from edge, pull up and down from center, pull left and right from edge, pull left and right from center. Experiment with any of these variants and choose what best suits the overall design.
Navigation Menu Settings
Normal Menu Settings
These settings (available when you click on Normal Menu Settings) apply to the menu in normal state. They refer to:
Items align – the items in the menu can be aligned to the left, at the center or to the right.
Items color – choose the appropriate color for the menu items, in normal state
Active item color – for highlighting the active item, you might choose a different, salient color for that respective item.
Active item text color – to better emphasize the active item, you might want to choose a certain text color for that item.
Hover color – this is the color for each button in the menu, when hovering over with the mouse.
Hover item text color – this is the color for each button text in the menu, when hovering over with the mouse.
Sticky Menu Settings
These features are specific to the menu when users scroll down the page and the inner pages menu sticks to top.
Click on Sticky Menu Settings and a panel will open with the customization options:
Items Align – the menu items can be aligned horizontally to the left, at the center or to the right
Navigation Bar Color – this is the color you define for the navigation bar, when in scrolling mode
Items Color – this is the color of each item of the menu, when in scrolling mode
Active Item Color – to preserve the active item highlighted in scrolling mode, you can define a certain color for it when the navigation bar is set to sticky
Active Item Text Color – the active item can be better highlighted in the menu, when this is set to sticky, by attaching a different color to that item text
Hover Color – this is the color of the menu items when hovering over with the mouse, while visitors scroll down the page
Hover Item Text Color – this is the color of the text in menu items, when hovering over with the mouse, while visitors scroll down the page.
Navigation Typography
You can easily customize typography of the items placed in the navigation bar. Click on Navigation Typography and you will open the panel with customization options:
Font Family – select a font family for the text of the menu items
Variant – select a variant for the font family you’ve already chosen for the text of the menu items
Font Size – set the dimensions of the font for the text of the items in the inner pages menu
Line Height – this refers to the vertical distance the text of the menu items occupies in the navigation bar
Letter Spacing – this refers to the spacing between the letters of the text contained in the menu items
Text Transform – from here, you can turn text into uppercase, lowercase, or capitalize it, etc.
