How to make a responsive “Burger Icon” for navigation menu without using any framework?

Question

I have a responsive website and I'm using ☰ to show a burger icon but it's not compatible with some browsers like phone browser and uc browser , So I want to make a responsive burger icon using HTML , CSS .

As I said I want it to be responsive so I don't want to use static width and height , I want it to be changed depends on the screen size , I'm using Media Queries.

There is an idea of using the following html :

<div class='navigation-icon'>
   <span></span>
   <span></span>
   <span></span>
</div>  

Then each <span> is used to make one of the burger icon layers .

Answer 1

Well... I recommend you to use http://fontawesome.io/ or https://cdnjs.com/libraries/font-awesome if you want to use a CDN.

This is a library with a lot of fancy responsives icons and works on all browsers.

Answer 2

Please have a look.

 $(document).ready(function(){ $('#nav-icon1').click(function(){ $(this).toggleClass('open'); }); }); 

 * { margin: 0; padding: 0; } /* Icon 1 */ #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 { width: 60px; height: 45px; position: relative; margin: 50px auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon1 span, #nav-icon3 span, #nav-icon4 span { display: block; position: absolute; height: 9px; width: 100%; background: #333; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon1 span:nth-child(1) { top: 0px; } #nav-icon1 span:nth-child(2) { top: 18px; } #nav-icon1 span:nth-child(3) { top: 36px; } #nav-icon1.open span:nth-child(1) { top: 18px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } #nav-icon1.open span:nth-child(2) { opacity: 0; left: -60px; } #nav-icon1.open span:nth-child(3) { top: 18px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="nav-icon1"> <span></span> <span></span> <span></span> </div> 

Answer 3

 .navigation-icon span { display: block; width: 25px; height: 5px; margin: 5px; background-color: #000; } 

 <div class='navigation-icon'> <span></span> <span></span> <span></span> </div> 

Answer 4

You can host your icon inside a responsive square, like this:

HTML:

<div class="square">
    <div class='navigation-icon'>
       <span></span>
       <span></span>
       <span></span>
    </div> 
</div> 

CSS:

.square
{
  position: relative;
  margin: auto;
  width: 100%; <== This will determine the size of your square and therefore of the elements in it, as long as their size is specified in % as well.
}

.square:before
{
  content: "";
  display: block;
  padding-top: 100%; <== Leave this as is.
}

The css code above will make a perfect square that will adapt to the size of whatever it is nested in. Anything inside the square needs to be set to position: absolute though. or the square will turn into a rectangle.

Answer 5

Try this.

<div class=menu></div>
<div class=menu></div>
<div class=menu></div>

.menu {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}