2 questions related to a responsive drop-down (hamburger) menu

Question

I am practicing how to make a responsive burger menu and I am trouble with two features I would like to get it work.

I am using a fontawesome icon for the burger menu and it does not want to disappear when the screen is bigger than 480px. The only way I got that one working was applying an inline style of "display:none" on icon class, but then the toggle would not work. How can I show the burger icon only when the media query condition, which is "max-width:480px" meets?

EDIT: Okay, I managed to solve this problem by applying "!important" to my icon class on both regular and media query css. It is working but I heard it is a bad practice to use this method?

I am trying to make the drop-down menu slide down and up by adding transition animation. Could I get tips on how to do that as well?

Thank you.

 $(document).ready(function(){ $(".fas").on("click",function(){ $("header nav ul").toggleClass("open"); }); });

 body{ font-family: Georgia; margin: 0; } .wrapper{ max-width:100%; max-width: 1180px; padding: 0 10px; margin: 0 auto; } header nav{ float: right; } header nav h2{ text-indent: -10000px; height: 0; margin: 0; } header nav li{ float: left; list-style-type: none; margin: 10px 20px; } header nav li a{ text-decoration: none; color: #333; font-size: 18px; } // MEDIA QUERIES // @media screen and (max-width:768px) { header nav{ float:none; clear:left; width:100%; } header nav ul { margin:0; padding:0; } h1.logo { margin:10px auto 0; float:none; } header nav ul li { margin:10px 0; width:20%; padding:0; text-align:center; } } @media screen and (max-width:480px) { .fa-bars { margin-top:10px; text-align: center; font-size:1.5rem; color:#333; height:40px; width:100%; cursor:pointer; } header .wrapper { padding:0; } header nav ul { overflow:hidden; background:#505050; height:0; } header nav ul.open { height:auto; } header nav ul li { float:none; text-align:left; width:100%; margin:0; } header nav ul li a { color:#fff; padding:10px; border-bottom:1px solid #404040; display:block; margin:0; } #home-menu li { float:none; width:96%; margin:30px 2%; } }

 <!DOCTYPE html> <html lang="en"> <head> <title>Resto</title> <link href="style.css" type="text/css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> <header> <div class="wrapper"> <h1 class="logo">Resto</h1> <nav> <i class="fas fa-bars"></i> <h2>Main Navigation</h2> <ul> <li><a href="">Our Story</a></li> <li><a href="">Menu</a></li> <li><a href="">Reservations</a></li> <li><a href="">News</a></li> <li><a href="">Reviews</a></li> </ul> </nav> </div> </header> </body> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> </html>

Answer 1

You can use your font awesome icon as a background image for your menu like so:

.fa-bars{
  content: "\f0c9"; 
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
}

this should make it easier to add display:none through javascript or via media queries.

2 questions related to a responsive drop-down (hamburger) menu

Question

1 answers

solution1
0 2018-08-13 03:33:07

2 questions related to a responsive drop-down (hamburger) menu

Question

1 answers

solution1 0 2018-08-13 03:33:07

solution1
0 2018-08-13 03:33:07