Skip to content

Instantly share code, notes, and snippets.

@bpeterso2000

bpeterso2000/fastnav_with_search.html

Last active July 16, 2025 21:29
Show Gist options
  • Save bpeterso2000/f36ff3cd0580cb8e21a923f602cda878 to your computer and use it in GitHub Desktop.
Save bpeterso2000/f36ff3cd0580cb8e21a923f602cda878 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fastnav_with_search.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Menu with Subitems</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
}
/* Navbar Container */
.nav-container {
background-color: #1a2535;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* App Name */
.app-name-container {
background-color: #273449;
padding: 8px 16px;
border-radius: 6px;
margin-right: 24px;
display: none;
}
.app-name {
color: #d6b94a;
font-weight: 300;
font-size: 0.875rem;
Budapest, Hungary
user-select: none;
text-shadow: 0 0 4px rgba(214, 185, 74, 0.6);
}
/* Main Menu */
.nav-menu {
list-style: none;
display: flex;
align-items: center;
margin: 0 10px;
}
.nav-item {
position: relative;
}
.nav-item a {
color: #e5e7eb;
text-decoration: none;
padding: 15px 20px;
display: block;
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.nav-item a:hover {
background-color: #4b5563;
border-radius: 4px;
}
/* Dropdown Menu */
.dropdown-content {
display: none;
position: absolute;
background-color: #374151;
min-width: 200px;
top: 100%;
left: 0;
list-style: none;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
border-radius: 4px;
z-index: 1;
}
.dropdown-content li {
border-bottom: 1px solid #4b5563;
}
.dropdown-content li a {
padding: 10px 20px;
color: #e5e7eb;
display: block;
}
.dropdown-content li a:hover {
background-color: #4b5563;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Right Side (Search, Icons) */
.nav-right {
display: flex;
align-items: center;
gap: 10px;
}
.search-container {
position: relative;
display: flex;
align-items: center;
}
.search-field {
padding: 10px 10px 10px 40px;
border: none;
border-radius: 4px;
background-color: #273449;
color: #e5e7eb;
font-size: 18px;
width: 293px;
}
.search-field::placeholder {
color: #9ca3af;
background-color: #273449;
}
.search-field:focus {
outline: none;
box-shadow: 0 0 0 2px #3b82f6;
background-color: #273449;
}
.search-icon {
position: absolute;
left: 12px;
color: #9ca3af;
font-size: 16px;
visibility: visible;
opacity: 1;
}
.icon {
color: #e5e7eb;
font-size: 24px;
padding: 8px;
cursor: pointer;
filter: grayscale(100%) brightness(100%);
display: inline-block;
visibility: visible;
opacity: 1;
}
.icon.notification {
background-color: #374151;
border-radius: 4px;
}
.icon.profile {
color: #d6b94a;
font-size: 28px;
filter: none;
}
.icon:hover {
background-color: #4b5563;
border-radius: 4px;
}
/* Hamburger Menu */
.hamburger {
display: none;
font-size: 24px;
color: #e5e7eb;
background: none;
border: none;
cursor: pointer;
padding: 10px;
visibility: visible;
opacity: 1;
}
/* Media Queries */
@media (min-width: 768px) {
.app-name-container {
display: block;
}
}
@media (max-width: 768px) {
.hamburger {
display: block;
}
.nav-menu {
display: none;
flex-direction: column;
position: absolute;
top: 64px;
left: 0;
width: 100%;
background-color: #1a2535;
margin: 0;
}
.nav-menu.active {
display: flex;
}
.nav-item {
width: 100%;
margin: 0;
}
.dropdown-content {
position: static;
width: 100%;
box-shadow: none;
background-color: #374151;
}
.dropdown.active .dropdown-content {
display: block;
}
.app-name-container {
padding: 4px 8px;
}
.app-name {
font-size: 0.875rem;
text-shadow: 0 0 4px rgba(214, 185, 74, 0.6);
}
.nav-right {
gap: 5px;
}
.search-field {
width: 187px;
font-size: 14px;
padding: 8px 8px 8px 32px;
}
.search-field:focus {
box-shadow: 0 0 0 2px #3b82f6;
}
.search-icon {
font-size: 14px;
left: 10px;
}
.icon {
font-size: 20px;
padding: 6px;
}
.icon.profile {
font-size: 24px;
}
.icon.notification {
background-color: #374151;
border-radius: 4px;
}
}
@media (max-width: 480px) {
.search-container {
display: none;
}
}
</style>
</head>
<body>
<nav class="nav-container">
<div class="app-name-container">
<span class="app-name">MyApp</span>
</div>
<ul class="nav-menu">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle">Products</a>
<ul class="dropdown-content">
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle">Services</a>
<ul class="dropdown-content">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
<div class="nav-right">
<button class="hamburger">☰</button>
<div class="search-container">
<span class="search-icon"><i class="fas fa-search"></i></span>
<input type="text" class="search-field" placeholder="Search">
</div>
<span class="icon notification"><i class="fas fa-bell-o"></i></span>
<span class="icon profile"><i class="fas fa-circle-user"></i></span>
<span class="icon notification-fallback" style="display: none;">🔔</span>
</div>
</nav>
<script>
document.addEventListener('DOMContentLoaded', () => {
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
// Toggle mobile menu
hamburger.addEventListener('click', () => {
console.log('Hamburger clicked'); // Debug log
navMenu.classList.toggle('active');
hamburger.textContent = navMenu.classList.contains('active') ? '✕' : '☰';
});
// Toggle dropdown for mobile
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
dropdownToggles.forEach(toggle => {
toggle.addEventListener('click', (e) => {
if (window.innerWidth <= 768) {
e.preventDefault();
const parent = toggle.parentElement;
console.log('Dropdown toggled:', parent); // Debug log
parent.classList.toggle('active');
}
});
});
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (window.innerWidth <= 768 && !navMenu.contains(e.target) && !hamburger.contains(e.target)) {
console.log('Clicked outside, closing menu'); // Debug log
navMenu.classList.remove('active');
hamburger.textContent = '☰';
document.querySelectorAll('.dropdown.active').forEach(dropdown => {
dropdown.classList.remove('active');
});
}
});
// Reset menu on window resize
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
console.log('Resized to desktop, resetting menu'); // Debug log
navMenu.classList.remove('active');
hamburger.textContent = '☰';
document.querySelectorAll('.dropdown.active').forEach(dropdown => {
dropdown.classList.remove('active');
});
}
});
// Check if Font Awesome bell icon is loaded
if (!document.querySelector('.icon.notification i').offsetWidth) {
console.log('Font Awesome bell icon not visible');
document.querySelector('.icon.notification').style.display = 'none';
document.querySelector('.icon.notification-fallback').style.display = 'inline-block';
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment