• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Navigation Bar Quiz

Q1: Which HTML tag is commonly used for navigation?

A. <div>
B. <nav>
C. <header>
D. <section>

Q2: Which property removes bullet points from a nav list?

A. list-style-type: none;
B. text-decoration: none;
C. display: inline;
D. margin: 0;

Q3: What does display: flex; do in a nav bar?

A. Makes it scrollable
B. Aligns links in a row or column
C. Hides the nav bar
D. Centers the nav bar

Q4: How to style links with no underline?

A. text-decoration: none;
B. list-style: none;
C. text-align: none;
D. display: none;

Q5: Which property is used to make a fixed nav bar?

A. position: absolute;
B. position: fixed;
C. position: sticky;
D. float: top;

Q6: How do you change the background of a hovered link?

A. a:focus
B. li a
C. a:hover
D. nav:hover

Q7: What does overflow: hidden; do in nav?

A. Shows hidden items
B. Hides overflow content
C. Adds a scrollbar
D. Floats items

Q8: Which tag creates a link in a navbar?

A. <link>
B. <a>
C. <nav>
D. <li>

Q9: How to stack nav links vertically using Flexbox?

A. display: grid;
B. flex-wrap: wrap;
C. flex-direction: column;
D. float: left;

Q10: Which media query makes nav responsive on small screens?

A. @mobile
B. @screen
C. @media screen and (max-width: 600px)
D. @responsive
← Previous Next →
Login
Go Back Top