How could implement a dropdown menu via javascript?

Question

I am trying to implement a dropdown menu at 820px, I already have the navbar toggle however I can't seem to wrap my head around how I am going to get the navbar content to dropdown while keeping it responsive on smaller screens. If someone could just point me in the right direction that would be incredibly helpful, thank you.

html,
body {
  margin: 0%;
  background-color: white;
  padding: 0%;
  font-family: 'Poppins', sans-serif;
}

.navbar {
  display: flex;
  position: fixed;
  align-items: center;
  height: 5rem;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
  width: 100%;
  background-color: white;
}

.left-elements {
  display: flex;
  gap: 1.5rem;
  padding-inline-start: 1.5em;
  align-items: center;
  font-size: 0.9em;
  height: 50%;
  width: 50%;
}

.right-elements {
  display: flex;
  gap: 1em;
  white-space: nowrap;
  padding-inline-end: 4em;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.9em;
  height: 50%;
  width: 50%;
}

.logo {
  padding-inline-start: 0.5em;
  height: 3rem;
  width: 15rem;
}

a {
  text-decoration: none;
  color: black;
}

.navbar-toggle {
  display: none;
}

.btn-login {
  text-align: center;
  background-color: #90E0EF;
  border: none;
  border-radius: 0.4em;
  padding: 1em 0em 1em 0em;
  width: 8em;
}

.heading {
  display: flex;
  flex-direction: column;
  height: 35rem;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.main-header {
  font-size: 2.8rem;
  height: 20%;
  font-weight: bold;
  text-align: center;
}

.heading-text {
  width: 40%;
  font-weight: 200;
  text-align: center;
}

@media screen and (max-width: 820px) {
  .left-elements {
    display: none;
  }
  .right-elements {
    display: none;
  }
  .navbar-toggle {
    display: flex;
    padding-inline-end: 2em;
    justify-content: flex-end;
    align-items: center;
    height: 50%;
    width: 100%;
  }
}

.btn-container {
  display: flex;
  gap: 1rem;
}

.btn-container>button {
  border-style: solid;
  border-color: #90E0EF;
  border-radius: 0.4em;
  padding: 1em 0em 1em 0em;
  width: 11em;
}

.btn-sourcecode {
  background-color: #90E0EF;
}

.btn-getstarted {
  background-color: transparent;
}

.footer {
  display: flex;
  gap: 1em;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  height: 30%;
  width: 100%;
}

.footer-text {
  color: black;
}

@media screen and (max-width: 1112px) {
  .main-header {
    height: 30%;
  }
}

@media screen and (min-width: 100px) and (max-width: 595px) {
  .main-header {
    font-size: 2rem;
    height: 20%;
  }
  .heading-text {
    width: 100%;
  }
  .decentralized {
    height: 10rem;
    width: 100% !important;
  }
}

@media screen and (max-width: 390px) {
  .main-header {
    height: 30%;
  }
}

@media screen and (max-width: 414px) {
  .btn-container {
    flex-direction: column;
  }
  .main-header {
    height: 30%;
  }
}

.container-decentralized {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 21rem;
  width: 100%;
}

.decentralized {
  height: 21em;
  width: 50%;
}

@media screen and (min-width: 760px) and (max-width: 1112px) {
  .main-header {
    font-size: 3em;
    height: 30%;
  }
}

@media screen and (max-width: 820px) {
  .decentralized {
    height: 15rem;
  }
}

.hover-btn:hover {
  box-shadow: 0 7px 12px 0 rgba(0, 214, 243, 0.2);
  cursor: pointer;
  transition: box-shadow ease-in 0.1s;
}

.why-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  height: 12rem;
}

.header-why {
  font-weight: bold;
  font-size: 3em;
}

.card {
  background-color: #90E0EF;
  color: black;
  padding: 1rem;
  border: #90E0EF solid 0.2em;
  border-radius: 0.4em;
  height: 17rem;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
}

.card-title {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.card-text {
  font-weight: 200;
  font-size: 0.9em;
  text-align: center;
}


/* Screen larger than 600px 2 column */

@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Screen larger than 900px 3 columns */

@media (min-width: 941px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}




  
  
  
  
  
  Document



  
    
      
    
    
      About
      Pricing
      Integrations
      Support
    
    
      Log In


  


  
    A Powerful Decentralized, Open-Source Fundraising Software
    Manage your donations without having your data stolen and sold without your consent.
    
      
      
    
  
  
    

  

  
    Why Choose PrivDono?
  



  
    
      
        
          
        
        
          Transparent And Open-Source
        
        
          We pride ourselves on being honest and open about our software.
        
      
    
    
      
        
          
        
        
          Annoymous And Affordable
        
        
          Don't want to use card? We accept 10+ crypto currencies and even accept cash mail-ings, our service starts at $5 a month.
        
      
    
    
      
        
          
        
        
          Reliable Customer Service
        
        
          Our team will help walk you through how set up your annoymous donations so you don't have to do it alone.
        
      
    
    
      
        
          
        
        
          Easy To Use
        
        
          No code, or experience is required to set up your donations.
        
      
    
  


  
    Copyright DevExodus

Adam · Accepted Answer

Because .left-elements is a child of the nav bar you can, on small screen sizes, place it where you like using position: absolute. I've added a class to show you this and some javascript to make it clickable. I've removed the anchor tag from the navbar burger menu. I've annotated all the changes I've made so you can hopefully follow what I've done. Any questions just pop a comment in and I'll explain.

// Added this script
window.onload = () => {
  document.querySelector('.navbar-toggle').addEventListener('click', (event) => {
    document.querySelector('.left-elements').classList.toggle('left-elements-display');
  });
}

body {
  margin: 0%;
  background-color: white;
  padding: 0%;
  font-family: 'Poppins', sans-serif;
}

.navbar {
  display: flex;
  position: fixed;
  align-items: center;
  height: 5rem;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
  width: 100%;
  background-color: white;
}

.left-elements {
  display: flex;
  gap: 1.5rem;
  padding-inline-start: 1.5em;
  align-items: center;
  font-size: 0.9em;
  height: 50%;
  width: 50%;
}

.right-elements {
  display: flex;
  gap: 1em;
  white-space: nowrap;
  padding-inline-end: 4em;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.9em;
  height: 50%;
  width: 50%;
}

.logo {
  padding-inline-start: 0.5em;
  height: 3rem;
  width: 15rem;
}

a {
  text-decoration: none;
  color: black;
}

.navbar-toggle {
  display: none;
}

.btn-login {
  text-align: center;
  background-color: #90E0EF;
  border: none;
  border-radius: 0.4em;
  padding: 1em 0em 1em 0em;
  width: 8em;
}

.heading {
  display: flex;
  flex-direction: column;
  height: 35rem;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.main-header {
  font-size: 2.8rem;
  height: 20%;
  font-weight: bold;
  text-align: center;
}

.heading-text {
  width: 40%;
  font-weight: 200;
  text-align: center;
}

@media screen and (max-width: 820px) {
  .left-elements {
    display: none;
    /*added this */
    position: absolute;
    right: 0.5rem;
    top: 70%;
    flex-direction: column;
    background-color: white;
    border: 1px solid black;
    height: fit-content;
    padding-block: 1rem;
    border-radius: 0.5rem;
    /* end of added this */
  }
  /* added this */
  .left-elements-display {
    display: flex;
  }
  /* end of added this */
  .right-elements {
    display: none;
  }
  .navbar-toggle {
    /* added this */
    cursor: pointer;
    /*end of added this */
    display: flex;
    padding-inline-end: 2em;
    justify-content: flex-end;
    align-items: center;
    height: 50%;
    width: 100%;
  }
}

.btn-container {
  display: flex;
  gap: 1rem;
}

.btn-container>button {
  border-style: solid;
  border-color: #90E0EF;
  border-radius: 0.4em;
  padding: 1em 0em 1em 0em;
  width: 11em;
}

.btn-sourcecode {
  background-color: #90E0EF;
}

.btn-getstarted {
  background-color: transparent;
}

.footer {
  display: flex;
  gap: 1em;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  height: 30%;
  width: 100%;
}

.footer-text {
  color: black;
}

@media screen and (max-width: 1112px) {
  .main-header {
    height: 30%;
  }
}

@media screen and (min-width: 100px) and (max-width: 595px) {
  .main-header {
    font-size: 2rem;
    height: 20%;
  }
  .heading-text {
    width: 100%;
  }
  .decentralized {
    height: 10rem;
    width: 100% !important;
  }
}

@media screen and (max-width: 390px) {
  .main-header {
    height: 30%;
  }
}

@media screen and (max-width: 414px) {
  .btn-container {
    flex-direction: column;
  }
  .main-header {
    height: 30%;
  }
}

.container-decentralized {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 21rem;
  width: 100%;
}

.decentralized {
  height: 21em;
  width: 50%;
}

@media screen and (min-width: 760px) and (max-width: 1112px) {
  .main-header {
    font-size: 3em;
    height: 30%;
  }
}

@media screen and (max-width: 820px) {
  .decentralized {
    height: 15rem;
  }
}

.hover-btn:hover {
  box-shadow: 0 7px 12px 0 rgba(0, 214, 243, 0.2);
  cursor: pointer;
  transition: box-shadow ease-in 0.1s;
}

.why-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  height: 12rem;
}

.header-why {
  font-weight: bold;
  font-size: 3em;
}

.card {
  background-color: #90E0EF;
  color: black;
  padding: 1rem;
  border: #90E0EF solid 0.2em;
  border-radius: 0.4em;
  height: 17rem;
}

.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
}

.card-title {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.card-text {
  font-weight: 200;
  font-size: 0.9em;
  text-align: center;
}


/* Screen larger than 600px 2 column */

@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Screen larger than 900px 3 columns */

@media (min-width: 941px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}



  
    
  
  
    About
    Pricing
    Integrations
    Support
  
  
    Log In






  A Powerful Decentralized, Open-Source Fundraising Software
  Manage your donations without having your data stolen and sold without your consent.
  
    
    
  


  




  Why Choose PrivDono?





  
    
      
        
      
      
        Transparent And Open-Source
      
      
        We pride ourselves on being honest and open about our software.
      
    
  
  
    
      
        
      
      
        Annoymous And Affordable
      
      
        Don't want to use card? We accept 10+ crypto currencies and even accept cash mail-ings, our service starts at $5 a month.
      
    
  
  
    
      
        
      
      
        Reliable Customer Service
      
      
        Our team will help walk you through how set up your annoymous donations so you don't have to do it alone.
      
    
  
  
    
      
        
      
      
        Easy To Use
      
      
        No code, or experience is required to set up your donations.
      
    
  




  Copyright DevExodus

How could implement a dropdown menu via javascript?

Answers (1)

Related Questions