CSS - Navbar

Navbar Basics

A navbar, short for navigation bar, is a key part of web design that helps users move through a website. It usually has a list of links that take users to different sections or pages of the site. In this section, you will learn the basic structure of a navbar using HTML, how to style it with CSS, and how to position it on the page.

To create a basic navbar using HTML, use the <nav> element to wrap a list of links. Inside the <nav> element, use an unordered list (<ul>) to hold the navigation items. Each item in the list is represented by a list item (<li>) element containing an anchor (<a>) element with an href attribute pointing to the desired page or section.

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

Once you have the basic HTML structure in place, use CSS to style the navbar. You can apply styles to the <nav>, <ul>, <li>, and <a> elements to change its appearance. For example, remove default list styling using list-style: none;, add padding and margin to list items, and style links with custom colors and fonts.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

Positioning the navbar on your page is important for web design. Use CSS to control its placement. By default, it will be positioned in normal document flow. However, you can use position property changes like position: fixed; so that it stays at the top even when users scroll.

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px;
}

By understanding these basics—structure, styling, and positioning—you can create functional navigation for your website.

Creating a Horizontal Navbar

A horizontal navbar is a common design choice for websites, as it provides easy access to main sections or pages in a single line. To create a horizontal navbar, start with an unordered list (<ul>) inside a <nav> element. Each list item (<li>) will represent a navigation item, containing an anchor (<a>) element with an href attribute pointing to the corresponding page or section.

To make the list items appear horizontally, use the display: inline-block; CSS property on the <li> elements. This will make them sit side by side, rather than stacked vertically. Add some padding to the list items to create space between them and use margin to control the overall positioning of the navbar.

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

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  display: block;
  padding: 10px;
}

nav {
  background-color: #f5f5f5;
}

nav a {
  color: #333;
}

nav a:hover {
  background-color: #333;
}

Creating a Vertical Navbar

A vertical navbar stacks navigation items vertically. This design is useful when you have limited horizontal space or want to create a sidebar navigation. To create a vertical navbar, start with an unordered list (<ul>) inside a <nav> element. Instead of displaying the list items as inline-block elements, style them as block elements.

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

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: block;
  margin-bottom: 10px;
}

nav a {
  display: block;
  padding: 10px;
}

nav {
  background-color: #f5f5f5;
  width: 200px;
}

nav a {
  color: #333;
  text-decoration: none;
}

nav a:hover {
  background-color: #333;
  color: #fff;
}

Responsive Navbars

It's important to create responsive navbars that adapt to different viewport widths. Responsive navbars provide a good user experience by adjusting their layout and functionality based on the available screen space. In this section, we'll use media queries to create responsive navbars, hide and show the navbar based on screen size, and create a toggle button for mobile devices.

Media queries are a CSS feature that allow you to apply different styles based on the characteristics of the device, such as screen width. To create a responsive navbar, you can use media queries to change its layout and styling at different breakpoints. You can have a horizontal navbar on larger screens and switch to a vertical or hidden navbar on smaller screens.

/* Styles for larger screens */
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 10px;
}

/* Styles for smaller screens */
@media (max-width: 600px) {
  nav {
    flex-direction: column;
  }

  nav ul {
    display: none;
  }
}

In the above example, the navbar is displayed as a flex container with space between items on larger screens. When the screen width is 600 pixels or less, the navbar changes to a vertical layout using flex-direction: column;, and navigation items are hidden using display: none;.

To provide access to the hidden navbar on smaller screens, you can create a toggle button. The toggle button allows users to show or hide the navbar by clicking it. You can create this button using HTML and CSS and use JavaScript for toggling functionality.

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

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin-bottom: 5px;
}

@media (max-width: 600px) {
  .hamburger {
    display: block;
  }
}

const hamburger = document.querySelector('.hamburger');
const navList = document.querySelector('nav ul');

hamburger.addEventListener('click', () => {
   navList.classList.toggle('show');
});