There are two ways to create a horizontal navigation bar. Using inline or floating list items.
One way to build a horizontal navigation bar is to specify the
Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links.
{ float: left; } — This makes each list item float next to the other, creating a horizontal layout.
{ display: block; } — Setting list items to block display allows you to define padding, height, width, margins, and more.
{ padding: 8px; } — Adding padding to each <li> provides space around the content, improving readability and appearance.
{ background-color: #dddddd; } — This sets a light gray background color to each list item for better visual separation.
Tip: To apply a full-width background color to the navigation bar, apply the background-color to the <ul> element instead of each individual <a> or <li>.
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:
An "active" class to the current link to let the user know which page he/she is on:
Right-align links by floating the list items to the right (float:right;):
Add the border-right property to
Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page:
An example of a gray horizontal navigation bar with a thin gray border:
Add position: sticky; to to create a sticky navbar.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
How to use CSS media queries to create responsive top navigation.