In Headway 4, you have 3 responsive menu options: a select menu, a vertical slide out and a horizontal slide out. First things first, to style, you need to open the Design Editor.
Now, let’s take each responsive menu.
Basic Select Input
Simply select the element with the inspector (you’ll need to activate the phone device preview) to do that and style away. You can also youse the navigator or styles tab to style this element. Please note: there are limits as to what styles you can apply to this type of element. See here for more information.
Vertical Menu
If you have this menu selected, the inspector can handle most of the styling but to style the 3 lines (the hamburger icon), you will need to use the method described below.
Activate responsive menu
First, you will need to activate the responsive menu within the Visual Editor. If you do not have it set to activate in desktop mode, you will need to click on one of the device previews (See Visual Editor for a diagram). By default, only the phone device preview will activate the responsive menu as the breakpoint is set to 600px by default. If you change that in your block settings to 1024px, then the tablet device preview will also activate it.
Select the element
The menu items and sub-items
First, to open the menu, using the design editor, select the word “Menu” or whatever you’ve chosen for your Menu text. Then click on it and the menu should open up.
You can now style the parent menu items by selecting them and applying your styles. It’s really that easy!
To open the sub-menu, click on the arrow next to the parent menu item and the sub-menu should open as well allowing you to style the sub-menu items.
The sub-menu items are now available to style!
The hamburger icon / 3 lines
With the inspector, select the element that includes both the responsive menu text and the 3 lines.
The menu text will be “Menu” by default.
It should say “hyperlink” in the tooltip if you have selected the right element.
If you have selected the right element, it should say “Hyperlink”.
Once you do that, then go to the navigator tab and the element you have just selected should be highlighted. Click on the arrow to the left of “Hyperlink” to open the sub-items below it.
You should then see
- Hyperlink
- A Span
- A Span
Click on the arrow next to the second A Span to open up the sub-menu that contains the element you need to style. You should then see:
Hyperlink
- A Span
- A Span
- A Span
- A Span
- A Span
The three A Spans represent the 3 lines. Click on any one of them and you are now editing the lines.
To change the color of the lines, you will be changing the background color and not the font color.
Here’s an example where I changed the lines to red:
Horizontal Slideout
If you have this menu selected, the inspector can handle most of the styling but to style the 3 lines (the hamburger icon), you will need to use the method described below.
Activate responsive menu
First, you will need to activate the responsive menu within the Visual Editor. If you do not have it set to activate in desktop mode, you will need to click on one of the device previews (See Visual Editor for a diagram). By default, only the phone device preview will activate the responsive menu as the breakpoint is set to 600px by default. If you change that in your block settings to 1024px, then the tablet device preview will also activate it.
Style the items within the Slide Out Menu
First, to open the menu, using the design editor, select the word “Menu” or whatever you’ve chosen for your Menu text. Then click on it and the menu should open up.
Style the Menu Text and Hamburger Icon / 3 lines
Styling the menu text is easy – just select the menu text with the inspector and style away.
Styling the hamburger icon / 3 lines isn’t quite as easy but is still easy. Simply select element that contains the menu text and the hamburger icon. Then left click. The element tooltip should say “Span” just like the image to the right.
This will open the slide out menu, but that is okay. Now, go to the navigator tab. You should see your element highlighted in blue.
Then, go down to the next A Span that has an arrow to the left. Click on the arrow to open it if it is not already, and then click on any one of the 3 A span’s present (each one represents one of the lines).
Finally, to change the color, you will be changing the background color, not the font color. Here is an example where I’ve changed the lines to red.
