A responsive navigation bar (navbar) with a logo is a crucial element of any modern website. It not only helps users navigate your site but also reinforces your brand identity. In this step-by-step tutorial, you will learn how to create a responsive navigation bar that includes a logo using HTML, CSS and a bit of JavaScript.
Making of the Responsive Navbar that Includes a Logo
Click the following button to see the demo of the responsive navbar that we are going to build ā
1. Create HTML Structure for the Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Responsive Navigation Bar</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<div class="wrapper">
<div class="logo">
<a href="#"><img src="https://tinyurl.com/ycxvf9u7" alt="Logo" /></a>
</div>
<div class="navbar">
<div class="close-nav"><button>Ć</button></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="menu-bar">
<button><i></i></button>
</div>
</div>
</header>
<div class="container">
<!-- Content -->
</div>
<script src="./script.js"></script>
</body>
</html>In this HTML structure:
- We include the necessary metadata, links to CSS and JavaScript files, and a title in the
<head>section. - Inside the
<div calss="wrapper">element, we have a container with your logo, navigation links (<nav> Ā» <ul>), and a menu toggle button.
2. Add CSS Styles for the Navbar
Letās style the navbar and make it responsive using CSS. Create a file named style.css and add the following styles:
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
line-height: 1.5em;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "Open Sans", sans-serif;
background-color: #f7f7f7;
}
header {
background-color: #ffffff;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
}
header .wrapper {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
header .logo img {
height: 50px;
display: block;
}
.navbar {
position: fixed;
top: 0;
left: 100%;
margin: 0;
width: 100%;
height: 100%;
background-color: white;
padding: 20px;
transition: left 0.3s;
}
.navbar.show {
left: 0 !important;
}
.hide-scroll {
overflow: hidden;
}
.navbar ul {
all: unset;
list-style-type: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
}
.navbar ul a {
all: unset;
color: #444444;
text-transform: uppercase;
cursor: pointer;
font-weight: bold;
font-size: 28px;
}
.navbar ul a:hover {
color: #111111;
text-decoration: underline overline;
text-decoration-thickness: 3px;
}
.close-nav {
text-align: right;
margin-bottom: 20px;
}
.close-nav button {
all: unset;
background: #f7f7f7;
font-size: 42px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 3px;
color: #444444;
}
.close-nav button:hover {
color: #222222;
background: white;
}
.menu-bar button {
border: 1px solid rgba(0, 0, 0, 0.1);
background: #f7f7f7;
height: 50px;
width: 50px;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
.menu-bar i {
display: block;
border-top: 3px solid #444444;
border-bottom: 3px solid #444444;
}
.menu-bar i::after {
display: block;
content: "";
border-top: 3px solid #444444;
margin: 6px 0;
}
.menu-bar button:hover {
background: white;
}
.menu-bar button:hover i {
border-color: #222222;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 30px;
}
@media (min-width: 550px) {
.navbar {
all: unset;
display: block;
}
.navbar ul {
flex-direction: row;
gap: 20px;
}
.navbar ul a {
font-size: inherit;
}
.close-nav,
.menu-bar {
display: none;
}
}In this CSS code:
- We style the navbarās background, text, and layout.
- The logo and navigation links are styled, and we added a hover effect for links.
- For smaller screens (550px width or less), we use a media query to hide the navigation links by default (
display: none) and display them in a column when the menu toggle button is clicked (display: block).
3. Implement the Responsive Behavior with JavaScript
To toggle the navigation links on smaller screens, weāll use JavaScript. So therefore, create a file named script.js and add the following code:
const theBody = document.querySelector('body');
const openNav = document.querySelector('.menu-bar button');
const closeNav = document.querySelector('.close-nav button');
const Navbar = document.querySelector('.navbar');
// Function to handle body scroll behavior when the mobile navigation menu opens and closes
function bodyScroll() {
// If the navigation bar is shown, hide the body scroll by adding 'hide-scroll' class to the body
if (Navbar.classList.contains('show')) {
theBody.classList.add('hide-scroll');
}
// If the navigation bar is hidden and 'hide-scroll' class is present in the body, remove it to show the body scroll
else if (theBody.classList.contains('hide-scroll')) {
theBody.classList.remove('hide-scroll');
}
}
// Function to toggle the visibility of the navigation bar and handle body scroll accordingly
function showHide() {
Navbar.classList.toggle('show'); // Toggling the 'show' class on the navigation bar
bodyScroll(); // Calling bodyScroll function to handle body scroll behavior
}
// Attaching event handlers to openNav and closeNav buttons to trigger the showHide function when clicked
openNav.onclick = showHide;
closeNav.onclick = showHide;Congratulations! Youāve successfully created a responsive navbar with a logo for your website. You can further customize the styles and functionality to match your websiteās design and requirements.