1Recently I read Stefan Bauer’s article on how to create a pure CSS Burger Menu, and it got me thinking: can I improve on his design? This is a step-by-step guide to the CSS Burger Menu for the quick launch. It’s a blend of Bauer’s designs in addition to a few that I found across the web.

This menu is designed to work in Office 365, however it should work on premise in 2013. Updates will follow once I’ve had a chance to test it in on premise 2016. At the bottom of the article is the full style sheet. As always this code is provided as is. Use at your own risk.

1. First, we want to Add the word Quick Launch with our hamburger icon to the Quick Launch.
2. Add the functionality to hide the quick launch.
3. Now add the hover action on focus and on hover.

We place it on focus because some mobile devices use focus instead of hover.

4. There is one final piece to this Hamburger Menu which is the flyout for the recent links or for any other multilevel navigation. This piece hides it.

This shows the flyout when you hover over it.

5. After this you will just need to apply some styling to the quick launch to make it look a bit nicer.

If you have any questions feel free to comment below. If you’re more of a social butterfly you can also post your questions on Twitter and tag @rdpatr01 or #ComposerRussell.

    • So you can just target the li’s in the quick launch and then add the before modifier to your css selector.
      This will allow you to insert content before the content in the list item. Very similar to what I have done below.

      Let me know if you have any other questions.

      .ms-core-listMenu-verticalBox ul li::before
      content: “\2630”

Leave a Reply

Your email address will not be published. Required fields are marked *