Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Navigation Bar- Horizontal Navbar

CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6 PDF Download

Horizontal Navigation Bar

CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Inline List Items


One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code from the previous page:

Example

li {

  display: inline;

}

Example explained:

  • display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line

Floating List Items


Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links:
Example

li {

  float: left;

}


a {

  display: block;

  padding: 8px;

  background-color: #dddddd;

}

Example explained:

  • float: left; - Use float to get block elements to float next to each other
  • display: block; - Allows us to specify padding (and height, width, margins, etc. if you want)
  • padding: 8px; - Specify some padding between each <a> element, to make them look good
  • background-color: #dddddd; - Add a gray background-color to each <a> element

Tip: Add the background-color to <ul> instead of each <a> element if you want a full-width background color:
Example

ul {

  background-color: #dddddd;

}

Horizontal Navigation Bar Examples


Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:
CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6

Example

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background-color: #333;

}


li {

  float: left;

}


li a {

  display: block;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}


/* Change the link color to #111 (black) on hover */

li a:hover {

  background-color: #111;

}

Active/Current Navigation Link


Add an "active" class to the current link to let the user know which page he/she is on:
CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6

Example

.active {

  background-color: #04AA6D;

}

Right-Align Links


Right-align links by floating the list items to the right (float:right;):
CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6

Example

<ul>

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

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

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

  <li style="float:right"><a class="active" href="#about">About</a></li>

</ul>

Border Dividers


Add the border-right property to <li> to create link dividers:
CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6

Example

/* Add a gray right border to all list items, except the last item (last-child) */

li {

  border-right: 1px solid #bbb;

}


li:last-child {

  border-right: none;

}

Fixed Navigation Bar


Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page:

CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6
Fixed Top Nav

The navigation bar will stay at the top of the page while scrolling

Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..

Fixed Bottom Nav

The navigation bar will stay at the bottom of the page while scrolling

Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..


Some text some text some text some text..

CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6

The document CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Viva Questions

,

study material

,

Semester Notes

,

Objective type Questions

,

Previous Year Questions with Solutions

,

video lectures

,

Free

,

CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6

,

Exam

,

mock tests for examination

,

pdf

,

practice quizzes

,

Summary

,

Important questions

,

ppt

,

Sample Paper

,

CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6

,

MCQs

,

past year papers

,

Extra Questions

,

CSS Navigation Bar- Horizontal Navbar | CSS for Beginners - Class 6

,

shortcuts and tricks

;