Introduction
Navigation bars or Navbars for short, are essential components of modern web design. Although different website establishments use different types of Navbars, one thing remains constant – the importance of an effective Navbar in any web design.
The Navbar is the primary way to navigate a website. It contains various links to different pages within a site and is generally placed at the top of the webpage. Creating a Navbar can be a challenging task with many options available – and as a web developer, it’s important to design Navbars that are user-friendly, visually attractive, and functional.
In this tutorial, I will guide you on how to create a simple navigation bar in CSS. Through this, we will explore the main features of CSS and Bootstrap framework, as well as the importance of responsive design.
The Basics of CSS
CSS or Cascading Style Sheets is a markup language used to style and design web pages. It’s used to style elements such as text, colors, and layouts of a website to create a visually appealing experience for a visitor. CSS can be applied to an HTML file using internal or external stylesheets.
The Box Model
Before creating a Navbar in CSS, let’s first explore the CSS Box Model. The Box Model is a concept that explains how CSS elements are displayed and represented in layouts on a webpage.
Every HTML element displayed on a webpage comprises of padding, border, and margin. Padding is the space between the element’s content and border, while the border is the area surrounding the padding. Margin is the area between the outer border and other elements on a webpage.
CSS Classes
CSS classes are composed of selectors and declarations. The selector targets an HTML element to which the style is to be applied, while the declaration sets the style of the HTML element.
Syntax
selector {
property: value;
property: value;
property: value;
}
Selectors can be a class, id, or element, while properties are the styles you want to set, and values are the individual styling of each property.
Creating a Navbar in CSS
In this tutorial, we will create a simple Navbar in CSS. To make it a bit easier, we will use the Bootstrap Framework that provides us some pre-defined classes to style HTML elements.
Installing Bootstrap
To use Bootstrap in your project, it needs to be installed first. Follow the instructions from the Bootstrap website (https://getbootstrap.com/). Bootstrap can then be added to your project as an external style sheet using the HTML link tag:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
HTML Markup
The first step is to create the HTML Markup for the Navbar. We will start by creating a header
element with a nav
element inside it. The nav
element holds all the links that will be displayed in the Navbar. Bootstrap uses nav
and nav-bar
classes for Navbar functionality.
<header>
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#"></a>
</nav>
</header>
Navbar Branding
Next, we add the branding for the Navbar by adding an image inside the nav
element alongside the brand name.
<header>
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#"><img src="https://placehold.it/150x50" alt="logo">Brand Name</a>
</nav>
</header>
Navbar Toggler
In the next step, we will add a button called Navbar Toggler. The Navbar Toggler is used to toggle a dropdown menu for small screens.
<header>
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#"><img src="https://placehold.it/150x50" alt="logo">Brand Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
Navbar Links
Now, we need to add links to the Navbar. Bootstrap provides us with a container class for Navbar links that automatically aligns them to the left. We add nav-link
class to all the links inside the nav
element.
<header>
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#"><img src="https://placehold.it/150x50" alt="logo">Brand Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</header>
Styling Navbar
Bootstrap provides a range of adjustments we can make on the Navbar to personalize it further.
Change Navbar Background Color
We can use the .navbar
class to color the whole Navbar or the .navbar-light
class to color just the top bar.
.navbar {
background-color: #000;
}
.navbar-light {
background-color: #000;
}
Change Link Styles
Use .navbar-dark
, .nav-item
, and .nav-link
classes to change the default link styles.
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #45de91;
}
Responsive Navbar
Today, most users access websites from mobile devices, so it’s essential to make sure that websites are responsive.
Bootstrap provides a responsive grid system. We can use .navbar-expand-sm
class to make the Navbar adjustable for smaller screens, and .navbar-expand-lg
for larger screens. We also use .ml-auto
or .mr-auto
class to move elements either to the left or right of the Navbar.
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"><img src="https://placehold.it/150x50" alt="logo">Brand Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</header>
Conclusion
Creating a Navbar in CSS may seem like a daunting task, but with some basic skills and Bootstrap, we can make it easy. The Navbar is an essential element of every website, and it’s important to ensure that it’s user-friendly, visually attractive, and functional.
By following the steps illustrated in this tutorial, you can create a simple Navbar that’s responsive and customizable to fit different website designs. Always consider a responsive Navbar design in your development process to make it accessible to all users.
📕 Related articles about CSS
- CSS Tutorial: How to Make a Transparent Background on Your Website
- Adding Stylesheet to HTML
- How to make website HTML and CSS
- How to Use CSS Filters to Create Amazing Visual Effects on Your Website
- How to Create a Navigation Bar in HTML and CSS
- Understanding CSS Comments: Best Practices and Examples