How to show hamburger menu only on mobile?

Question

I'm currently trying to create a responsive navigation which is only a hamburger menu when on a mobile/tablet but am unsure how to hide it and stop it from working when it's on desktop. This is my first time playing around with CSS so it's a bit messy. The * is where the @media was when I was trying to get it to work. As I didn't know what to do I messed around with display:none but unsurprisingly it hid the entire navigation. There is quite a bit more wrong with this but i'm fixing it a step at a time. Unfortunately, I did this before I found out that mobile-first would have been better.

   .button{
            background-color: inherit;
            border:none;
            color: #4054b4;
            padding: 64px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            font-family: 'Lato' , sans-serif;
            transition:0.3s;
            }
        .dropdown {
            float:center;
            overflow:hidden;
            display:inline-block;
            }
            
        .button:hover, .button:hover {
            background-color: #4054b4;
            color: #ffffff;
            }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #4054b4;
            width:100%;
            left: 0;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            
            }
        .dropdown:hover .dropdown-content {
            display: block;
            }
        .colum {
            float: left;
            width:25%;
            padding: 10px;
            background-color: #4054b4;
            height: 250px;
            }
        .colum a {
            float: none;
            color: white;
            padding: 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            font-family: 'Lato' , sans-serif;
            }
        
        .colum a:hover {
            background-color: #4054b4;
            
            }
            
        .col {
            float: right;
            width:25%;
            padding: 10px;
            background-color: inherit;
            height: 250px;
            }
        .col a {
            float: none;
            color: inherit;
            padding: 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            font-family: 'Lato' , sans-serif;
            }
        
        .row:after { 
            content: "";
            display:table;
            clear: both
            }
        
        
        
         ****   
            
            
            .open {
                float:right;
                color:#4054b4;
                margin:1em 0 0 1em;
                cursor:pointer;
                display:block !important;
        
            }
            
            .nav{
                width: 0;
                height: 100vh;
                z-index: 3;
                position: fixed;
                overflow: hidden;
                background-color: #4054b4;
                transition: 0.3s;
            }
            .nav a {
                display: block;
                color: #ffffff;
                padding: 1em 0;
                transition: 0.4s;
            }
            .close {
                float: center;
                margin: 1em 0 0 1em;
            }
        ****
            </style>
            <body>
                <div class="w3-container" style="box-shadow:0 0.4% 0.8% rgba(0,0,0,0.2)">
                
                    <div class="w3-bar w3-white ">
                        
                        <div class="wrapper ">
                            
                            <div class="nav " id="nav">
                                <a href="javascript:void(0)" class="close " onclick="closeNav()">&times;</a>
                                
                    <div class="dropdown ">
                    <button class="button dropdown"> Button </button>
                    <div class="dropdown-content ">
                        <div class="header ">
                            <h2 style="color:white"> Header </h2>
                        <div class="row ">
                            <div class="colum ">
                            <a href="#"> Page </a>
                            
                            </div>
                            </div> 
                        </div>
                    </div>  
                    </div>
                    <div class="dropdown ">
                    <button class="button dropdown "> Button</button>
                    <div class="dropdown-content ">
                        <div class="header ">
                            <h2 style="color:white"> Header </h2>
                            <div class="row ">
                            <div class="colum ">
                            <a href="#"> PAge </a>
                            
                            
                            </div> 
                        </div>
                    </div>  
                    </div>  
                   
                    
                    </div><span id="open" class="open " onclick="openNav()">&#9776</span>
                </div> 
                    
                
                </div>
                <script>
                function openNav() {
                document.getElementById("open").style.display = "none";
                document.getElementById("nav").style.width = "100%";
                }
                function closeNav(){
                
                document.getElementById("open").style.display = "block";
                document.getElementById("nav").style.width = "0";
                }
                    </script>

Kameron · Answer 1 · 2022-08-18T14:15:37.010

Start with Bootstrap and here: https://getbootstrap.com/components/#navbar). It makes this kind of thing really simple and stops you from reinventing the wheel.

To do what you are wanting you will need to set CSS media queries for the correct display. This is exactly what bootstrap does.

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

If you want to do it yourself I would start with learning about media breakpoints and look at Bootstrap hamburger menus:

Bootstrap 5

Bootstrap 4

score 0 · Answer 2 · answered Sep 26 '21 at 04:39

0

That would be better if you could dynamically add the hamburger menu by checking if device type is mobile or tablet, not just hide and show with css, so i found something you might be interested if you not yet know. Look at this

Thank you, this is my first action in stackoverflow

answered Sep 26 '21 at 04:39

A.Anvarbekov

955
1
7
21

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 26 '21 at 06:29

How to show hamburger menu only on mobile?

2 Answers2