MultiWEBPress
Wordpress & Shopify Experts

MultiWEBPress
Wordpress & Shopify Experts

Simple navigation bar in html and css | Responsive Navigation Menu CSS

Hello readers, today during this blog you’ll learn how to create a Navigation bar using pure HTML, CSS & Javascript. this is often for beginners who want to learn new stuff using HTML & CSS. Recently, i’ve got shared a How to create responsive image gallery using html and css?. Now it’s time to make a Responsive Navigation Sliding menu using Hypertext Preprocessor Language (HTML).

Header in websites is usually used at the beginning of a page for an introduction. you’ve got seen Menu Bar or Navigation bar on many websites. With Navigation Bar, a user can easily work out how to find your blogs, pages, contact details, and far more information.

The navigation menu allows someone to land on any pages on your site and find what they have within few clicks.

Responsive design is actually design to put the design together with a website so that it automatically scales its content and elements to match the screen size on which it is viewed.

As you’ll see in the preview images, there’s a Navigation menu with a logo and LOGIN BUTTON. you’ll also be able to see a sliding navigation bar for the mobile version. The responsive navigation bar is straightforward to navigate to any page very easily. Navbar is extremely important for any website. There are numerous ways to make a header, one among which is the way we have designed it.

If you’re having difficulty understanding what’s written in this blog. you’ll also watch the full video.

Video tutorial of Responsive Navigation bar.

You may also like:

I believe you like this Navigation Menu bar (Navbar). If you like this navbar and want to use it in your project you can freely copy the code and use it.

I want you to take this Navigation Navbar to next level with your creativity. Also, I want you all to comment below if you have any questions in your mind.

Responsive Navigation bar [Source Codes]

To create this header (Responsive Navigation bar). You need to create three files. The two files are index.html,  style.css, and the script.js  file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file, .css extension to your style file and .js extension to your Javascript file.  

Let’s create a Hypertext Markup Language(HTML) file with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension.

HTML CODE

				
					<!DOCTYPE html>
<!-- Coding by MultiWebPress /////// https://multiwebpress.com/ -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Navigation Bar | MultiWebPress</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>
    <header>
      <div class="inner-width">
        <h1 class="logo">Multi<span style="color:#273b91;">WEB</span>Press</h1>
        <i class="menu-toggle-btn fas fa-bars"></i>
        <nav class="navigation-menu">
          <a href="#"><i class="fas fa-home home"></i> Home</a>
          <a href="#"></i> About</a>
          <a href="#"></i> Services</a>
          <a href="#"></i> Skills</a>
          <a href="#"></i> Contact</a>
          <a href="#" class="aj_btn"> <i class="fas fa-lock" aria-hidden="true"></i>
            LOGIN</a>
        </nav>
      </div>
    </header>
    <script src="script.js"></script>
  </body>
</html>

CSS CODE

Create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500&display=swap');

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
}

header{
  height: 90px;
  background: #546FE7;
}

.inner-width{
  max-width: 1000px;
  padding: 0 10px;
  margin: auto;
}

.logo{
  float: left;
  padding: 27px 0;
  color: #fff;
}

.logo img{
  height: 50px;
}

.navigation-menu{
  float: right;
  display: flex;
  align-items: center;
  min-height: 90px;
}

.navigation-menu a{
  margin-left: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: .3s linear;
}

.navigation-menu a:hover{
  background: #273b91;
  color: #fff;
  transform: scale(1.1);
}

.navigation-menu i{
  margin-right: 8px;
  font-size: 16px;
}

.home{
  color: #fff;
}

a.aj_btn {
  background: #273b91;
  color: #fff;
  font-weight: 500;
  letter-spacing: 2px;
}

a.aj_btn:hover{
  background: #fff;
  color: #273b91;
  font-weight: 500;
  letter-spacing: 2px;
}

.menu-toggle-btn{
  float: right;
  height: 90px;
  line-height: 90px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}


@media screen and (max-width:900px) {
  .menu-toggle-btn{
    display: block !important;
  }

  .navigation-menu{
    position: fixed;
    width: 100%;
    max-width: 400px;
    background: #172b4d;
    top: 90px;
    right: 0;
    display: none;
    padding: 20px 40px;
    box-sizing: border-box;
  }

  .navigation-menu::before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #172b4d;
    position: absolute;
    top: -10px;
    right: 10px;
  }

  .navigation-menu a{
    display: block;
    margin: 10px 0;
  }

  .navigation-menu.active{
    display: block;
  }
}

Javascript Code

Next, create a Javascript(JS) file with the name of script.js and paste the below codes into your JS file. Remember you’ve to create a file with a .js extension

				
					$(".menu-toggle-btn").click(function(){
  $(this).toggleClass("fa-times");
  $(".navigation-menu").toggleClass("active");
});

Output:

After creating these files & pasting codes, now run the files in your browser. You can run to any browser you have.

 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

That’s all, now you’ve successfully created a Responsive Navigation bar using HTML, CSS & Javascript.

If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.

Thanks in Advance!

Download Code Files

SHARE

WhatsApp
Facebook
Twitter
LinkedIn
Telegram

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*

MOST POPULAR
SHARE
CATEGORY
Categories

ABOUT US

MultiWebPress is a full-service web development agency that creates custom websites and online stores using WordPress and Shopify. Our team of skilled developers and digital strategists offer personalized solutions, including ongoing maintenance and support, to help businesses succeed online.

QUICK LINK

FOLLOW US

Facebook-f Youtube Instagram Twitter

Copyright © 2023 MultiWebPress | All Rights Reserved