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

enter image description here

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 >
    <li>
        <a href="#" >
            All
            <span >151</span>
        </a>
    </li>

    <li>
        <a href="#" >
            Started
            <span >128</span>
        </a>
    </li>

    <li>
        <a href="#" >
            On Hold
            <span >15</span>
        </a>
    </li>

    <li>
        <a href="#" >
            Completed
            <span >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:

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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 >
    <li>
        <a href="#" >
            All
            <span >151</span>
        </a>
    </li>

    <li>
        <a href="#" >
            Started
            <span >128</span>
        </a>
    </li>

    <li>
        <a href="#" >
            On Hold
            <span >15</span>
        </a>
    </li>

    <li>
        <a href="#" >
            Completed
            <span >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.