This post was originally featured on 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, 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.
If you look at the Code Pen below, you'll see a clear example of a breakpoint.
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 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.
Today we will focus on using media queries with our breakpoint. The syntax is as follows.
@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
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
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!
Top comments (5)
It may be simpler to use justify-content: space-between on the nav itself and moving the page title outside of the list. it really cuts down on the amount of adjustments needed for your desired result. here's a fork I made as an example:
codepen.io/cosmicdivision/pen/PoYGpGB
what do you think of this approach?
Great article Ceora 😄thanks for mentioning my article
Of course! It’s really a great resource😊
Thank you so much...am almost emotional for undertanding how to build and responsive navbar..You made it easy and enjoyable..Thank you..
Awesome! Love you Work!
Thank you much..