How to Make Navigation Bar in HTML and CSS

0

In this article, we will learn how to make navigation bar in HTML and CSS. We will also go over some of the steps required to do so.

In this tutorial, we will create a navigation bar for a website without using any images. This is possible because HTML and CSS are powerful enough to display a menu without the need for any graphical elements.

There are many users facing problems to create a menu using HTML and CSS3. in this tutorial, I’m going to share with you how to use HTML and CSS3 to design menus.

recently, I’ve made a tutorial on how to make a navigation Bar in HTML and CSS3. So, I’m going to share with you How you can use HTML and CSS3 to design the menus.

Also, you will learn How to make vertical menus using HTML and CSS3. The menus are important in a website to navigate the users, without navigation your users can’t find posts/pages, etc.

What is a Navigation Bar?

A navigation bar is a set of links that helps visitors navigate your website. It typically appears as a horizontal list of links at the top of each page. The links can point to different pages within your site or to external websites.

Creating a navigation bar is a fairly simple process that only requires basic HTML and CSS knowledge. In this article, we’ll walk you through the steps to create a navigation bar for your website.

How to Make Navigation Bar in HTML and CSS

Assuming you know the basics of HTML and CSS, let’s move on to creating a navigation bar. A navigation bar is essentially a menu, that gives users links to various pages on your website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Navigation Menu</title>
</head>
<body>

    <ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>  
  
</body>
</html>

Then the next thing you need to style using CSS3, I’ve mentioned the codes below, you can check it now.

body
{
    font-family: Arial, Helvetica, sans-serif;
}

.navigation
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    background: #4c6ca0;
    border-radius: 05px;
    overflow: auto;
}

.navigation li
{
    float: left;
}

.navigation li a
{
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 15px 20px;
}

.navigation li a:hover
{
    background-color: #446190;
    color: #f4f4f4;
}

Once you add the styles to your style sheet, then you will be able to see the navigation menus. Also, I’ve made vertical navigation menus. You can learn it using HTML and CSS3.

Vertical Navigation Menu in HTML and CSS

When you will understand the usage of HTML and CSS to design the menus, then you will be able to create a vertical navigation menu using HTML and CSS3.

So, Let’s see the usage of HTML and CSS3 to design the vertical menus code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Navigation Menu</title>
</head>
<body>

   <ul class="side-menus">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  
</body>
</html>

Once you use above mentioned code, then you need to add style to it. Let’s see the CSS properties that are used to design the vertical menu.

body
{
    font-family: Arial, Helvetica, sans-serif;
}


.side-menus
{
    list-style: none;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 300px;
    padding: 20px;
}

.side-menus li
{
    font-size: 18px;
    line-height: 2.4em;
    border-bottom: dotted 1px #ddd;
}

.side-menus li:last-child
{
    border: none;
}

.side-menus li a
{
    text-decoration: none;
    color: #333;
}

.side-menus li a:hover
{
    color: coral;
}

Create a Responsive Navbar With Flexbox

How to Make Navigation Bar in HTML and CSS

recently, I’ve made a tutorial on How to make a navbar in HTML and CSS I already made a tutorial on that, but this time I’ve used flexbox to manage the content.

So, I’m going to share with you the complete source code of the project, and also you can watch the tutorial, which helps you to learn step-by-step usage of HTML and CSS3.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Nabar in HTML and CSS3</title>
  </head>
  <body>
    <header id="header">
      <nav class="navbar">
        <div class="container">
          <h1 class="logo">OnlineITtuts</h1>
          <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>
  </body>
</html>

Once you did that, then the next thing you need to add style to it. So, I’m going to share with you the CSS code, you just need to copy the code and paste it into your code editor.

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "roboto", sans-serif;
}

.container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

#header {
  background: url("/img.jpg") no-repeat center center/cover;
  height: 100vh;
}

.logo {
  font-size: 2rem;
  color: #f1c40f;
  font-weight: 800;
}

.navbar {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 1rem;
}

.navbar ul {
  display: flex;
  align-items: center;
  list-style: none;
}

.navbar ul li a {
  color: #fff;
  padding: 1rem;
  text-decoration: none;
  border-radius: 05px;
  transition: all;
}

.navbar ul li a:hover,
.navbar ul li a.active {
  background: #f1c40f;
  border-radius: 02px;
  transition: 0.5s;
}

That’s it for the tutorial, If you face any problem inside the code, you can watch the complete tutorial on this topic.

How to Make a Responsive Navbar in HTML CSS and JavaScript

How to Make a Responsive Navbar in HTML CSS and JavaScript, First of All, you need to make simple menus using HTML, and CSS, then you need to use a little bit of JavaScript to display and hide the menus.

So, Let’s get started to understand How you can create it. First of All, you need to make an index.html file inside the file you need to enter the HTML structure and also you need to add the external CSS and also the js file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Responsive Nevigation Menus in HTML CSS and JavaScript</title>
  </head>
  <body>
    <header>
      <a href="#" class="logo">OnlineITtuts</a>
      <nav class="navbar">
        <div class="btn">
          <i class="fas fa-times close-btn"></i>
        </div>
        <a href="#" class="active">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Course</a>
        <a href="#">Contact</a>
      </nav>
      <div class="btn">
        <i class="fas fa-bars menu-btn"></i>
      </div>
    </header>
    <section>
      <h2>Responsive Navbar</h2>
    </section>

    <script src="script.js"></script>
  </body>
</html>

Once you have done that, then you need to add style to design the navigation menus. So, I’m going to share with you the CSS code below you need to check it now.

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  background: url("img.jpg") no-repeat center center/cover;
  height: 100vh;
  overflow: hidden;
}

header {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 50px;
  background: #21293a;
  color: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

header .logo {
  font-size: 30px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 2px;
  color: #fff;
}

header .navbar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .navbar a {
  font-size: 1.7rem;
  font-weight: 500;
  text-decoration: none;
  margin: 0 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 05px;
  color: #fff;
  letter-spacing: 1px;
}

header .navbar a:hover,
.active {
  background: #2c3e50;
  transition: 0.6s;
}

header .btn {
  font-size: 25px;
  cursor: pointer;
  display: none;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

section h2 {
  color: #fff;
  font-size: 10rem;
  letter-spacing: 0.9rem;
  text-align: center;
}

It’s not responsive menus, but it’s menus you can use above mentioned codes to display the menus. Once you’ve done that, then you need to use a media query to make it responsive.


@media (max-width: 991px) {
  html {
    font-size: 55%;
  }
  header {
    padding: 1rem 2rem;
  }
}

@media (max-width: 768px) {
  header .btn {
    display: block;
  }

  header .navbar {
    position: fixed;
    flex-direction: column;
    min-width: 300px;
    height: 100vh;
    background: #2c3e50;
    top: 0;
    right: -100%;
    transition: all 0.9s;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 10rem;
  }

  header .navbar.active2 {
    right: 0;
    transition: 0.9s;
  }

  header .navbar .close-btn {
    position: absolute;
    top: 0;
    left: 0;
    margin: 25px;
  }

  header .navbar a {
    display: block;
    font-size: 1.9rem;
    margin: 15px;
    padding: 0.5rem 15px;
  }

  header .navbar a:hover {
    background: #21293a;
    color: #fff;
  }

  header .logo {
    font-size: 25px;
    font-weight: 500;
  }

  section h2 {
    color: #fff;
    font-size: 5rem;
    padding: 2rem;
    letter-spacing: 0.9rem;
    text-align: center;
  }
}

That’s for responsive menus, but you need to use JavaScript to display the hide menus. So, you need to use the below-mentioned codes.

let menus = document.querySelector(".navbar");
let menus_btn = document.querySelector(".menu-btn");
let close_btn = document.querySelector(".close-btn");

menus_btn.addEventListener("click", function () {
  menus.classList.add("active2");
});

close_btn.addEventListener("click", function () {
  menus.classList.remove("active2");
});

Hope you’ve got ideas on it, If you face any problems with my codes. So, I’ve made the tutorial on it, you can watch the tutorial. In this tutorial, you will learn step-by-step usage of HTML, CSS, and JavaScript to create How to Make a Responsive Navbar in HTML CSS and JavaScript.

Conclusion

Creating a navigation bar in HTML and CSS is relatively simple and can add a lot of value to your website. By following the steps outlined in this article, you can create a navigation bar that looks great and functions well.

You May Also Like:

With just a little bit of effort, you can have a professional-looking navigation bar that will help your website stand out from the crowd.

If you have a question/suggestion feel free to ask me, I will be happy to give you a response as soon as possible. Please share the content on social sharing websites.

Previous articleTop 10+ Best Themes For VS Code
Next articleTop 20 Free HTML CSS Form Templates Resources in 2022
I'm Programmer, Digital Marketer, and Blogger, I have been working on the web for 04 years. Basically, I have been sharing personal expertise on my website.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.