how can I get this header navbar into a hamburger menu for mobile ? I tried many things I saw on internet but didn't work..
I guess I need to use media queries with it but I'm not sure. Thanks for your help
Here's the code:
header {
z-index: 9;
position: fixed;
top: 0;
width: 100%;
background: #583760;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
max-height: 100px;
margin-left: 100px;
float: left;
padding: 10px;
}
nav {
margin-right: 80px;
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 40px;
padding-top: 42px;
}
nav a {
color: #e5e5e5;
text-decoration: none;
}
nav a:hover {
color: #CFCFCF;
}
<header>
<img src="images/GameStar-Blanc.png" alt="logo" >
<nav>
<ul>
<li><a href="#">A LA UNE </a></li>
<li><a href="#actualite">L'ACTUALITE</a></li>
<li><a href="#guides">GUIDES ET ASTUCES</a></li>
<li><a href="#prochainement">PROCHAINEMENT</a></li>
</ul>
</nav>
</header>
............
CodePudding user response:
Try this
const btn = document.querySelector("#open-menu");
const menu = document.querySelector("nav");
btn.addEventListener("click", () => {
menu.classList.toggle("active");
})
header {
z-index: 9;
position: fixed;
top: 0;
width: 100%;
background: #583760;
}
.logo {
max-height: 100px;
margin-left: 100px;
float: left;
padding: 10px;
}
nav {
margin-right: 80px;
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 40px;
padding-top: 42px;
}
nav a {
color: #e5e5e5;
text-decoration: none;
}
nav a:hover {
color: #CFCFCF;
}
button {
float: right;
display: none;
}
@media screen and (max-width: 414px) {
button {
display: block;
}
nav {
position: absolute;
margin-right: 0;
top: 100%;
right: 0;
width: 100%;
background-color: red;
display: none;
}
nav.active {
display: block;
}
nav li {
display: block;
margin: 0;
}
}
<header>
<img src="images/GameStar-Blanc.png" alt="logo" >
<button id="open-menu">Toggle Menu</button>
<nav>
<ul>
<li><a href="#">A LA UNE </a></li>
<li><a href="#actualite">L'ACTUALITE</a></li>
<li><a href="#guides">GUIDES ET ASTUCES</a></li>
<li><a href="#prochainement">PROCHAINEMENT</a></li>
</ul>
</nav>
</header>
Suggestion: use flexbox to create navbar ?
CodePudding user response:
nav {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
margin-right: 0;
float: initial;
background-color: red;
height: 100vh;
width: 0;
overflow: hidden;
transition: .23s;
}
nav.active {
width: 300px;
}