I've made a basic navigation bar sticking at the top of my page, but admittedly I'm having trouble understanding how to create a hamburger menu using CSS for smaller screen sizes (I'm still new to JavaScript and haven't the faintest idea on how to deal with creating a script for the nav bar). I'd just like to turn it into a column at the very least, I know it's possible to do this w/CSS using the checkbox, but I've had trouble implementing it myself.
* {box-sizing: border-box;}
body {font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;}
.navbar {background-color: rgba(50, 150, 220, 1);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 50px;
position: fixed;
top: 0;
overflow: hidden;
color: white;
padding: 25px 25px;}
.navbar ul {display: flex;}
.navbar ul li {list-style-type: none;}
.navbar ul li a {display: block;
text-decoration: none;
color: white;
padding: 1rem;}
.navbar ul li a:hover {background-color: rgb(200, 200, 200);}
main {height: 1500px;}
<header>
<nav >
<h2>Site name</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
I tried setting the navbar class in the media query to "flex-direction: column;" with no luck.
CodePudding user response:
here is the below code with checkbox toggling to open and close html Hemberger.
* {box-sizing: border-box;}
body {font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;}
.navbar {background-color: rgba(50, 150, 220, 1);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 50px;
position: fixed;
top: 0;
overflow: hidden;
color: white;
padding: 25px 25px;}
.navbar ul {display: flex;}
.navbar ul li {list-style-type: none;}
.navbar ul li a {display: block;
text-decoration: none;
color: white;
padding: 1rem;}
.navbar ul li a:hover {background-color: rgb(200, 200, 200);}
main {height: 1500px;}
/* New Code */
/* for large device */
.navbar #bar,
.navbar [for='bar']{
display: none;
}
/* for small device */
@media(max-width: 500px){
.navbar{
position: relative;
overflow: visible;
}
.navbar ul{
display: none;
}
.navbar [for='bar']{
display: block;
cursor: pointer;
}
.navbar input:checked ~ ul{
display: block;
position: absolute;
top: 100%;
background:red;
border: solid;
left: 0px;
width: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 17px;
}
}
<header>
<nav >
<h2>Site name</h2>
<input type="checkbox" id="bar"/>
<label for="bar">
<svg fill="#fff" viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>
</label>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>