Styling Menus

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 css layout styles for menus can be found in menu_layout.scss. This file is only for menu layout, not styling of colors and backgrounds. Those have been separated out for easy styling without having to deal with all the layout code. To style the colors of the main menu, use site_top.scss.

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 you want to use a different breakpoint for when the menu should go vertical, 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 the $media-nav variable so that it moves at the same time the menu becomes vertical.

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)