Navbar Generator
Generate navigation bars with responsive menu options
Generated CSS
.navbar {
background-color: #ffffff;
color: #1f2937;
height: 64px;
padding: 0 24px;
display: flex;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #1f2937;
}
.navbar-menu {
display: flex;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
margin-left: auto;
}
.navbar-item {
text-decoration: none;
color: #1f2937;
font-weight: 500;
transition: opacity 0.2s;
}
.navbar-item:hover {
opacity: 0.7;
}
@media (max-width: 768px) {
.navbar-menu {
display: none;
}
}