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.

Primary Navigation

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:

  • Padding
    Controls the padding of the grid-part.
  • Max-Width
    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.
  • Sticky
    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.

Secondary Navigation

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.

Handheld Navigation

The handheld navigation is only visible on screen sizes below the threshold defined in your grid settings.

Please add a widget to this widget area to see your content.