To create a responsive navigation bar, you need to combine HTML structure, CSS style and a small amount of JavaScript. 1. Use semantic HTML to build a basic structure containing logos, navigation links and mobile hamburger icons; 2. Use Flexbox to realize horizontal layout on the desktop and set fixed positioning and spacing; 3. Use media queries to hide the menu when the screen width is less than 768px, and use JavaScript to switch.active class to control the mobile menu to slide out; 4. Add CSS transition animation to turn the hamburger icon into "X" to improve the interactive experience; at the same time, make sure to use box-sizing: border-box globally, add viewport meta tags, and test the response effect on different devices, and finally achieve a smooth navigation bar that is suitable for all devices.

Creating a responsive navigation bar with CSS involves combining HTML structure and CSS styling to ensure the navbar looks good and functions well on all devices—from desktops to mobile phones. Here's how you can build one step by step.

1. Basic HTML Structure

Start with a clean and semantic HTML structure for your navigation bar:

 <nav class="navbar">
  <div class="nav-container">
    <div class="nav-logo">
      <a href="#home">MySite</a>
    </div>

    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#home" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#about" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#services" class="nav-link">Services</a>
      </li>
      <li class="nav-item">
        <a href="#contact" class="nav-link">Contact</a>
      </li>
    </ul>

    <div class="nav-toggle" id="mobile-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </div>
</nav>

This includes a logo, a list of navigation links, and a hamburger icon for mobile view.

2. Desktop Styling with Flexbox

Use CSS Flexbox to align items horizontally and space them evenly on larger screens:

 .navbar {
  background-color: #333;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

.nav-logo a {
  color: #ffff;
  text-decoration: none;
  font-size: 2rem;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0 1rem;
}

.nav-link {
  color: #ffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #00c853;
}

This creates a clean horizontal navbar for desktops.

3. Mobile Hamburger Menu Toggle (with JavaScript)

The hamburger icon appears only on small screens. You'll need a little JavaScript to toggle the menu:

 /* Hamburger icon */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 3px 0;
  transition: 0.3s;
}

/* Show mobile menu */
.nav-menu.active {
  transform: translateX(0);
}

Add this JavaScript to toggle the menu:

 const menu = document.getElementById('mobile-menu');
const navMenu = document.querySelector('.nav-menu');

menu.addEventListener('click', function () {
  menu.classList.toggle('active');
  navMenu.classList.toggle('active');
});

And add the mobile styles in CSS:

 @media screen and (max-width: 768px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 80px;
    flex-direction: column;
    background-color: #333;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-item {
    margin: 2.5rem 0;
  }

  .nav-link {
    font-size: 1.5rem;
  }

  .nav-toggle {
    display: flex;
  }
}

On mobile, the menu starts hidden ( left: -100% ) and slides in when the .active class is added.

4. Optional: Animate the Hamburger Icon

Make the hamburger icon transform into an "X" when active:

 .nav-toggle.active .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

This small animation improves user feedback and makes the toggle more intuitive.

Key Tips for Responsiveness

• Use max-width and margin: auto to control layout width.
• Always include box-sizing: border-box globally to avoid sizing issues.
• Use viewport meta tag in HTML for proper mobile rendering:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

• Test on real devices or use browser dev tools to simulate different screen sizes.

Basically, a responsive navbar comes down to:

• Flexbox for layout
• Media queries for breakpoints
• A toggle mechanism (with minimal JavaScript) for mobile
• Smooth transitions for better UX

With these pieces, you can customize colors, fonts, and animations to match your site's design. It's not complicated once you break it down.

The above is the detailed content of How to create a responsive navigation bar with CSS?. For more information, please follow other related articles on the PHP Chinese website!