ivy-walobwa/responsive-pure-css-menu

Create a responsive mobile menu with CSS without JavaScript- repo for LogRocket Article

Responsive mobile menu with CSS only

Views

Demo

css.mp4

responsive-pure-css-menu's Issues

submenus

Hide navigation when you navigate in mobile device

Hi,

Thanks for the awesome tutorial. I have a query and issue. I implemented your hamburger style nav for mobile devices but the problem with that whenever i click one of the nav in mobile, it doesnt disappear. I am using NuxtJS framework based on VueJs. I can do it programatically when i click one of the nav link, I check the checkbox. But is there any other option you could hide that nav overlay.

Screenshot Attached:

[Question] X/Hamburger icon?

Where does the X and Hamburger (3 lines) icon come from? Seems like "magic"...?

Menu items get below nav menu on firefox

On firefox the menu items get below the nav because firefox does not interpret correctly width: property
i added the following two extra width to make sure it will be compatible with most devices.

Added the following code:

        width: -moz-fit-content;
        width: -webkit-fit-content;

Like this:

 @media (min-width: 768px) {
     .nav{
         max-height: none;
         top: 0;
         position: relative;
         float: right;
        
         width: -moz-fit-content;
         width: -webkit-fit-content;
       
         width: fit-content;
 
         background-color: transparent;
 
     }

Before fix

Menu:

Devtools:

After fix

Menu: