The Q theme includes 3 navigation areas:
- Primary Navigation
- Secondary Navigation
- Handheld Navigation
The primary and secondary navigation areas are used on large screens, while the handheld navigation is used for smaller screens. You can select the breakpoint for the large/small screens from the Grid section in the customizer.
The primary navigation is a classic, multi-level navigation that can be used for the main navigation of your website. It is only visible on screen sizes above the breakpoint defined in your theme-options in the customizer, and has the following options you can use for its styling:
Controls the padding of the grid-part.
Controls the max-width of the inner wrapper in the grid-part.
- Menu Mode
Can be used to switch between horizontal and vertical navigation modes. If the navigation is in a sidebar in your grid you can easily switch to vertical mode here.
- Background Color
The background-color of the grid-part.
- Menu Items Color
The text-color of the menu items.
- Accent Background Color
The background color of menu items on hover, and also when an item is active (current page).
- Accent Text Color
The text color of menu items on hover, and also when an item is active (current page). Can be used to ensure there is enough contrast with the accent-background-color setting.
If enabled, the grid-part will become sticky on the top of the screen. Please note that preview for this option may not be available in the customizer due to a browser bug.
- Items Justification
Allows you to change how menu items are aligned and justified inside their container.
- Menu Items Internal Padding
Can be used to Add some extra whitespace between menu items. Please note that this setting controls both horizontal and vertical padding for the menu items, using a golden-ratio relation between the two. The value you select will be used for the horizontal padding, while vertical padding will be the selected value divided by 1.618.
The secondary navigation is identical to the primary navigation with a few styling tweaks. The key difference between the primary and secondary navigation areas is that the secondary navigation is best suited for non-hierarchical, flat menus (a single level) while the primary navigation supports hierarchies.
Customizer options for the secondary navigation are similar to the ones in the primary navigation.
The handheld navigation is only visible on screen sizes below the threshold defined in your grid settings.