is there anyone can help me with this without change everything?
I can't understand why the sublists in my hamburger menù doesn't work in mobile responsive screen, plus I need the hover on lists of the navbar in large desktop screen.
Here's my repo: https://github.com/marco95OP/blogr-landing-page-main.git
Here's my landing page: https://marco95op.github.io/blogr-landing-page-main/
Thanks in advance!
USe simple javascript trick for your menu. Add the below script inside your javascript file.
let navLink = document.querySelectorAll('ul.nav-link');
navLink.forEach((eachLink)=>{
eachLink.addEventListener('click',(event)=>{
(!eachLink.classList.contains('active'))? eachLink.classList.add('active'):eachLink.classList.remove('active');
});
});
// include this line of css inside the style file - ul.nav-link.active .dropdown-menu {display:block;}
To make it work you can use css to affect other classes, here an example based on your website:
<button class='select-btn'>My hover affects my bro</button>
<div class='dropdown-menu'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</div>
css:
.select-btn {
background: red;
height: 100px;
width: 100px;
}
.select-btn:focus ~ .dropdown-menu {
display: flex;
flex-direction: column;
}
.dropdown-menu {
background: blue;
height: 100px;
width: 100px;
transition: all 100ms ease-in-out;
display: none;
}