CODEWITHSUNDEEP
javascripthtmlcssflexbox
Dynamic
Dynamic

Reputation: 19

Responsive Navbar with drop down list

I am trying to create a dropdown column navbar layout when the screen size gets too small for a horizontal layout.

My skills in CSS are very beginner and even if the solution is not in flexbox form I am more than happy.

The one thing I would like is for the header background color to stay put when the drop-down list button is pressed as it likes to expand down with the content/links inside. I plan to add the javascript later... all HTML and CSS is included below.

Logo Responsive Layout

Horizontal Layout

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS main stylesheet -->
    <link rel="stylesheet" href="./CSS/style.css" />
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
      crossorigin="anonymous"
    />
    <title>Home Page</title>
  </head>
  <body>
    <header>
      <img src="Images/Logo 70px.png" alt="logo" id="logo" />
      <!--Logo-->
      <nav>
        <ul class="nav_links">
          <li><a href="./index.html">Home</a></li>
          <li><a href="./merchandise.html">Merchandise</a></li>
          <li><a href="./about.html">About</a></li>
          <li><a href="./contactUs.html">Contact Us</a></li>
        </ul>
      </nav>
        <button class="dropbtn">
          <i class="fas fa-bars"></i>
        </button>
      </div>
      <a href="basket.php" id="Basket"><i class="fas fa-shopping-cart"></i></a>
    </header>
    <div class="flex-container">
      <div class="column">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
          repellat suscipit voluptas, ad rerum corrupti incidunt assumenda,
          fugit amet, recusandae officiis unde similique ullam. Quos magni
          cupiditate omnis dignissimos. Repudiandae architecto alias odio modi
          neque asperiores veritatis dicta ipsum! Enim cupiditate laborum
          voluptatem ipsa incidunt optio nulla facilis natus?
        </p>
      </div>
      <div class="column">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
          repellat suscipit voluptas, ad rerum corrupti incidunt assumenda,
          fugit amet, recusandae officiis unde similique ullam. Quos magni
          cupiditate omnis dignissimos. Repudiandae architecto alias odio modi
          neque asperiores veritatis dicta ipsum! Enim cupiditate laborum
          voluptatem ipsa incidunt optio nulla facilis natus?
        </p>
      </div>
      <div class="column">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
          repellat suscipit voluptas, ad rerum corrupti incidunt assumenda,
          fugit amet, recusandae officiis unde similique ullam. Quos magni
          cupiditate omnis dignissimos. Repudiandae architecto alias odio modi
          neque asperiores veritatis dicta ipsum! Enim cupiditate laborum
          voluptatem ipsa incidunt optio nulla facilis natus?
        </p>
      </div>
    </div>
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
}

header {
  display: flex;
  padding: 10px 0;
  background-color: #ddf2eb;
  overflow: hidden;
  align-items: center;
}

#logo {
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 2%;
}

.nav_links {
  list-style: none;
  margin-left: 3vw;
  white-space: nowrap;
  margin-right: 20px;
}

.nav_links li {
  display: inline-block;
  padding: 0px 2.5vw;
}

header a {
  transition: all 0.3s ease 0;
  font-family: "Montserrat", "sans-serif";
  font-weight: 500;
  font-size: 15px;
  color: #606d5d;
  text-decoration: none;
}

#Basket {
  display: flex;
  margin-left: auto;
  margin-right: 40px;
  font-size: 30px;
}

header a:hover {
  color: honeydew;
}

.flex-container {
  display: flex;
}

.dropbtn {
  display: none;
}

.dropdown-content {
  display: none;
}

@media only screen and (max-width: 600px) {
  header {
    justify-content: space-between;
  }

  #Basket,
  .nav_links {
    display: none;
  }

  .dropbtn {
    font-size: 2rem;
    display: inline-block;
    border: transparent;
    color: rgb(113, 39, 136);
    background-color: transparent;
    margin-right: 2%;
  }

  .dropbtn:hover {
    transform: rotate(90deg);
    color: rgb(240, 204, 252);
    cursor: pointer;
    transition: all 0.3s linear;
  }
}

Upvotes: 0

Views: 296

Answers (1)

Divya Prakash
Divya Prakash

Reputation: 36

You have already done pretty much work. For creating the dropdown menu, you can create one box having the links with css position:relative,z-index:5; and other UI details according to you. By default, set the display property to none. And add toggle function in dropdown btn.

Upvotes: 1

Related Questions