How to make a nav items to adapt to small screen size

Question

I am trying to make nav items adaptive to the smaller screens. I have tried to give to parent element max-width 100% but it doesn't work. It only works when I turn display: flex; off. I need nav items to be restricted by a parent widht.

I have the following code:

HTML

<nav class="tabs">
    <li>
        <a href="#" class="tab active">
            All
            <span class="badge grey">151</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            Started
            <span class="badge grey">128</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            On Hold
            <span class="badge grey">15</span>
        </a>
    </li>

    <li>
        <a href="#" class="tab">
            Completed
            <span class="badge grey">8</span>
        </a>
    </li>
</nav>

CSS:

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--color-border);
      gap: 1.5rem;
      flex-wrap: nowrap;
      overflow-x: auto;
    }
    
    .tabs > * {
      flex-shrink: 0;
    }
    
    .tabs .tab {
      padding: 1rem 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
    }
    
    .tabs .tab.active {
      color: var(--color-heading);
    }
    
    .tabs .tab.active::after {
      content: "";
      width: 100%;
      height: 2px;
      background-color: var(--color-primary);
      position: absolute;
      bottom: 0;
      border-radius: 2px 2px 0 0;
    }

So in this image you may see the result I am trying to achieve but without turning the flex off:

Answer 1

You should try using @media (max-width: ...) and there decrease padding , font-size , etc to get wanted result

Answer 2

The flex will force all elements to be on the same row. You can use flex-wrap to let items optionally go to the next row.

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 1.5rem;
- flex-wrap: nowrap;
+ flex-wrap: wrap;
  overflow-x: auto;
}

You can also choose to optionally set flex-direction: column for small screens using MichaelLearner's answer.

Answer 3

Assuming that you want the flex items to show in a different way on a big streen than on a small screen, consider changing the direction of the boxes from row (default to column:

Desktop:

.tabs { /* for desktop monitors with lots of with */
  display: flex;
  flex-direction: row;  
}

Mobile:

.tabs { /* for thin tall mobile phones */
  display: flex;
  flex-direction: column;  
}

 .tabs { display: flex; flex-direction: column; /* setting this to row or column will change the flow of boxes */ border-bottom: 1px solid var(--color-border); gap: 1.5rem; flex-wrap: nowrap; overflow-x: auto; }.tabs > * { flex-shrink: 0; }.tabs.tab { padding: 1rem 0; display: flex; align-items: center; gap: 0.5rem; position: relative; }.tabs.tab.active { color: var(--color-heading); }.tabs.tab.active::after { content: ""; width: 100%; height: 2px; background-color: var(--color-primary); position: absolute; bottom: 0; border-radius: 2px 2px 0 0; }

 <nav class="tabs"> <li> <a href="#" class="tab active"> All <span class="badge grey">151</span> </a> </li> <li> <a href="#" class="tab"> Started <span class="badge grey">128</span> </a> </li> <li> <a href="#" class="tab"> On Hold <span class="badge grey">15</span> </a> </li> <li> <a href="#" class="tab"> Completed <span class="badge grey">8</span> </a> </li> </nav>

PS. It appears you were trying to insert an image? (first line) please copy paste it again, directly into the editor. Stack Overflow allows for that, Also. please add what you exactly want to see in the answer.