Code a Responsive Navbar with HTML and CSS Flexbox: Pt. 2
Tags: beginners, webdev, tutorial, css
Published: 2019-08-17 17:36:47

---
title: Code a Responsive Navbar with HTML and CSS Flexbox: Pt. 2
published: true
description: 
tags: beginner, webdev, tutorial, css
series: Code a Responsive Navbar with HTML and CSS Flexbox
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5imesc75221vgjapgffb.png
---

*This post was originally featured on [debugacademy.com](https://debugacademy.com/).*

Responsive design is a hot topic right now. It’s something we hear all the time whether it's on Twitter, in job postings, or in articles. But what exactly is responsive design? And why is it so important? I’ll be answering these questions in this post. We’ll also be using what we learn to build on the navigation bar that we created with the help of my last post. Make sure to check that out if you haven't already. 

##**Responsive Design: What and Why??** 
According to [Wikipedia](https://en.wikipedia.org/wiki/Responsive_web_design), responsive design is  “an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.“ Basically, responsive design is what web developers and designers implement to make their websites look good on all devices; tablets, cell phones, laptops, and desktop computers.  

Responsive design is more than just a buzz word. It’s actually very important. Since so many people primarily access the internet on their phones, it’s becoming even more relevant. As a web developer, it’s absolutely necessary that you know responsive design fundamentals and how to implement them in your code. So let’s start off by talking about breakpoints. 

##**Breakpoints**
What exactly are breakpoints? Well, they’re exactly what they sound like: the points in your design when elements of your website start to look broken. You can find them by changing the size of your screen and paying attention to areas of your design that begin to look distorted. The actual breakpoint is a value in pixels. You can determine these values by using developer tools in Chrome. There are also generic screen size values you can use if you don’t have the time or patience to figure out unique breakpoint values. Alternatively, you can just eyeball it. Each method has its advantages. You’ll probably end up using a combination of all three. Here’s a quick look at some of those generic screen sizes I mentioned earlier. 

![Screen size for phones, tablets, and computers](https://thepracticaldev.s3.amazonaws.com/i/2fqkuh04lpvttp4l6qob.png)
If you look at the [Code Pen](https://codepen.io/) below, you'll see a clear example of a breakpoint. 

{% codepen https://codepen.io/ceeoreo/pen/wVPbNV default-tab=css,result %}
As you can see, our title "Nav Bar Tutorial" is not on one line like we want it to be. Our design doesn't look clean and uniform anymore. We need to change that. I’ve already determined that our breakpoint is about 450px. But what do we actually do with this breakpoint? That’s where media queries come in.  

##**Media Queries**
The media query property is very useful. You’ll probably use it very often. In all honesty, I didn’t really begin to understand how media queries should be used until we discussed them in my [Debug Academy](https://debugacademy.com/) web development course. Media queries allow us to style certain properties or parts of our web page if certain conditions are met. They have many applications and you can learn more about them in this great article by Christopher Kade.
 {% link https://dev.to/christopherkade/deep-dive-into-media-queries-36pe %}

Today we will focus on using media queries with our breakpoint. The syntax is as follows. 

```css
@media (max-width: 450px) {

} 
```
We use the `@media` element to initiate our media query. We place our breakpoint within the parenthesis. You can see the `max-width` keyword as well. This singles out screen widths of 450px or less. If these conditions are met, the code that follows will be implemented. 

Typically, you will need more than one media query in your CSS. Because we are only working with a simple navigation bar, we only have one. If in the future you need to include several media queries, the process will be similar to what we’ve discussed so far. Now let's move on to the CSS we need to make our navbar responsive. 

##Step 1: `ul` CSS
{% codepen https://codepen.io/ceeoreo/pen/vYBGrMX default-tab=css,result %}
There are a few things we need to add to make our navbar responsive. Let’s first add the `flex-wrap` property. As the name indicates, this is a special Flexbox property. It allows the content within our flex container to wrap around to a new line if the container becomes too small to fit everything on one line. In this case, the `ul` is our flex container and each `li` is an item inside of it. That’s why we see one of our “Tab” elements moving onto a new line. 

We also need to add `justify-content`, which we previously defined in our CSS. This time, we are setting it equal to `center`. This will center navbar menu items. For some reason, our navbar items have some default padding. To remove this and ensure that all our items are centered, we can set the `padding` to 0. We also need to reset the `background-color` since our background color is confined to the 70px height we gave our `header` last time.


##Step 2: `#title` CSS 
{% codepen https://codepen.io/ceeoreo/pen/EqLOKV default-tab=css,result %}
Our navigation bar is technically responsive. It changes according to the size of our screen. But it doesn’t really look visually appealing. We only need a little more CSS to get it exactly the way we want. We’re going to specifically target the `#title` aka “Nav Bar Tutorial”. Because this is our title, we want it to stand out and be on one line by itself. The way we can do this is by using another Flexbox property called `flex-basis`. This property allows us to determine how much space we would like a child element or container item to take up within its container. We are going to set `flex-basis` to 100%. Now “Nav Bar Tutorial” will be by itself. 

We still want the `#title` to be centered like the rest of our menu items. We can simply define `text-align` as center. If you look closely, you will notice that “Nav Bar Tutorial” is still not exactly in the center of our header. This is because of the `margin-right: auto` we previously added to move our `#title` to the left. To offset this, we are going to add `margin-left: 0`. Now “Nav Bar Tutorial" is exactly centered just the way we want! 

___
##Conclusion
Congratulations!! You've finished your responsive navigation bar! These concepts are really important so don't just leave them here. Try creating a new webpage and make it completely responsive using the concepts you've learned so far. I'll be including a few additional resources to help you learn even more about Flexbox and responsive design.  
 
As always, please feel free to give me some constructive feedback. I am always looking to improve. If there are any topics you would like for me to cover, please let me know! Thank you so much for reading!

###Additional Resources
1. [Ladybug Podcast Flexbox Cheat Sheets](https://dev.to/ladybug/flexbox-cheat-sheets-5h55)
2. [Fall in Love With CSS With these 9 Cool Resources](https://dev.to/ceeoreo/fall-in-love-with-css-with-these-9-cool-resources-djh)
3. [Google Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
4. [The Most Popular Navigation Bars Created with Flexbox](https://medium.com/flexbox-and-grids/the-most-popular-navigation-bars-created-with-flexbox-6c0f59f55686)