Responsive Top Navigation Bar with mobile menu

Next Page >>
div class container

How to » Responsive Top Navigation Bar with mobile menu

Study in this chapter:
1. - How to make top navbar responsive
2. - Horizontal Responsive Top Navigation Bar with mobile menu
3. - Responsive top / horizontal navigation / nav bar HTML template, CSS code

1. The top navigation for your site is the horizontal bar that lists links to pages of your website. In many cases, the top navbar includes dropdown menus that display subpages when you click the link of sections as well.

We can add CSS style to Responsive Top Navigation Bar with mobile menu as:
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css

Example:

CSS code - Responsive Top Navigation Bar with mobile menu

responsive navigation mobile menu css

Example:

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

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
background-color: #353836;
color: white;
font-family: "Poppins", sans-serif;
}

header a {
text-decoration: none;
}

header {
padding: 0 20px;
background-color: #1d1f1d;
height: 50px;
display: flex;
justify-content: space-between;
}

#brand {
font-weight: bold;
font-size: 18px;
display: flex;
align-items: center;
}

#brand a {
color: #09c372;
}

ul {
list-style: none;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}

ul a {
color: white;
}

ul li {
padding: 5px;
margin-left: 10px;
}

ul li:hover {
transform: scale(1.1);
transition: 0.3s;
}

#login,
#signup {
border-radius: 5px;
padding: 5px 8px;
}

#login {
border: 1px solid #498afb;
}

#signup {
border: 1px solid #ff3860;
}

#signup a {
color: #ff3860;
}

#login a {
color: #498afb;
}

#hamburger-icon {
margin: auto 0;
display: none;
cursor: pointer;
}

#hamburger-icon div {
width: 35px;
height: 3px;
background-color: white;
margin: 6px 0;
transition: 0.4s;
}

.open .bar1 {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
opacity: 0;
}

.open .bar3 {
-webkit-transform: rotate(45deg) translate(-6px, -8px);
transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}

.mobile-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
height: calc(100vh - 50px);
width: 100%;
}

.mobile-menu li {
margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
header nav {
display: none;
}

#hamburger-icon {
display: block;
}
}

Horizontal responsive navigation bar - entire HTML code

horizontal responsive navigation bar - Entire HTML code. Example

<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 bar</title>

  <style>

  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  }
body {

  background-color: #353836;

  color: white;

  font-family: "Poppins", sans-serif;

  }
header a {

  text-decoration: none;

  }
header {

  padding: 0 20px;

  background-color: #1d1f1d;

  height: 50px;

  display: flex;

  justify-content: space-between;

  }
#brand {

  font-weight: bold;

  font-size: 18px;

  display: flex;

  align-items: center;

  }
#brand a {

  color: #09c372;

  }
ul {

  list-style: none;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-around;

  }
ul a {

  color: white;

  }
ul li {

  padding: 5px;

  margin-left: 10px;

  }
ul li:hover {

  transform: scale(1.1);

  transition: 0.3s;

  }
#login,

  #signup {

  border-radius: 5px;

  padding: 5px 8px;

  }
#login {

  border: 1px solid #498afb;

  }
#signup {

  border: 1px solid #ff3860;

  }
#signup a {

  color: #ff3860;

  }
#login a {

  color: #498afb;

  }
#hamburger-icon {

  margin: auto 0;

  display: none;

  cursor: pointer;

  }
#hamburger-icon div {

  width: 35px;

  height: 3px;

  background-color: white;

  margin: 6px 0;

  transition: 0.4s;

  }
.open .bar1 {

  -webkit-transform: rotate(-45deg) translate(-6px, 6px);

  transform: rotate(-45deg) translate(-6px, 6px);

  }
.open .bar2 {

  opacity: 0;

  }
.open .bar3 {

  -webkit-transform: rotate(45deg) translate(-6px, -8px);

  transform: rotate(45deg) translate(-6px, -8px);

  }
.open .mobile-menu {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  }
.mobile-menu {

  display: none;

  position: absolute;

  top: 50px;

  left: 0;

  height: calc(100vh - 50px);

  width: 100%;

  }
.mobile-menu li {

  margin-bottom: 10px;

  }
@media only screen and (max-width: 600px) {

  header nav {

  display: none;

  }
 #hamburger-icon {

  display: block;

  }

  }

  </style>

  </head>

  <body>

  <header>

  <div id="brand"><a href="/">MyCompany_Name</a></div>

  <nav>

  <ul>

  <li><a href="/home">Home</a></li>

  <li><a href="/products">Products</a></li>

  <li><a href="/services">Services</a></li>

  <li><a href="/about">About</a></li>

  <li id="login"><a href="/login" >Login</a></li>

  <li id="signup"><a href="/signup">Signup</a></li>

  </ul>

  </nav>

  <div id="hamburger-icon" onClick="toggleMobileMenu(this)">

  <div class="bar1"></div>

  <div class="bar2"></div>

  <div class="bar3"></div>

  <ul class="mobile-menu">

  <li><a href="/home">Home</a></li>

  <li><a href="/products">Products</a></li>

  <li><a href="/services">Services</a></li>

  <li><a href="/about">About</a></li>

  <li id="login"><a href="/login" >Login</a></li>

  <li id="signup"><a href="/signup">Signup</a></li>

  </ul>

  </div>

  </header>

  <script>function toggleMobileMenu(menu) {

  menu.classList.toggle('open');

  }</script>

  </body>

  </html>

Tags: Responsive Top Navigation Bar with mobile menu with logo, dropdown, bootstrap, best responsive, navigation bar templates

navbar responsive without javascript with mobile menu

How to make navbar responsive without javascript with mobile menu - code example

<html lang="en">

  <head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <title>Responsive Nav</title>
 <style>
html, body {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  }

  a {

  text-decoration: none;

  }

  li {

  list-style: none;

  }
header {

  width: 100%;

  height: 50px;

  line-height: 50px;

  text-align: center;

  font-family: sans-serif;

  background-color: #f1c40f;

  }

  .brand {

  width: auto;

  height: 100%;

  float: left;

  margin: 0 0 0 5%;

  }
.menu {

  width: 60%;

  height: 100%;

  float: right;

  }

  .menu ul {

  width: 100%;

  height: inherit;

  margin: 0;

  padding: 0;

  display: -webkit-box; 

  display: -moz-box; 

  display: -ms-flexbox; 

  display: -webkit-flex; 

  display: flex; 

  }

  .menu ul a {

  width: 20%;

  height: inherit;

  color: #222;

  display: inline-block;

  }

  .menu ul a:hover {

  background-color: #222;

  color: #fff;

  }

  #menuToggle {

  display: none;

  }

  .menu-icon {

  display: none;

  }

  @media screen and (max-width: 768px) {

  .menu {

  width: 100%;

  height: auto;

  }

  .menu ul {

  display: block;

  max-height: 0;

  overflow: hidden;

  -webkit-transition: max-height 0.3s;

  -moz-transition: max-height 0.3s;

  -ms-transition: max-height 0.3s;

  -o-transition: max-height 0.3s;

  transition: max-height 0.3s;
 }

  .menu ul a {

  text-align: left;

  width: 100%;

  height: 50px;

  background-color: #f1c40f;

  padding: 10px 0px 10px 5%;

  }

  .menu-icon {

  width: 100px;

  height: inherit;

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  line-height: 60px;

  }

  #menuToggle:checked ~ ul {

  max-height: 350px;

  

  }

  .menu-icon i {

  font-size: 1.7em;

  }

  }
 </style>

  </head>

  <body>

  <header>

  <figure class="brand">Responsive topmenu</figure>

  <nav class="menu">

  <input type="checkbox" id="menuToggle">

  <label for="menuToggle" class="menu-icon"><i class="fa fa-bars"></i></label>

  <ul>

  <a href="https://www.agernic.com"><li>Home</li></a>

  <a href="#"><li>Products</li></a>

  <a href="#"><li>Services</li></a>

  <a href="#"><li>About</li></a>

  <a href="#"><li>Contact</li></a>

  </ul>

  </nav>

  </header>

  </body>

  </html>

Summary of description

<< Previous Page
HTML Button Style

Next Page >>
HTML Button Action

Responsive Top Navigation Bar with mobile menu with logo, dropdown, bootstrap, best responsive, navigation bar templates
Responsive Top Navigation Bar with mobile menu - how to

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.