CSS Navigation Bar Design and Properties

Navigation Bar Basically Created with the Help of CSS, the created navigation bar can be design two Types:
1. Vertical Navigation Bar
2. Horizontal Navigation Bar
Navigation Bar is most important, for every website, and having easy to use navigation Bar in the website, CSS plays an important role because with CSS we can transform HTML menus into an attractive and good-looking navigation bars.
A Navigation bar is basically a list of link, (Navigation Bar= list of Links)

Vertical Navigation Bar Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 400px;
  background-color: #f1f1f1;
}
li a {
  display: block;
  color: #000;
  padding: 7px 14px;
  text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
  background-color: #FF6347;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#About">About</a></li>
  <li><a href="#Gallary">Gallary</a></li>
  <li><a href="#News">News</a></li>
  <li><a href="#Contact">Contact</a></li>
</ul>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 400px;

background-color: #f1f1f1;

}

li a {

display: block;

color: #000;

padding: 7px 14px;

text-decoration: none;

}

/* Change the link color on hover */

li a:hover {

background-color: #FF6347;

color: white;

}

</style>

</head>

<body>

<ul>

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

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

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

</ul>

</body>

</html>

Home
About
Gallary
News
Contact

Explanation:

list-style-type: none; used to remove the bullets, because a navigation bar never need list markers.
always you can Set the margin: 0; and padding: 0; to remove browser default settings
when you build a vertical bar, you can style elements inside the list.

li a {
  display: block;
  color: #000;
  padding: 7px 14px;
  text-decoration: none;
}

text-decoration: none;

}

display: block; – it property is used to displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width, height, margin, padding, etc. if you want)

Current/ active Navigation link

Add an “active” class to the current link, which you want to current and active link user knows which link want to active

.active {
  background-color: #FF8C00;
  color: white;
}

.active {

background-color: #FF8C00;

color: white;

}

Home
About
Gallary
News
Contact

Fixed Full-height Vertical Side Navbar

<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0;}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 23%;
  position: fixed;
  overflow: auto;
  height: 100%;
  background-color: #f1f1f1;
  }
li a {
  display: block;
  padding: 7px 14px;
  text-decoration: none;
  color: #000; }
li a.active {
  color: white;
  background-color: orange; }
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#Gallary">Gallary</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2 style="color:#000">Fixed Full-height Vertical Side Navbar</h2>
  <h3 style="color:#ccc">Try to scroll this area.</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting...</p>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body { margin: 0;}

ul {

list-style-type: none;

padding: 0;

margin: 0;

width: 23%;

position: fixed;

overflow: auto;

height: 100%;

background-color: #f1f1f1;

}

li a {

display: block;

padding: 7px 14px;

text-decoration: none;

color: #000; }

li a.active {

color: white;

background-color: orange; }

</style>

</head>

<body>

<ul>

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

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

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

</ul>

<h2 style="color:#000">Fixed Full-height Vertical Side Navbar</h2>

<h3 style="color:#ccc">Try to scroll this area.</h3>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting...</p>

</div>

</body>

</html>

Horizontal Navbar with Dropdown

here Horizontal menubar we learn How to add a dropdown menu inside a navigation bar.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #211e1e;
  list-style-type: none;
}
li {
  float: left;
}

li a, .drop_button {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover, .dropdown:hover .drop_button {
  background-color: green;
}
li.dropdown {
  display: inline-block;
}
.active {
  background-color: #f3632c;
}
.dropdown_text {
  min-width: 160px;
  position: absolute;
  background-color: #f9f9f9;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown_text a {
  color: black;
  text-align: left;
  display: block;
  padding: 12px 16px;
  text-decoration: none; 
}
.dropdown_text a:hover {
  background-color: green;
  color: #FFF;}
.dropdown:hover .dropdown_text {
  display: block;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="gallery.html">Gallery</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="drop_button">Technology</a>
    <div class="dropdown_text">
      <a href="#">Information Technology</a>
      <a href="#">Telecommunication</a>
      <a href="#">Automation technology</a>
    </div>
  </li>
  <li><a href="#news">News & Update</a></li>
  <li><a href="#news">Contact us</a></li>
</ul>

<h3>See the Demo of Dropdown Menu bar with inside a Navigation Bar</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

ul {

margin: 0;

padding: 0;

overflow: hidden;

background-color: #211e1e;

list-style-type: none;

}

li {

float: left;

}

li a, .drop_button {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover, .dropdown:hover .drop_button {

background-color: green;

}

li.dropdown {

display: inline-block;

}

.active {

background-color: #f3632c;

}

.dropdown_text {

min-width: 160px;

position: absolute;

background-color: #f9f9f9;

display: none;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown_text a {

color: black;

text-align: left;

display: block;

padding: 12px 16px;

text-decoration: none;

}

.dropdown_text a:hover {

background-color: green;

color: #FFF;}

.dropdown:hover .dropdown_text {

display: block;

}

</style>

</head>

<body>

<ul>

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

<li><a href="gallery.html">Gallery</a></li>

<a href="javascript:void(0)" class="drop_button">Technology</a>

<a href="#">Information Technology</a>

<a href="#">Telecommunication</a>

<a href="#">Automation technology</a>

</div>

</li>

<li><a href="#news">News & Update</a></li>

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

</ul>

<h3>See the Demo of Dropdown Menu bar with inside a Navigation Bar</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat

non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>

</html>

Sticky Navigation

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 25px;
}
ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
  position: sticky;
  top: 0;
  background-color: #4c4848;
  position: -webkit-sticky; /* Safari */
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  text-align: center;
}
li a:hover {
  background-color: green;
}
.active {
  background-color: #d40909;
}
</style>
</head>
<body>
<div class="header">
  <h2>Sticky Navigation : Scroll Down the page</h2>
  <p>Scroll down the page to see the sticky navigation effect</p>
</div>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#galley">Gallery</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<h3>Write Heading Here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa
</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-size: 25px;

}

ul {

margin: 0;

padding: 0;

overflow: hidden;

list-style-type: none;

position: sticky;

top: 0;

background-color: #4c4848;

position: -webkit-sticky; /* Safari */

}

li {

float: left;

}

li a {

display: block;

color: white;

padding: 14px 16px;

text-decoration: none;

text-align: center;

}

li a:hover {

background-color: green;

}

.active {

background-color: #d40909;

}

</style>

</head>

<body>

<h2>Sticky Navigation : Scroll Down the page</h2>

<p>Scroll down the page to see the sticky navigation effect</p>

</div>

<ul>

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

<li><a href="#galley">Gallery</a></li>

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

</ul>

<h3>Write Heading Here</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa

</p>

</body>

</html>

Fixed Navigation Bar (Top)

<!DOCTYPE>
<html>
<head>
<style>
body {margin:0;}

ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 20px;
  font-weight: 700;
  position: fixed;
  top: 0;
  overflow: hidden;
  background-color: grey;
}

li { float: left;}
li a {
  color: white;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 15px 17px;
}
li a:hover:not(.active) {
  background-color: green;
}
.active {
  background-color: orange;
}
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">News & Update</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div style="padding:15px; margin-top:30px; background-color:#f3f7f6; height:1000px;">
  <h1>Fixed Navigation Bar (Top Menu Fixed)</h1>
  <h2>Scroll this page to see the effect of fixed Top Navigation Bar</h2>
  <h2>When scroll the page Top navigation bar will stay at the top of the page </h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>

<!DOCTYPE>

<html>

<head>

<style>

body {margin:0;}

ul {

width: 100%;

margin: 0;

padding: 0;

list-style-type: none;

font-size: 20px;

font-weight: 700;

position: fixed;

top: 0;

overflow: hidden;

background-color: grey;

}

li { float: left;}

li a {

color: white;

text-align: center;

text-decoration: none;

display: block;

padding: 15px 17px;

}

li a:hover:not(.active) {

background-color: green;

}

.active {

background-color: orange;

}

</style>

</head>

<body>

<ul>

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

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

<li><a href="#">News & Update</a></li>

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

</ul>

<h1>Fixed Navigation Bar (Top Menu Fixed)</h1>

<h2>Scroll this page to see the effect of fixed Top Navigation Bar</h2>

<h2>When scroll the page Top navigation bar will stay at the top of the page </h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</body>

</html>

CSS Navigation Bar Design and Properties

Vertical Navigation Bar Example

Current/ active Navigation link

Fixed Full-height Vertical Side Navbar

Horizontal Navbar with Dropdown

Sticky Navigation

Fixed Navigation Bar (Top)

Related Posts

About Author

admin