Skip to content

Instantly share code, notes, and snippets.

@bpeterso2000

bpeterso2000/fastnav.html

Created July 13, 2025 04:58
Show Gist options
  • Save bpeterso2000/8c7caaa6a49652c3936cab8b0ade7608 to your computer and use it in GitHub Desktop.
Save bpeterso2000/8c7caaa6a49652c3936cab8b0ade7608 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fastnav.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</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; /* Apply Inter globally */
}
.nav-container {
background-color: #1a2535;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.app-name-container {
background-color: #273449; /* Tailwind bg-[#273449] */
padding: 8px 16px; /* Tailwind py-2 px-4 */
border-radius: 6px; /* Tailwind rounded-md */
margin-right: 24px; /* Tailwind mr-6 */
display: none; /* Tailwind hidden */
}
.app-name {
color: #d6b94a; /* Softer yellow */
font-weight: 300; /* Thinner font */
font-size: 0.875rem; /* Tailwind text-sm */
user-select: none; /* Prevent text selection */
text-shadow: 0 0 4px rgba(214, 185, 74, 0.6); /* Subtle glow */
}
.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 {
/* Diagnostic styling to ensure bell icon is visible */
background-color: #374151; /* Temporary for debugging */
border-radius: 4px;
}
.icon.profile {
color: #d6b94a;
font-size: 28px;
filter: none;
}
.icon:hover {
background-color: #4b5563;
border-radius: 4px;
}
.nav-menu {
list-style: none;
display: flex;
align-items: center;
margin: 0 10px;
}
.nav-menu li {
position: relative;
}
.nav-menu a {
color: #e5e7eb;
text-decoration: none;
padding: 15px 20px;
display: block;
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.nav-menu a:hover {
background-color: #4b5563;
}
.submenu {
display: none;
position: absolute;
background-color: #374151;
min-width: 200px;
top: 100%;
left: 0;
list-style: none;
}
.submenu li {
border-bottom: 1px solid #4b5563;
}
.submenu a {
padding: 10px 20px;
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.nav-menu li:hover > .submenu {
display: block;
}
.hamburger {
display: none;
font-size: 24px;
color: #e5e7eb;
background: none;
border: none;
cursor: pointer;
padding: 10px;
visibility: visible;
opacity: 1;
}
@media (min-width: 768px) {
.app-name-container {
display: block; /* Tailwind md: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-menu li {
width: 100%;
}
.submenu {
position: static;
width: 100%;
background-color: #374151;
}
.nav-menu li:hover > .submenu {
display: none;
}
.submenu.active {
display: block;
}
.app-name-container {
padding: 4px 8px; /* Smaller padding for mobile */
}
.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; /* Hide search input on very small screens */
}
}
</style>
</head>
<body>
<nav class="nav-container">
<div class="app-name-container">
<span class="app-name">MyApp</span>
</div>
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul class="submenu">
<li><a href="#">Electronics</a></li>
<li><a href="#">Clothing</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul class="submenu">
<li><a href="#">Consulting</a></li>
<li><a href="#">Support</a></li>
</ul>
</li>
<li><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>
<!-- Fallback Unicode bell for debugging -->
<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', () => {
navMenu.classList.toggle('active');
hamburger.textContent = navMenu.classList.contains('active') ? '✕' : '☰';
});
// Handle submenu toggling on mobile
const menuItemsWithSubmenu = document.querySelectorAll('.nav-menu > li');
menuItemsWithSubmenu.forEach(item => {
const submenu = item.querySelector('.submenu');
if (submenu) {
const link = item.querySelector('a');
link.addEventListener('click', (e) => {
if (window.innerWidth <= 768) {
e.preventDefault();
submenu.classList.toggle('active');
}
});
}
});
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (window.innerWidth <= 768 && !navMenu.contains(e.target) && !hamburger.contains(e.target)) {
navMenu.classList.remove('active');
hamburger.textContent = '☰';
document.querySelectorAll('.submenu.active').forEach(submenu => {
submenu.classList.remove('active');
});
}
});
// Reset menu on window resize
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
navMenu.classList.remove('active');
hamburger.textContent = '☰';
document.querySelectorAll('.submenu.active').forEach(submenu => {
submenu.classList.remove('active');
});
}
});
// Debug: 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