CODEWITHSUNDEEP
htmlcssflexboxcss-grid
Fred
Fred

Reputation: 43

How to create a dynamic navigation bar with one zone of wrapping items, and one zone of not wrapping items

I am trying to build this dynamic navigation bar with two zones, and only set sizes on the menu items. The yellow zone items shall wrap freely while the red zone items shall be presented at the bottom with no wrapping. Can i have some guidance on how to solve this..am totally lost :/

Navigation container

Yellow Zone

Red Zone:

enter image description here

Upvotes: 0

Views: 105

Answers (2)

Максим Мовчан
Максим Мовчан

Reputation: 167

  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      nav,
      .yellow,
      .red {
        display: flex;
      }
      .yellow {
        flex-wrap: wrap;
        background: yellow;
        gap: 1rem;
      }
      .red {
        background: red;
        gap: 1rem;
      }
      .red a {
        align-self: flex-end;
      }
      .yellow,
      .red {
        padding: 1rem 2rem;
      }
      a {
        padding: 1rem 2rem;
        border: 1px solid teal;
      }
    </style>
    <nav>
      <div class="yellow">
        <a href="#">A1</a>
        <a href="#">A2</a>
        <a href="#">A3</a>
        <a href="#">A4</a>
        <a href="#">A5</a>
        <a href="#">A6</a>
        <a href="#">A7</a>
      </div>
      <div class="red">
        <a href="#">B1</a>
        <a href="#">B2</a>
        <a href="#">B3</a>
      </div>
    </nav>
  </body>

Upvotes: 0

TermoPollo
TermoPollo

Reputation: 260

This should do what you are looking for. To do most of the styling I used flex-box, so if you don't know it yet, I suggest you learn it, it's very useful.

What I basically do is use two separate containers to which I'm going to apply a different flex-flow. flex-flow takes the direction (row/column) as the first "parameter" and the wrap (wrap/nowrap) as the second. I add a little gap between the elements and you can style the rest as you prefer.

I'll also link you to the codepen, so you can test it easier.

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

nav {
  display: flex;
  flex-flow: row nowrap;
  background: gray;
}

.wrap {
  display: flex;
  flex-flow: row wrap;
  flex-grow: 2;
  gap: .5rem;
  background: yellow;
  padding: .4rem;
}

.nowrap {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  align-items: flex-end;
  gap: .5rem;
  background: red;
  padding: .4rem;
}

.element {
  width: 500px;
  height: 50px;
  background: blue;
}

.element-2 {
  width: 300px;
  height: 50px;
  background: blue;
}
<!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">
  <title>Document</title>
</head>
<body>
  <nav>
    <div class="wrap">
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
      <div class="element"></div>
    </div>
    <div class="nowrap">
      <div class="element-2"></div>
      <div class="element-2"></div>
      <div class="element-2"></div>
    </div>
  </nav>
</body>
</html>

Upvotes: 1

Related Questions