Hamburger menu CSS work-around

Xway
1

For those wanting to try your hand at using CSS to create responsive hamburger menus prior to them getting added to Xway…

Step1:

Click inside your nav box and choose insert:markup item and paste the following:

<!-- (A) MENU WRAPPER -->
<nav id="hamnav">
  <!-- (B) THE HAMBURGER -->
  <label for="hamburger">&#9776;</label>
  <input type="checkbox" id="hamburger"/>
 
  <!-- (C) MENU ITEMS -->
  <div id="hamitems">
    <a href="a.html">First</a>
    <a href="b.html">Second</a>
    <a href="c.html">Third</a>
    <a href="d.html">Forth</a>
  </div>
</nav>

Edit the above by replacing the a, b, c, d with the file name for each page and then the ‘First, Second, etc’ with the text for each nav menu item, add more lines as needed.

Step 2:

In the CSS markup section of the document inspector insert the following:

/* [ON BIG SCREENS] */
/* (A) WRAPPER */
#hamnav {
  width: 100%;
  background: #000;
  /* Optional */
  top: 0;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex; }
#hamitems a {
  flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
  font-family: arial, sans-serif;
}
#hamitems a:hover { background: #401408; }

/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }

/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
  /* (A) BREAK INTO VERTICAL MENU */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
  }

  /* (B) SHOW HAMBURGER ICON */
  #hamnav label {
    display: inline-block;
    color: white;
    background: #a02620;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #hamitems { display: none; }
  #hamnav input:checked ~ #hamitems { display: block; }
}

Then you will need to edit the background colors for each section to match your site and in the last line of the “HORIZONTAL MENU ITEMS” section replace ‘arial’ with whatever font you are using.

The menu will collapse into a hamburger menu on any screen 768px or smaller.

The menu items will be spread across the page, you can adjust this using the padding settings for the nav box. i.e. you can move the whole menu to the right side of the page by setting the left padding to 50%, or you can squeeze the menu toward the center adding right and left padding of 10 or 20%

(above has been edited with Simon’s suggestions)

3 Likes
2

Thanks for this, that’s very helpful! If I might make a couple of suggestions, I don’t think the padding/margin in the DOES NOT MATTER section are necessary and it may be better for the font-family line to be somewhere hamburger specific. Inside #hamitems a {}, perhaps?

You can also avoid having to add the CSS to every page by using Document: CSS Markup, which you can find in the document inspector. (Circle to the left of the page inspector) If you’re familiar with Freeway, you can think of that document inspector kind of like a master page without the page, anything entered there applies to all pages that do not override it.

3 Likes
3

Cool, thanks for the suggestions, I’ll try them out…

Seth

4

Thanks again Simon, I edited the post with your suggestions…

2 Likes