Button to show navigation

Hey all. How do you make a button show the navigation on mobile screen sizes? Without :hover or JavaScript. Thanks.

What do you mean by “show the navigation”? Are you referring to a collapsed menu often referred to as a “hamburger menu”? Doing it by hand is pretty tedious, so it’s frequently done with bootstrap.

1 Like

Thanks for the link. Can it be done with a custom icon? I’m using an icon from font awesome for the “hamburger”.

Sure, just replace the three <span> elements in the sample with your custom icon and it should just work.

Options are always nice

An for some video tutorials:


Thank you very much. This was exactly what I needed.

Hello Kirubie,

You create such navigation for mobile screens using Bootstrap.


This is because it offers the following advantages:

  1. Easy to implement.
  2. Error free.
  3. Works on all browser.

You would also like to check this tutorial - How to Use Bootstrap to Make Images, Videos and Navbar Responsive

And once you implement the Boostrap navigation then expect people to start clapping for you :clap::clap::clap:

1 Like

Haha I love the visualization.

Yeah I have the option to work with bootstrap. But since that’s going to be my next certificate from FCC I think it would be best to understand the inner workings of CSS with these projects. Of course debugging CSS is a nightmare at times if you don’t have a designer’s eye and know what is going on. Frameworks would come in handy in these cases.

YES. I wouldn’t be interested in writing for IE or Opera. Thanks for your suggestion though!

1 Like