Search code examples
htmlcssflexboxcss-grid

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

  • width: Full page
  • height: Depends on content height

Yellow Zone

  • width: Full page - red zone
  • height: Depends on content height
  • items wraps to x new rows

Red Zone:

  • width: Depends on content width
  • height: Same as yellow zone
  • items does not wrap and are presented on the same row as the last row on the yellow zone

enter image description here

Solution

  • 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>