Button to show navigation

HTML-CSS
1

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

2

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
3

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

4

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

5

Options are always nice

An for some video tutorials:


2 Likes
6

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

7

Hello Kirubie,

You create such navigation for mobile screens using Bootstrap.

bootstrap-navigation

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
8

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