• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Navigation Bar

← Previous Next →

🔹 What is a CSS Navigation Bar?

A navigation bar (nav bar) is a section of a website that contains links to other parts of the site. It is commonly placed at the top or side of a webpage and styled using CSS to enhance usability and appearance.

🔸 Types of Navigation Bars

  1. Horizontal Navbar – Usually at the top of the page

  2. Vertical Navbar – Typically used for side navigation

  3. Fixed Navbar – Stays in place during scroll

  4. Responsive Navbar – Adjusts layout on different screen sizes

🔸 Basic Horizontal Navbar Example

<nav>
  <ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
  display: flex;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #111;
}

🔸 Vertical Navbar Example

.navbar {
  display: flex;
  flex-direction: column;
  width: 200px;
}

🔸 Fixed Navbar Example

.fixed-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

🔸 Responsive Navbar with Media Query

@media screen and (max-width: 600px) {
  .navbar {
    flex-direction: column;
  }
}

Practice Questions

Q1. Create a horizontal navigation bar with four links.

Q2. Style the nav bar with a dark background and white text.

Q3. Add hover effects to change link background color.

Q4. Make the navigation bar fixed at the top.

Q5. Create a vertical sidebar navigation bar.

Q6. Use Flexbox to align links horizontally.

Q7. Center the navigation links in the nav bar.

Q8. Add padding and spacing between links.

Q9. Make a responsive navigation bar using media queries.

Q10. Highlight the active link in a different color.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top