hmablogs logo
  • Home
  • About
  • WebDesign
    • HTML
    • CSS
    • JavaScript
    • PHP
    • VSCODE
  • Tech Skills
  • Videos
Menu
  • Home
  • About
  • WebDesign
    • HTML
    • CSS
    • JavaScript
    • PHP
    • VSCODE
  • Tech Skills
  • Videos

How to Create Responsive Menu Bar Using HTML And CSS Only

  • HMA WebDesign
  • CSS, HTML, Web Design
How to create responsive navigation bar for mobile
How to create responsive navigation bar for mobile
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

Responsive navigation menu bar using HTML and CSS?

How do I create a responsive navigation menu bar using HTML and CSS only? It’s actually quite easy, but there are some things to consider. This blog post will cover the following points:

  • What is a responsive navigation menu bar?
  • How can I create one with HTML and CSS only?
  • Can I have both an HTML/CSS navbar AND a WordPress navbar on my website at the same time?

What is the navigation menu bar?

The navigation menu bar is one of the most important parts of any website. It’s not only used for navigating between pages, but it also provides an inviting and easy-to-use interface for your users.

There are many different ways you can create a navigation menu bar in HTML and CSS, so we’ll go over the easy and simple methods to help get you started with designing your next website with a beautiful mobile responsive navbar!

Steps to create a responsive navigation bar with HTML and CSS

Now, let’s briefly describe the points to creating a mobile responsive header menu bar in HTML and CSS. These are the topics we are going to discuss in this blog post.

  1. What is a responsive navigation menu bar?
  2. Write the HTML and CSS code for the responsive navbar
  3. Designing the website’s header section
  4. Adding the navigation menu to our website’s header section
  5. Testing the responsiveness of your newly created responsive navigation menu bar
  6. Making changes in CSS for mobile devices

Moreover, you can also watch the complete video tutorial to make a beautiful mobile responsive navigation menu bar with a logo.

Create Responsive Navigation Menu Bar Using HTML CSS

Recommended for You!

  • 10 Easy HTML CSS Projects for Beginners with Source Codes
  • How to Run PHP Code in VSCode Terminal Console
  • How to Receive Email from HTML Form using PHP

What is a responsive navigation menu bar?

The responsive navigation menu bar is an easy way to keep your customers on the page. A scrollable, vertical menu that adapts and scales based off of device size makes it more accessible than traditional horizontal bars as well!

Mobile responsive right menu navbar
Mobile responsive right menu navbar

The code for the navigation menu bar (Source Codes)

To create a mobile responsive navigation menu bar, you need to create an HTML file and CSS file in your code editor. Now, I will provide you the source code of the HTML and CSS files for the menu bar.

HTML Code – HTML responsive menu bar code

The HTML code contains a logo on the left-hand side, a list of navbar bar menu items with anchor tags, and a login button on the right side in the top bar. The code also includes a checkbox input element with a label tag to create a toggle button for mobile. Copy the following code and paste it inside the HTML 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="style2.css">
  <title>Document</title>
</head>
<body>
<div class="navbar">

  <!-- Navbar logo -->
  <div class="nav-header">
    <div class="nav-logo">
      <a href="#">
        <img src="logo.png" width="100px" alt="logo">
      </a>
    </div>
  </div>
  
  <!-- responsive navbar toggle button -->
  <input type="checkbox" id="nav-check">
  <div class="nav-btn">
    <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>

  <!-- Navbar items -->
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Project</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
    <button class="loginBtn">Login</button>
  </div>

</div>
</body>
</html>

CSS Code – Make a responsive navigation bar for mobile

Create a CSS file and paste the following code into the file in your code editor. To make the navigation bar mobile responsive, use CSS media queries. If a user decreases the screen size of the browser then the horizontal menu bat will convert to a vertical side bar at the right of the screen.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-image: url(background-img.jpg);
  background-size: cover;
  background-attachment: fixed;
}
.navbar{
  height: 70px;
  width: 100%;
  padding: 14px 30px;
  background-color: #1b4cd3;
  position: relative;
}
.navbar .nav-header{
  display: inline;
}
.navbar .nav-header .nav-logo{
  display: inline-block;
  margin-top: -7px;
}
.navbar .nav-links{
  display: inline;
  float: right;
  font-size: 18px;
}

.navbar .nav-links .loginBtn{
  display: inline-block;
  padding: 5px 15px;
  margin-left: 20px;
  font-size: 17px;
  color: rgb(9, 14, 90);
}
.navbar .nav-links a{
  padding: 10px 12px;
  text-decoration: none;
  font-weight: 550;
  color: white;
}
/* Hover effects */
.navbar .nav-links a:hover{
  background-color: rgba(0, 0, 0, 0.3);
}

/* responsive navbar toggle button */
.navbar #nav-check, .navbar .nav-btn{
  display: none;
}

@media (max-width:700px) {
  .navbar .nav-btn{
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
  }
  .navbar .nav-btn label {
    display: inline-block;
    width: 80px;
    height: 70px;
    padding: 25px;
  }
  .navbar .nav-btn label span {
    display: block;
    height: 10px;
    width: 25px;
    border-top: 3px solid #eee;
  }
  .navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {
    background-color: rgb(9, 14, 90);
  }
  .navbar .nav-links{
    position: absolute;
    display: block;
    text-align: center;
    width: 50%;
    background-color: rgb(9, 14, 90);
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 70px;
    right: 0px;
  }
  .navbar .nav-links a {
    display: block;
  }

  /* when nav toggle button not checked */
  .navbar #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }

  /* when nav toggle button is checked */
  .navbar #nav-check:checked ~ .nav-links {
    height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .navbar .nav-links .loginBtn {
    padding: 10px 40px ;
    margin: 20px;
    font-size:  18px;
    font-weight: bold;
    color: rgb(9, 14, 90);
  }
  

}

Final Words

Conclusion paragraph: If you want to learn how to create a responsive navbar, please SUBSCRIBE to my YouTube channel. I’ll be teaching all about the HTML and CSS for this design element in future videos. Please let me know any questions or comments that you have!

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

  • Design/Dev
  • CSS
  • JavaScript
  • PHP
  • VS Code
  • Learn more

Recommended For You!

how to customize bracket colors in VSCODE

How to Customize Bracket Colors in VSCODE | Bracket Pair Colorizer

Simple HTML Practice Projects for Beginners

10 Simple HTML Practice Projects for Beginners in 2023

Best Websites for Web Developers in 2023

25 Best Websites to Stay Up-To-Date for Web Developers in 2023

PHP, HTML, CSS, JavaScriptTypeScript editor - CodeLobster IDE

CodeLobster IDE – Free PHP, HTML, CSS, JavaScript/TypeScript editor

Page1 Page2 Page3

Leave a Reply Cancel reply

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

Subscribe Channel Now!

Guest post and link promotions
Follow Us on Social Media!
Instagram Facebook Linkedin Twitter
Free Best selling wordpress themes 2023
Traffic monetization best site 2023
Earn $1000 per Month | Best AdSense Alternative Site

Most Popular Articles

how to customize bracket colors in VSCODE

How to Customize Bracket Colors in VSCODE | Bracket Pair Colorizer

Simple HTML Practice Projects for Beginners

10 Simple HTML Practice Projects for Beginners in 2023

Best Websites for Web Developers in 2023

25 Best Websites to Stay Up-To-Date for Web Developers in 2023

PHP, HTML, CSS, JavaScriptTypeScript editor - CodeLobster IDE

CodeLobster IDE – Free PHP, HTML, CSS, JavaScript/TypeScript editor

10 Easy HTML CSS Projects for Beginners with Source Code in 2023

How to Keep Good Mental Health as a Web Designer

How to Keep Good Mental Health as a Web Designer 2023

« Previous Page1 Page2 Page3 Page4 Next »

services

  • Web Dev
  • WordPress
  • PSD to HTML
  • Front-end Design

features

  • Shop Now
  • Internet
  • Templates
  • Tutorials

Site links

  • Privacy Policy
  • Terms & Conditions
  • Disclaimer
  • Contact

Weekly Newsletter

Get in touch with us for latest articles. No spam, only one newsletter per week.

hmablogs logo
Youtube Facebook-f Twitter Linkedin Instagram
© 2020-2022 HMA. WebDesign All Rights Reserved.
Scroll Up