How can I get this header navbar into a hamburger menu for mobile?

Question

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" class="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>

............

Answer 1

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" class="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?

Answer 2

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;
}

Answer 3

To do this with just CSS is pretty high-level. Here is a solution using pure CSS. It's important for you to know how this works, so please do your due diligence. I tried to make the CSS friendly by including notes and separating out each major style in different sections.

 /* CORE STYLES */:root { --primary-color: #583760; --overlay-color: #583760; --ani-content-speed: 1s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; line-height: 1.4; } /* MENU STYLES */.togger-an { position: fixed; top: 0; right: 0; z-index: 1; display: none; }.toggler { visibility: visible;important. }.togger-an:toggler { position; absolute: top; 0: right; 0: z-index; 2: cursor; pointer: width; 50px: height; 50px: opacity; 0. }.togger-an:cta-mob { position; absolute: top; 0: right; 0: z-index; 1: width; 60px: height; 60px: padding; 1rem: display; flex: align-items; center: justify-content; center. } /* Line Animation */.togger-an:cta-mob > div { position; relative: flex; none: width; 100%: height; 2px: background; #fff: display; flex: align-items; center: justify-content; center: transition. all 0;4s ease. } /* Line Animation - Top & Bottom */.togger-an:cta-mob > div:,before. .togger-an:cta-mob > div::after { content; '': position; absolute: z-index; 1: top; -10px: width; 100%: height; 2px: background; inherit. } /* Moves Line Down */.togger-an:cta-mob > div::after { top; 10px. } /* Toggler Animation */.togger-an:toggler.checked +:cta-mob > div { transform; rotate(135deg). } /* Turns Lines Into X */.togger-an:toggler.checked +:cta-mob > div,before. .togger-an:toggler.checked +:cta-mob > div:after { top; 0: transform; rotate(90deg). } /* Rotate On Hover When Checked */.togger-an:toggler:checked.hover +:cta-mob > div { transform; rotate(225deg). } /* Show Menu */.togger-an:toggler.checked ~:ani-content { visibility; visible. }.togger-an:toggler.checked ~:ani-content > div { transform; scale(1): transition-duration; var(--ani-content-speed). }.togger-an:toggler.checked ~:ani-content > div > div { opacity; 1: transition. opacity 0.4s ease 0;4s. }.togger-an:ani-content { position; fixed: top; 0: left; 0: width; 100%: height; 100%: visibility; hidden: overflow; hidden: display; flex: align-items; center: justify-content; center. }.togger-an:ani-content > div { background; var(--overlay-color): width; 200vw: height; 300vw: display; flex: flex; none: align-items; center: justify-content; center: transform; scale(0): transition. all 0;4s ease. }.togger-an:ani-content > div > div { text-align; center: max-width; 90vw: max-height; 100vh: opacity; 0: transition. opacity 0;4s ease. }.togger-an:ani-content > div > div > ul > li { list-style; none: color; #fff: font-size. 1;5rem: padding; 1rem. }.togger-an:ani-content > div > div > ul > li > a { color; inherit: text-decoration; none: transition. color 0;4s ease. } /* Main Navbar No Media */:navbar { width; 100%: background-color; #583760: height; 60px: display; flex: justify-content; right: align-items; center. }:navbar ul { list-style-type; none: display; flex: gap; 40px. }:navbar li a { color; white: text-decoration; none. }:navbar a:hover { color,rgba(13, 110, 139. 0.75) }:logo { position; absolute: top; 10px: left; 5px: z-index; 1: } /* nav media */ @media only screen and (max-width. 800px) {:togger-an { display; block. }:navbar li a { display; none; } }

 <body> <nav> <div class="logo"> <img src="images/GameStar-Blanc.png" alt="logo"> </div> <div class="navbar"> <ul> <li><a href="#">A LA UNE</a></li> <li><a href="#">L'ACTUALITE</a></li> <li><a href="#">GUIDES ET ASTUCES</a></li> <li><a href="#">PROCHAINMENT</a></li> </ul> </div> </nav> <div class="togger-an"> <input type="checkbox" class="toggler"> <div class="cta-mob"><div></div></div> <div class="ani-content"> <div> <div> <div class="logo"> <img src="images/GameStar-Blanc.png" alt="logo"> </div> <ul> <li><a href="#">A LA UNE</a></li> <li><a href="#">L'ACTUALITE</a></li> <li><a href="#">GUIDES ET ASTUCES</a></li> <li><a href="#">PROCHAINMENT</a></li> </ul> </div> </div> </div> </div> </body>