Create a Responsive Navbar/Header with Pure CSS

By Faraz - July 23, 2022

Learn how to create a responsive navbar/header with pure CSS without using any JavaScript. Follow our easy step-by-step tutorial today.

Join us on Telegram

how to create pure css responsive navbar.png

Read Also creating a maintenance page that delights users a guide to using html and css.jpg

Creating a Maintenance Page that Delights Users: A Guide to Using HTML and CSS

A responsive navbar is an essential component of any website design. It enables users to easily navigate your website, whether they are browsing on a desktop or mobile device. Pure CSS is a great way to design a responsive navbar without using any JavaScript. It's lightweight, fast-loading, and easy to customize.

Responsive Navbar design makes any website attractive. The Navbar section plays an important role in user satisfaction and site structure. In this tutorial, we'll show you how to create a responsive navbar with pure CSS in easy steps. We'll guide you through the HTML markup and styling for both desktop and mobile devices.

So, Let's start making these amazing responsive navbar using HTML and Pure CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our navbar.

The navigation bar consists of four links: Home, About, Projects, and Contact us.

Here's what the code does:

The <body> tag indicates the beginning of the HTML document's body section.

The <div> tag with the class nav is used to define the navigation bar container.

The <input> tag with the type checkbox and the id nav-check is used to create a hidden checkbox that is used as a trigger for the navigation menu.

The <div> tag with the class nav-header defines the header section of the navigation bar.

The <div> tag with the class nav-title contains the name of the website, in this case "codewithFaraz".

The <div> tag with the class nav-btn is used to create the hamburger menu icon. It contains a <label> tag with a for attribute set to the nav-check id, which means that clicking the label will toggle the hidden checkbox.

The <span> tags within the <label> tag are used to create the three horizontal lines of the hamburger menu icon.

The <div> tag with the class nav-links contains the navigation links. The href attribute is set to "#" and target is set to "_blank", which means that clicking on the links will not lead to another page, but instead will open a new tab with a blank page.

Overall, this code creates a responsive navigation bar with a hamburger menu icon that can be used to toggle the visibility of the navigation links.

After creating the files just paste the below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our responsive navbar using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Responsive Navbar</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
  <div class="nav">
  <input type="checkbox" id="nav-check">
  <div class="nav-header">
    <div class="nav-title">
      codewithFaraz
    </div>
  </div>
  <div class="nav-btn">
    <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
  
  <div class="nav-links">
    <a href="#" target="_blank">Home</a>
    <a href="#" target="_blank">About</a>
    <a href="#" target="_blank">Projects</a>
    <a href="#" target="_blank">Contact us</a>
  </div>
</div>
  </body>
</html>

Read Also building a student database management system using html, css, and javascript.jpg

Building a Student Database Management System Using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the navbar is in place, the next step is to add styling to the navbar using CSS. CSS allows us to control the visual appearance of the navbar, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our navbar.

Below block of CSS code defines the styling and layout for a navigation bar with a hamburger menu icon (three horizontal lines) on the left side. The navigation bar is designed to be responsive and will adapt to different screen sizes using a media query.

Here's what the code does:

The * selector with the box-sizing property set to border-box applies the border-box box-sizing model to all elements on the page, which means that the width and height of an element includes any padding and borders it has.
The body selector sets the margin to 0 pixels, sets the font family to 'segoe ui', and sets the background color to #D5CDCC.
The .nav selector sets the height to 50 pixels, the width to 100%, the background color to #3482B5, and sets the position to relative.
The .nav > .nav-header selector sets the display to inline.
The .nav > .nav-header > .nav-title selector sets the display to inline-block, the font size to 22 pixels, the color to #fff, and sets the padding to 10 pixels on all sides.
The .nav > .nav-btn selector sets the display to none.
The .nav > .nav-links selector sets the display to inline, the float to right, and the font size to 18 pixels.
The .nav > .nav-links > a selector sets the display to inline-block, sets the padding to 13 pixels on all sides, sets the text decoration to none, and sets the color to #efefef.
The .nav > .nav-links > a:hover selector sets the background color to rgba(0, 0, 0, 0.3) when the mouse hovers over a link.
The .nav > #nav-check selector sets the display to none for the hidden checkbox used to toggle the navigation menu.
The @media (max-width:800px) rule is a media query that applies styles to the navigation bar when the screen width is less than or equal to 800 pixels.
The .nav > .nav-btn selector sets the display to inline-block, sets the position to absolute, and positions the icon at the top right corner of the navigation bar.
The .nav > .nav-btn > label selector sets the display to inline-block, sets the width and height to 50 pixels, and sets the padding to 13 pixels on all sides for the hamburger menu icon.
The .nav > .nav-btn > label:hover, .nav #nav-check:checked ~ .nav-btn > label selector sets the background color to rgba(0, 0, 0, 0.3) when the mouse hovers over the icon or the hidden checkbox is checked.
The .nav > .nav-btn > label > span selector sets the display to block, sets the width to 25 pixels, sets the height to 10 pixels, and sets the top border to 2 pixels solid #eee for each of the three horizontal lines of the hamburger menu icon.
The .nav > .nav-links selector sets the position to absolute, sets the display to block, sets the width to 100%, sets the background color to #333, sets the height to 0 pixels, sets the transition to all 0.3s ease-in, sets the overflow-y to hidden, sets the top to 50 pixels, and sets the left to 0 pixels for the navigation links.
The .nav > .nav-links > a selector sets the display to block and sets the width to 100% for the navigation.

This will give our navbar an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui';
  background-color: #D5CDCC;
}

.nav {
  height: 50px;
  width: 100%;
  background-color: #3482B5;
  position: relative;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav > .nav-btn {
  display: none;
}

.nav > .nav-links {
  display: inline;
  float: right;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav > .nav-links > a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav > #nav-check {
  display: none;
}

@media (max-width:800px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

Final Output:

how to create pure css responsive navbar.gif

Read Also

Step-by-Step Tutorial for Building a Web-based Digital Clock

Conclusion:

In conclusion, creating a responsive navbar or header with pure CSS is a great way to improve the user experience on your website. By following the steps outlined in this tutorial, you can create a functional and stylish navbar that works on both mobile and desktop devices. Remember to customize the HTML markup and CSS styles to suit your website's needs, and don't forget to test your navbar on different devices to ensure it works as intended. Good luck!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: responsive navbar, pure css, header design, web development, front-end, how to create a responsive navbar with pure css, responsive header design tutorial, pure css header without javascript, easy ways to create a responsive navbar, step-by-step guide to create a header with pure css

End of the article