how to make navbar responsive and collapseable

Question

I am trying to get this navbar to be reponsive, im not too familiar with reponsive layouts but i know how to use media queries a little bit, and i haven't tried anything yet since i don't know where to start. How can i get this navbar to shrink with the screen size and at a certain breakpoint, collapse into a 3 lined button.

*,
*::before,
*::after {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  padding: 0;
  margin: 0;
  background-color: rgb(245, 245, 245);
}

.navbar {
  display: flex;
  justify-content: space-between;
  background-color: white;
  box-shadow: 0 2px 2px -2px gray;
  align-items: center;
  height: 7vh;
}

.navbar .logo {
  height: 2.5em;
  width: 3em;
  border-radius: 0.3em;
  cursor: pointer;
}

.navbar .right-links {
  display: flex;
  gap: .2em;
  padding-inline-end: 12em;
  justify-content: center;
  align-items: center;
  width: 15vw;
}

.navbar .left-links {
  display: flex;
  gap: 1rem;
  padding-inline-start: 12rem;
}

.navbar .right-links .loginbtn {
  background: transparent;
  font-weight: bold;
  border: none;
  color: rgb(64, 64, 64);
  cursor: pointer;
  height: 3em;
  width: 5em;
  border-radius: 0.5em;
}

.navbar .right-links .loginbtn:hover {
  background: rgb(47, 58, 178, 0.1);
  color: rgb(47, 58, 178);
  text-decoration: underline;
}

.navbar .right-links .signupbtn {
  background: transparent;
  font-weight: bold;
  font-size: 0.9rem;
  color: rgb(59, 73, 223);
  border-color: rgb(59, 73, 223);
  border-style: solid;
  cursor: pointer;
  height: 3em;
  width: 10em;
  border-radius: 0.5em;
}

.navbar .right-links .signupbtn:hover {
  font-weight: bold;
  background: rgb(47, 58, 178);
  border: rgb(47, 58, 178);
  color: white;
  text-decoration: underline;
}

.navbar .left-links .search-box {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  margin-right: 15px;
  padding: 8px 12px;
  border-radius: 7px;
}

.navbar .left-links .search-box input {
  font-weight: bold;
  font-size: 0.9rem;
  width: 400px;
  border: 0;
  outline: 0;
  background: transparent;
}

.navbar .left-links .search-box button {
  border-radius: 0.5em;
  background: transparent;
  cursor: pointer;
  border: none;
}

.navbar .left-links .search-box button:hover {
  background: rgb(47, 58, 178, 0.1);
}

<nav class="navbar">
  <div class="left-links">
    <img href="/" class="logo" src="/imgs/dev.to.webp" alt="" />
    <div class="search-box">
      <input type="text" placeholder="Search..." />
      <button class="search-bottom">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="crayons-icon c-btn__icon" focusable="false"><path d="m18.031 16.617 4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"></path></svg>
          </button>
    </div>
  </div>
  <div class="right-links">
    <button class="loginBtn">Log In</button>
    <button class="signupBtn">Create account</button>
  </div>
</nav>

Answer 1

By using relative units, the view will be able to easily adapt to the state of the screen. And setting a breakpoint we can set a styling element based on the viewport. So that way the content that we display on the page can be adjusted to various roles, be it layout or font size.

html, body {    
margin: 0;
padding: 0; 
}   
.container {    
display: flex;    
flex-wrap: wrap; 
}   
.box {    
min-height: 150px;   
width: 100%; 
}   /*For small screens*/
@media screen and
(min-width: 450px) {    
.light_blue, 
.green {
 width: 50%    
} 
}   /*For medium-sized device screens*/ 
@media screen and (min-width: 550px) {    
.red {
width: 33%;    
}
.orange {
width: 67%;    
} 
}   /*For large screens*/ 
@media screen and (min-width: 800px) {    
  .container {
 width: 800px;
 margin-left: auto;
 margin-right: auto;    
} 
}

when in a large viewport size, the content box has margins on the left and right, this is because we set the .container to apply margin-left and margin-left with an auto value if the min-width is 800.