Adaptivetheme supports Responsive menus for one menu block - typically your main navigation block.
There are eight responsive menus styles and you can choose any one of them for either the default or responsive style.
Below is a montage of some of the styles you can use - clockwise from top left: Drop menu, Slide down, Overlay, Mega nav, Off canvas.
Responsive menu styles are set in the Responsive Menus extension settings:
Select any menu block to use as the responsive menu. This block can be placed in any region but must be enabled before it will show in the list.
While the menu block can be in any region some thought is required here with regards to the style fo menu, for example it will not make sense to use a drop-menu style if the block is in a narrow sidebar region.
Sub-menus not showing?
- First configure your menu blocks "Maximum number of menu levels to display".
- Next configure the actual menu items - each parent item must be set to "expanded".
Breakpoints are supplied using Drupal cores Breakpoints module in and defined in
at_core.breakpoints.yml. Please see the page on Breakpoints for more information on at_core breakpoint groups.
If you change the breakpoint group you will be prompted to save the theme settings so the form can reload with the new individual breakpoints in "Breakpoint" select list.
max-width or min-width?
max-width media queries will activate the Default style when the screen is narrower than the max-width, and the Responsive style when the screen is wider than the max-width.
Using max-width is a mobile first approach where we consider the "default" to be mobile.
- Media query: all and
- Default: Off canvas - shows when narrower than 45em
- Responsive: Drop menu - shows when wider 45em
min-width media queries will activate the Default style when the screen is wider than the min-width, and the Responsive style when the screen is narrower than the min-width.
Using min-width is more like a desktop first approach where we consider "default" to be wide screens.
- Media query:
all and (min-width: 60.063em)
- Default: Off canvas - shows when wider than 60.063em
- Responsive: Slide down - shows when narrower 60.063em
There are eight styles to choose from.
Standard horizontal inline menu, without drop downs.
Standard vertical menu, supports click menus.
Standard drop menu implimentation, supports unlimited levels.
Standard hamburger/slide-down mobile menu - supports click menus.
Intial view is like a horizontal menu with a toggle button. When toggled the horizontal menu becomes vertical with all submenu items showing horizontally inline withe their parents. This pattern was popularized by The Guardian news website.
Standard off canvas slider - the menu is hidden off-page (by default the them left) with a toggle button that slides the page to the right revealing the menu. Supports click menus
Toggle button that reveals a transparent overlay "over" the site with menu items - supports click menus.
Only shows the top level items in tile boxes.
The click menu option hides sub-menus that are revealed when the click-button for that level is clicked or touched. Click menus are a space saving device that allows you to have very long or deep menus without overwhelming the site visitor.
Styles supporting Click menus are:
- Off canvas
Click menus are enabled by default.