please how use hamburger menu to display all my content on my view alone with out the hamburger show-CodePudding

#mobile{
    display: none;
    align-items: center;
}

#mobile{
        display: flex;
        align-items: center;
    }

now the first display none is to hide hamburger menu from desktop view and second display flex is to show hamburger menu on mobile, now the display none worked but I'm to make it show on mobile with display flex but its not working

I tried display none to hide the hamburger menu from desktop view it worked but I want it show on the mobile view

CodePudding user response：

To use a hamburger menu to display all your content on your view while hiding the menu on desktop view, you can use media queries to detect the screen size and show or hide the menu based on the screen width. Here is an example of how you can do this using CSS:

 /* Style for the hamburger menu */ 
.hamburger-menu {   display: none; /* Hide the menu by default */ }
        
/* Show the hamburger menu on small screens */ 
@media (max-width: 767px) {   
.hamburger-menu {display: block; /* Show the menu */   } 
}

In this example, the hamburger menu has a class of "hamburger-menu" and is hidden by default. The media query specifies that the menu should be displayed on screens with a width of 767px or smaller.

You can adjust the width of the media query to suit your needs. For example, if you want to show the menu on screens with a width of 991px or smaller, you can change the media query to @media (max-width: 991px).

I hope my this answer helps you. If not please be more specific about what you need help with.

CodePudding user response：

Did you try media queries? You can restrict your CSS to apply for certain media only

https://www.w3schools.com/css/css_rwd_mediaqueries.asp