large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://medium.freecodecamp.org/how-to-create-a-fully-responsive-navbar-with-flexbox-a4435d175dd3">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*CZikqoB4iZIIrV_rAW_qdg.gif" alt="1*CZikqoB4iZIIrV_rAW_qdg.gif"></div>
</div>
<p>One navbar, three different layouts.</p>
<p>In this article, I’ll explain how to create a navbar which adapts to various screen sizes using Flexbox along with media queries.</p>
<p>This tutorial can also be found as an interactive screencast <a href="https://scrimba.com/g/gflexbox">in my free Flexbox course at Scrimba</a>.</p>
<p>To read more about the course, check out <a href="https://medium.freecodecamp.org/i-just-launched-a-free-full-length-flexbox-course-where-you-can-build-projects-interactively-1860e3d3c4af">this</a> article.</p>
<h4>The setup</h4>
<p>Let’s begin with the markup for a very simple navbar:</p>
<pre>&lt;nav&gt;<br>  &lt;ul class="container"&gt;<br>    &lt;li&gt;Home&lt;/li&gt;<br>    &lt;li&gt;Profile&lt;/li&gt;<br>    &lt;li class="search"&gt;<br>      &lt;input type="text" class="search-input" placeholder="Search"&gt;<br>    &lt;/li&gt;<br>    &lt;li&gt;Logout&lt;/li&gt;<br>  &lt;/ul&gt;<br>&lt;/nav&gt;</pre>
<p>The <code>&lt;ul&gt;</code> element is our flex container and the <code>&lt;li&gt;</code> elements are our flex items. To turn it into a Flexbox layout we’ll do:</p>
<pre>.container {<br>  display: flex;<br>}</pre>
<p>Which will result in the following layout:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*bEclbRvpLBeEd8oRddNFaQ.png" alt="1*bEclbRvpLBeEd8oRddNFaQ.png"></div>
</div>
<p>I’ve added some styling, but that has nothing to do with Flexbox.</p>
<p>As you can see, we have a bit of extra space on the right hand side. This is because Flexbox lays out the items going from left to right, and each item is only as wide as its content forces it to be.</p>
<p>Since the flex container by default is a block level element (and is wider than the four items) we get the gap at the end.</p>
<p>The reason the search items is wider than the others is because input fields are by default set to <code>size="20"</code>, which different browsers and operating systems interpret in different ways.</p>
<h3>Responsiveness #1</h3>
<p>To give our navbar basic responsiveness, we’ll simply give the search item a flex value of 1.</p>
<pre>.search {<br>  flex: 1;<br>}</pre>
<p>This results in the search item expanding and shrinking with the width of the container, meaning we won’t get the extra space in the right hand side.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*BZnmPAc4fNPNGkjCPS22kw.gif" alt="1*BZnmPAc4fNPNGkjCPS22kw.gif"></div>
</div>
<p>While it makes sense to have the search item grow while the others stay fixed, you could argue that it can become too wide compared to the others. So if you prefer to have all the items grow with the width of the container instead, you can simply give all the items a <code>flex</code> value of 1.</p>
<pre>.container &gt; li {<br>  flex: 1;<br>}</pre>
<p>Here’s how that plays out:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*pXzuCWHyvuyQ3JZQPoWclA.gif" alt="1*pXzuCWHyvuyQ3JZQPoWclA.gif"></div>
</div>
<p>You can also give the items different flex values, which would make them grow with different speeds. Feel free to experiment with that <a href="https://scrimba.com/c/cpJV3S3">in this Scrimba playground.</a></p>
<p>For the rest of the tutorial we’ll continue with the first solution, where the search items is the only one with a <code>flex</code> value.</p>
<h3>Responsiveness #2</h3>
<p>Our navbar works well on wide screens. However, on more narrow ones it gets into problems, as you can see here:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*PCmf5iZCXLYIckEjMBbv4g.gif" alt="1*PCmf5iZCXLYIckEjMBbv4g.gif"></div>
</div>
<p>At some point it’s not viable to have all items on the same row, as the container becomes too narrow. To solve this we’ll add a media query where we’ll split our four items into two rows. The media query will kick when the screen is 600px wide:</p>
<pre>@media all and (max-width: 600px) {<br><br>  .container {<br>    flex-wrap: wrap;<br>  }<br><br>  .container &gt; li {<br>    flex-basis: 50%;<br>  }</pre>
<pre>}</pre>
<p>First we allow the Flexbox layout to wrap with <code>flex-wrap</code>. This is by default set to <code>nowrap</code>, so we’ll have to change it to <code>wrap</code>.</p>
<p>The next thing we do it set the items’ <code>flex-basis</code> value to 50%. This tells Flexbox to make each item take up 50% of the available width, which results in two items per row, like this:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*Xr3MxBFPb2-GTX7cDuKbVQ.png" alt="1*Xr3MxBFPb2-GTX7cDuKbVQ.png"></div>
</div>
<p>Note: I’ve also centered the placeholder text in the search input field.</p>
<p>Now we have two different states. However, this layout still doesn’t work on very small screens, like mobile screens in portrait mode.</p>
<p>If we continue shrinking the screen, it’ll end up like the image below.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*k_HzX7UVF152TVc1sfbhKg.png" alt="1*k_HzX7UVF152TVc1sfbhKg.png"></div>
</div>
<p>What’s happened here is that the second row can’t fit two items anymore.</p>
<p>The logout and the search items are simply too wide, as you can’t shrink them down to below their minimum width, which is the width they need in order to fill the content inside of them.</p>
<p>The home and profile items are still able to appear on the same row though, so Flexbox will allow them to do so. This isn’t optimal, as we want all of our rows to behave in the same way.</p>
<h3>Responsiveness #3</h3>
<p>So as soon as <em>one</em> of the rows can’t fit two items in the width, we want <em>none</em> of the rows to have two items in the width. In other words, on very small screens we’ll actually make navbar vertical. We’ll stack the items on top of each other.</p>
<p>To achieve this we simply need to change our 50% width to 100%, so that each row only fits a single item. We’ll add this breakpoint at 400px.</p>
<pre>@media all and (max-width: 400px) {<br>  .container &gt; li {<br>    flex-basis: 100%;<br>  }<br>  .search {<br>    order: 1;<br>  }<br>}</pre>
<p>In addition to this, I’d like to place the search item at the bottom, which is why I’m also targeting the search and give it an <code>order</code> value of 1.</p>
<p>This results in the following:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*6Xgs5YcKu9Obq3dgk4qLZA.png" alt="1*6Xgs5YcKu9Obq3dgk4qLZA.png"></div>
</div>
<p>The reason <code>order: 1;</code> results in the search item being placed at the bottom is because flex items by default have a value of zero, and whatever item has a higher value than that will be placed after the others.</p>
<p>To see how it all plays out, here’s the gif from the top of the article:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*CZikqoB4iZIIrV_rAW_qdg.gif" alt="1*CZikqoB4iZIIrV_rAW_qdg.gif"></div>
</div>
<p>Congrats! You now know how to create a fully responsive navbar using Flexbox and media queries.</p>
<p>If you’re interested in learning more about Flexbox, I’d recommend you to check out <a href="https://scrimba.com/g/gflexbox">my free course at Scrimba.</a></p>
<div><a href="https://scrimba.com/g/gflexbox"></a></p>
<div><a href="https://scrimba.com/g/gflexbox"><img src="https://cdn-images-1.medium.com/max/1600/1*lTZoPTPzuKifD2wr3rUETw.png" alt="1*lTZoPTPzuKifD2wr3rUETw.png"></a></div>
<p><a href="https://scrimba.com/g/gflexbox"></a></div>
<p>Click the image to get to my free Flexbox course.</p>
<div><a href="https://medium.freecodecamp.org/how-to-create-a-fully-responsive-navbar-with-flexbox-a4435d175dd3">https://medium.freecodecamp.org/how-to-create-a-fully-responsive-navbar-with-flexbox-a4435d175dd3</a></div>


How to create a fully responsive navbar with Flexbox

How to create a fully responsive navbar with Flexbox

Top Stories