An example of a stylish and responsive navigation bar for a Blogger website using HTML and CSS. You can customize the colors, fonts, and styles to match your blog's theme.
HTML
Add this code to your Blogger theme inside the <body> section where you'd like the navbar to appear:
<div class="navbar">
<div class="logo">
<a href="#">MyBlog</a>
</div>
<div class="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
CSS
Add this CSS code inside the <style> tag in the <head> section of your Blogger theme:
/* Navbar Container */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 1000;
}
/* Logo */
.navbar .logo a {
text-decoration: none;
color: #fff;
font-size: 24px;
font-weight: bold;
}
/* Menu */
.navbar .menu ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.navbar .menu ul li {
margin: 0 15px;
}
.navbar .menu ul li a {
text-decoration: none;
color: #fff;
font-size: 18px;
transition: color 0.3s;
}
.navbar .menu ul li a:hover {
color: #ff5722;
}
/* Responsive Design */
@media (max-width: 768px) {
.navbar {
flex-wrap: wrap;
}
.menu ul {
flex-direction: column;
display: none;
width: 100%;
background-color: #444;
}
.menu ul.active {
display: flex;
}
.menu ul li {
text-align: center;
margin: 10px 0;
}
.menu-toggle {
display: block;
color: #fff;
font-size: 24px;
cursor: pointer;
}
}
Optional: Add Toggle Button for Mobile
Add this just above the <ul> element in the HTML:
<div class="menu-toggle" onclick="toggleMenu()">☰</div>
JavaScript for Toggle Menu
Add this script just before the closing </body> tag:
<script>
function toggleMenu() {
const menu = document.querySelector('.menu ul');
menu.classList.toggle('active');
}
</script>
Now you have a stylish, responsive navigation bar for your Blogger site! You can tweak the styles further as per your preference.