CSS - Create responsive top navigation menu
Question
For my webpage ( Github Page ), I want to make my menu sensible to the size of the screen, such that it collapses when they are too small and the elements do not fit. I am planning to add the following solution: w3schools , using a "burguer" icon to join all the elements when the screens are small.
I am able to create the menu with the different elements, to add the "burguer" icon, and then to hide it by default when the screen is big. However, the media queries and the js function must be wrong, because when I do my screen small, the "burguer" icon appears, but the other elements do not dissapear, and cliking on the "burguer" does nothing. I guess there is a mistakes or confussion with the id names somewhere. Could it be?
In the example from w3schools uses the div tab, but I am not. Is it indispensable for the example to work?
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("nav"); if (x.className === "header_nav") { x.className += " responsive"; } else { x.className = "header_nav"; } }
/* Header_nav ----- DRAFT */ #page-wrapper { padding-top: 3.5em; } #header_nav { background: rgba(0, 0, 0, 0); box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0); cursor: default; height: 3.5em; left: 0; line-height: 3.5em; position: absolute; top: 0; width: 100%; z-index: 100; } #header_nav.icon { display: none; } #header_nav h1 { height: inherit; left: 1.25em; line-height: inherit; margin: 0; position: absolute; top: 0; } #header_nav nav { position: absolute; right: 1em; top: 0; } #header_nav nav ul { margin: 0; } #header_nav nav ul li { display: inline-block; margin-left: 1em; } #header_nav nav ul li a, #header_nav nav ul li span { border: 0; color: inherit; display: inline-block; height: inherit; line-height: inherit; outline: 0; } #header_nav nav ul li a.button, #header_nav nav ul li span.button { height: 2em; line-height: 2em; padding: 0 1.25em; } #header_nav nav ul li a:not(.button):before, #header_nav nav ul li span:not(.button):before { margin-right: 0.5em; } #header_nav nav ul li.active>a, #header_nav nav ul li.active>span { color: #e44c65; } #header_nav nav ul li>ul { display: none; } body.landing #page-wrapper { padding-top: 0; } body.landing #header_nav { background: transparent; box-shadow: none; position: absolute; } /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 600px) { #header_nav a:not(:first-child) { display: none; } #header_nav a.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 600px) { #header_nav.responsive { position: relative; } #header_nav.responsive a.icon { position: absolute; right: 0; top: 0; } #header_nav.responsive a { float: none; display: block; text-align: left; } }
<html> <head> <title>Eduardo Alvarado</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="assets/css/main.css" /> <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> <:-- Load an icon library to show a hamburger menu (bars) on small screens --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body class="is-preload"> <:-- Header Navigation Menu --> <section id="header_nav"> <nav id="nav"> <ul> <li> <a href="index"> <p style="color:white">Home</p> </a> </li> <li> <a href=""> <p style="color:white">Research</p> </a> </li> <li> <a href=""> <p style="color:white">Game-dev</p> </a> </li> <li> <a href="photography"> <p style="color;white">Photography</p> </a> </li> <li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li> </ul> </nav> </section>
The whole code can be found in the repo ( Github Repo ).
Can you see maybe the error that I am not able to spot? Why the example from w3school is not applicable?
I would really appreciate your help here. Thank you very much in advance!
2 answers
solution1
1 ACCPTED 2020-04-19 18:24:09
Here's a small reproducible solution based on your code: https://jsfiddle.net/hneromu4/5/
I added a class fixed to the link elements that were supposed to stay when we resized the window:
<section id="header_nav">
<nav id="nav">
<ul>
<li class="fixed"><a href="">Home</a></li>
<li><a href="">Research</a></li>
<li><a href="">Game-dev</a></li>
<li><a href="photography">Photography</a></li>
<li class="fixed hamburguer"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
</nav>
</section>
I also tweaked your css and js.
solution2
1 2020-04-19 18:46:14
In your CSS and HTML I have made some alterations as your hamburger menu was inside the same thing which you were trying to hide which is not really a good idea I have also adjusted your CSS slightly as you were setting a position to relative but not setting display to block. Hope this helps!
CSS (line 2525 - 2547):
@media screen and (max-width: 600px) {
#nav {display: none;}
#header_nav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
#nav.responsive {position: relative;display: block;}
#header_nav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
#nav.responsive a {
float: none;
display: block;
text-align: left;
}
}
HTML:
<!-- Header Navigation Menu -->
<section id="header_nav">
<a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a><nav id="nav" class="header_nav">
<ul>
<li><a href="index"><p style="color:white">Home</p></a></li>
<li><a href=""><p style="color:white">Research</p></a></li>
<li><a href=""><p style="color:white">Game-dev</p></a></li>
<li><a href="photography"><p style="color:white">Photography</p></a></li>
</ul>
</nav>
</section>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.