Hamburger menu, how to open div in mobile screen?-CodePudding

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!

CodePudding user response：

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;}

CodePudding user response：

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;
}