So the short story is, I have created a website, and I now seem to be running into an issue with the nav-menu, my nav-menu has a sub menu that drops down to expose some other menus, This works perfectly fine in desktop view, drop-down menus works great but as soon as I go into mobile view the drop-down menu stops working
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="index.html#hero" class="active">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#features">Features</a></li>
<li class="dropdown"><a href="#"><span>Services</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="login.html">Client Login (Coming Soon)</a></li>
<li><a href="fullwebsite.html">Full Website Design</a></li>
<li><a href="singlelandingpage.html">Landing Page Design</a></li>
<li><a href="multipagedesign.html">Multi Page Design</a></li>
<li><a href="addon.html">Add-On Features</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="index.html#pricing">Pricing</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
@media (min-width: 1200px) {
.navmenu .dropdown ul {
margin: 0;
padding: 10px 0;
background: var(--nav-dropdown-background-color);
display: block;
position: absolute;
visibility: hidden;
top: 100%; /* Align dropdown below parent item */
left: 0;
opacity: 0;
transition: opacity 0.3s ease, top 0.3s ease;
border-radius: 4px;
z-index: 99;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.navmenu ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navmenu li {
position: relative;
}
.navmenu a,
.navmenu a:focus {
color: var(--nav-color);
padding: 18px 15px;
font-size: 16px;
font-family: var(--nav-font);
font-weight: 400;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
}
.navmenu a i,
.navmenu a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
transition: 0.3s;
}
.navmenu li:last-child a {
padding-right: 0;
}
.navmenu li:hover>a,
.navmenu .active,
.navmenu .active:focus {
color: var(--nav-hover-color);
}
.navmenu .dropdown ul {
margin: 0;
padding: 10px 0;
background: var(--nav-dropdown-background-color);
display: block;
position: absolute;
visibility: hidden;
left: 14px;
top: 130%;
opacity: 0;
transition: 0.3s;
border-radius: 4px;
z-index: 99;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.navmenu .dropdown ul li {
min-width: 200px;
}
.navmenu .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
color: var(--nav-dropdown-color);
}
.navmenu .dropdown ul a i {
font-size: 12px;
}
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active:hover,
.navmenu .dropdown ul li:hover>a {
color: var(--nav-dropdown-hover-color);
}
.navmenu .dropdown:hover > ul {
visibility: visible;
opacity: 1;
top: 100%; /* Prevent overlapping by ensuring dropdown is fully below */
}
.navmenu .dropdown .dropdown ul {
top: 0;
left: 100%; /* Align nested dropdowns to the right */
visibility: hidden;
opacity: 0;
}
.navmenu .dropdown .dropdown:hover > ul {
visibility: visible;
opacity: 1;
top: 0; /* Nested dropdown aligns horizontally */
left: 100%;
}
.navmenu .megamenu {
position: static;
}
.navmenu .megamenu ul {
margin: 0;
padding: 10px;
background: var(--nav-dropdown-background-color);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
position: absolute;
top: 130%;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
display: flex;
transition: 0.3s;
border-radius: 4px;
z-index: 99;
}
.navmenu .megamenu ul li {
flex: 1;
}
.navmenu .megamenu ul li a,
.navmenu .megamenu ul li:hover>a {
padding: 10px 20px;
font-size: 15px;
color: var(--nav-dropdown-color);
}
.navmenu .megamenu ul li a:hover,
.navmenu .megamenu ul li .active,
.navmenu .megamenu ul li .active:hover {
color: var(--nav-dropdown-hover-color);
}
.navmenu .megamenu:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}
}
/* Mobile Navigation */
@media (max-width: 1199px) {
.mobile-nav-toggle {
color: var(--nav-color);
font-size: 28px;
line-height: 0;
margin-right: 10px;
cursor: pointer;
transition: color 0.3s;
}
.navmenu {
padding: 0;
z-index: 9997;
}
.navmenu ul {
display: none;
list-style: none;
position: absolute;
inset: 60px 20px 20px 20px;
padding: 10px 0;
margin: 0;
border-radius: 6px;
background-color: var(--nav-mobile-background-color);
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.navmenu a,
.navmenu a:focus {
color: var(--nav-dropdown-color);
padding: 10px 20px;
font-family: var(--nav-font);
font-size: 17px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
}
.navmenu a i,
.navmenu a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}
.navmenu a i:hover,
.navmenu a:focus i:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
}
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
color: var(--nav-dropdown-hover-color);
}
.navmenu .active i,
.navmenu .active:focus i {
background-color: var(--accent-color);
color: var(--contrast-color);
transform: rotate(180deg);
}
.navmenu .dropdown ul {
margin: 0;
padding: 10px 0;
background: var(--nav-dropdown-background-color);
display: block;
position: absolute;
visibility: hidden;
top: 130%;
left: 0; /* Set left to 0 for better alignment */
opacity: 0;
transition: 0.3s;
border-radius: 4px;
z-index: 99;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.navmenu .dropdown ul ul {
background-color: rgba(33, 37, 41, 0.1);
}
.navmenu .dropdown>.dropdown-active {
display: block;
background-color: rgba(33, 37, 41, 0.03);
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav-toggle {
color: #fff;
position: absolute;
font-size: 32px;
top: 15px;
right: 15px;
margin-right: 0;
z-index: 9999;
}
.mobile-nav-active .navmenu {
position: fixed;
overflow: hidden;
inset: 0;
background: rgba(33, 37, 41, 0.8);
transition: 0.3s;
}
.mobile-nav-active .navmenu>ul {
display: block;
}
}
(function() {
"use strict";
/**
* Apply .scrolled class to the body as the page is scrolled down
*/
function toggleScrolled() {
const selectBody = document.querySelector('body');
const selectHeader = document.querySelector('#header');
if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return;
window.scrollY > 100 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
}
document.addEventListener('scroll', toggleScrolled);
window.addEventListener('load', toggleScrolled);
/**
* Mobile nav toggle
*/
const mobileNavToggleBtn = document.querySelector('.mobile-nav-toggle');
function mobileNavToogle() {
document.querySelector('body').classList.toggle('mobile-nav-active');
mobileNavToggleBtn.classList.toggle('bi-list');
mobileNavToggleBtn.classList.toggle('bi-x');
}
mobileNavToggleBtn.addEventListener('click', mobileNavToogle);
/**
* Hide mobile nav on same-page/hash links
*/
document.querySelectorAll('#navmenu a').forEach(navmenu => {
navmenu.addEventListener('click', () => {
if (document.querySelector('.mobile-nav-active')) {
mobileNavToogle();
}
});
});
/**
* Toggle mobile nav dropdowns
*/
document.querySelectorAll('.navmenu .toggle-dropdown').forEach(navmenu => {
navmenu.addEventListener('click', function(e) {
e.preventDefault();
this.parentNode.classList.toggle('active');
this.parentNode.nextElementSibling.classList.toggle('dropdown-active');
e.stopImmediatePropagation();
});
});
/**
* Preloader
*/
const preloader = document.querySelector('#preloader');
if (preloader) {
window.addEventListener('load', () => {
preloader.remove();
});
}
/**
* Scroll top button
*/
let scrollTop = document.querySelector('.scroll-top');
function toggleScrollTop() {
if (scrollTop) {
window.scrollY > 100 ? scrollTop.classList.add('active') : scrollTop.classList.remove('active');
}
}
scrollTop.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
window.addEventListener('load', toggleScrollTop);
document.addEventListener('scroll', toggleScrollTop);
/**
* Animation on scroll function and init
*/
function aosInit() {
AOS.init({
duration: 600,
easing: 'ease-in-out',
once: true,
mirror: false
});
}
window.addEventListener('load', aosInit);
/**
* Initiate glightbox
*/
const glightbox = GLightbox({
selector: '.glightbox'
});
/**
* Frequently Asked Questions Toggle
*/
document.querySelectorAll('.faq-item h3, .faq-item .faq-toggle').forEach((faqItem) => {
faqItem.addEventListener('click', () => {
faqItem.parentNode.classList.toggle('faq-active');
});
});
/**
* Init swiper sliders
*/
function initSwiper() {
document.querySelectorAll(".init-swiper").forEach(function(swiperElement) {
let config = JSON.parse(
swiperElement.querySelector(".swiper-config").innerHTML.trim()
);
if (swiperElement.classList.contains("swiper-tab")) {
initSwiperWithCustomPagination(swiperElement, config);
} else {
new Swiper(swiperElement, config);
}
});
}
window.addEventListener("load", initSwiper);
/**
* Correct scrolling position upon page load for URLs containing hash links.
*/
window.addEventListener('load', function(e) {
if (window.location.hash) {
if (document.querySelector(window.location.hash)) {
setTimeout(() => {
let section = document.querySelector(window.location.hash);
let scrollMarginTop = getComputedStyle(section).scrollMarginTop;
window.scrollTo({
top: section.offsetTop - parseInt(scrollMarginTop),
behavior: 'smooth'
});
}, 100);
}
}
});
/**
* Navmenu Scrollspy
*/
let navmenulinks = document.querySelectorAll('.navmenu a');
function openModal(title, description) {
document.getElementById('modalTitle').innerText = title;
document.getElementById('modalDescription').innerText = description;
document.getElementById('designModal').style.display = 'block';
}
function closeModal() {
document.getElementById('designModal').style.display = 'none';
}
// Close the modal when clicking outside of it
window.onclick = function(event) {
if (event.target == document.getElementById('designModal')) {
closeModal();
}
}
function navmenuScrollspy() {
navmenulinks.forEach(navmenulink => {
if (!navmenulink.hash) return;
let section = document.querySelector(navmenulink.hash);
if (!section) return;
let position = window.scrollY + 200;
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
document.querySelectorAll('.navmenu a.active').forEach(link => link.classList.remove('active'));
navmenulink.classList.add('active');
} else {
navmenulink.classList.remove('active');
}
})
}
window.addEventListener('load', navmenuScrollspy);
document.addEventListener('scroll', navmenuScrollspy);
})();
[So in my css code i have this section. In that section i have two lines, Visibility and opacity,
Original:
Visibility: hidden
Opacity: 0
New Code:
Visibility: visible
Opacity: 1
Changing only those two lines actually make the box appear but looks weird](https://i.sstatic.net/nCMKW8PN.png)
