CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Navigation Bar

A navigation bar is a navigation header that is placed at the top of the page.

A navigation bar is used in every website to make it more user-friendly.


Basic Navigation Bar

The following example shows a basic horizontal navigation bar with a light background color:

Run code

Color Schemes

Use background-color property to change the background color of your navigation bar:

Run code

Hoverable Links

Use the :hover pseudo-class to change the color of each link when moving the mouse over them:

Run code

Active Links

Navigation links are customizable for different circumstances. Use .active class to indicate the current page:

Run code

Right Aligned Elements

Use float:right; to align links to the right side:

Run code

Icons in Navigation Bar

The following example shows how to use icons with navigation bar:

Run code

To learn more about Icons, visit: How to use Icons Chapter.


Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

Add the following properties to the .navbar class:

  • position: fixed;
  • top: 0;
  • width: 100%;
Run code

Tip: To prevent the navbar from sitting on top of other content in the body of the page, add at least 70 pixels of margin-top to the first element after navbar or try your own values.

The bottom:0; makes the navigation bar stay fixed at the bottom:

Run code

Sticky Navigation Bar

Use position:sticky; to create a sticky navigation bar.

A sticky element is positioned based on the user's scroll position.

Run code

IE11 and IE10 will render position:sticky; as position:relative;, and Safari requires a -webkit- prefix.


Responsive Navigation Bar

The following example use Media queries to stack the navigation bar vertically when the screen size is 600px or less:

Run code

Vertical Navigation Bar

The following example shows how to create vertical navigation bar:


Toggle Vertical Navigation Bar

The following example shows how to create vertical navigation bar that you can toggle with a button: