How to build a responsive navigation bar (Flexbox vs CSS Grid)

In today’s tutorial, we’re going to build a top navigation bar with HTML and CSS. We will look at two different ways of building this navbar, one way with flexbox, and the other with CSS grid.

It’ll be a good way to compare the differences between the two approaches. And you can see which method that you like better.

Here’s what the finished navigation will look like:

On desktop, all the links will be on the same row, with Home on the left, and the other links on the right.

Then on mobile, we will have Home on the top row and the other links on the bottom row. And the links will be centered on the page.

Let’s get started by setting up our files.

Set up files

To create our navigation we’re going to create an index.html file and a style.scss file, which we will compile to style.css using the VS Code Live Sass extension.

Now let’s get started building that navigation bar!

Create HTML markup

In our index.html file, let's first create the HTML markup for the navigation. I try to use semantic HTML tags as much as possible, to avoid using just divs for everything.