Documentation › Style responsive menus

Style responsive menus

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!

Fullscreen_5_26_16__3_44_PM
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”.

Visual_Editor__Blog_IndexOnce 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


Visual_Editor__Blog_IndexFirst, 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

Fullscreen_5_26_16__4_03_PMStyling 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.

Visual_Editor__Blog_IndexThis 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.

Headway_Themes

 

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress