Menus can be difficult to deal with. Menus usually need a lot of layout styling to look right from desktop to mobile. Some menus have dropdowns and submenus of submenus. Ignition tries to make this task easier by giving you classes and simple mixins.
The
Horizontal and Vertical
The main menu on the site uses a horizontal menu that also has special javascript attached to it so it moves from the top of the site into the hidden panel-left on mobile. Read more below to learn all about menus.
There are two types of menus you can have. Horizontal and Vertical. By default, any item with the class “menu” will be vertical. WordPress outputs the class menu on all its menus so you don’t need to. These vertical menus have the ability to have dropdowns and they can be put anywhere.
Going Horizontal at $media-nav
To make a menu horizontal, just add the class “horizontal-menu” to a parent of the menu. The menu will then show up going across the site. This is done to your main menu at the top of the site by default.
Horizontal menus go vertical at some point as the browser window gets narrow. By default, they go narrow when the sass variable $media-nav
is hit. This is because the class .horizontal-menu is set to use this breakpoint by default. This sass variable can be set in variables.scss
Custom Horizontal Menu
If your making another menu and you dont want it to go vertical at the same time as the main menu, you will need to make your own horizontal menu class. Ignition makes this easy! Ignition comes with a mixin to create horizontal menus that go vertical when you want them to.
.new-horizontal-menu{
@include horizontal-menu(900px); //go vertical at 900px instead of 800px
}
The code above will make a menu that is horizontal and goes vertical when the screen goes below 900px. It’s that simple! Instead of adding the .horizontal-menu class, you would instead add your new one.
Your Main Menu
The main menu of the site is found in template-parts/site-top/site-top.php
This file shows a horizontal menu with some special attributes.
There is data-moveto which will move the menu to #panel-left.
There is also data-moveat, which is set to the css variable –nav-move (which is set to 800px by defualt).
This matches $media-nav
These attributes move the menu back and forth from the site-top to the panel-left. These data attributes can be used anywhere to move anything to and from a position on the page! More is discussed in the javascript moveto section.
Styling Your Main Menu
Your styles should be put in the site-top.scss file under sass/global. Here is where you will find the default styles and can add/replace your own for what your menu should look like, both on desktop and mobile (when in panel-left)