CODEWITHSUNDEEP
htmlcssoverflownavbarhamburger-menu
Rahul Ahire
Rahul Ahire

Reputation: 825

How to make responsive navbar hamburger icon work properly without extending with more than 100vw?

Hi there i was working on my project and really wanted to make a responsive navbar with hamburger icon on the right side. To make this happen i was following a tutorial on youtube for making it.

Everything really went fine until I tested that code on my mobile device once it got deployed online. I really got an issue. Please check the demo of this project here and link of actual site : http://navbar-collfm.s3-website-us-east-1.amazonaws.com/ (try viewing it in mobile view)

If i double tap the screen, it just gets zoomed out and everything looks weird and height extends more than 100vh and same goes for width as well.

What changes should I make in following code to make it work correctly?

Index.html

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        <nav>
            <div class="logo">
                <h3>College Facemash</h3>
            </div>
                <ul class="nav-links">
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Login / Signup</a></li>
                </ul>
           <div class="burger">
               <div class="line1"></div>
               <div class="line2"></div>
               <div class="line3"></div>
           </div>
        </nav>

        <script>
const navslide = () =>{
    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.nav-links')
    const navLinks = document.querySelectorAll('.nav-links li')
    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active')

        navLinks.forEach((link, index) => {
            if(link.style.animation){

                link.style.animation = '';
            }else{
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;

            }
        });

        burger.classList.toggle('toggle')

    })


}

navslide();
</script>

    </body>
    </html>

and Style.css

 @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav{
    display:flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    font-family: 'Poppins', sans-serif;
    background-color:#512da8;

}

.logo{
    color:white;
    font-size: 1.5rem;
}
.nav-links{
    display:flex;
    justify-content:space-around;
    width: 35%;
}
.nav-links li{
    list-style: none;
}
.nav-links a{
    text-decoration: none;
    color: white;
    font-weight:bold;
    font-size: 1rem;
}
.burger{
    display:none
}
.burger div{
    width:25px;
    height: 2px;
    margin:5px;
    background-color: white;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px){
    .nav-links{
        width: 40%;
    }
}

@media screen and (max-width: 640px){

    body{
        overflow-x: hidden;

    }

    .nav-links{

        position:absolute;
        right: 0px;
        height: 92vh;
        top:8vh;
        background-color: #512da8;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-out;

    }

    .nav-links li{
       opacity: 0;
    }
    .burger{
        display: block;
        cursor: pointer;
    }

    .nav-active{
        transform: translateX(0%);
    }

    @keyframes navLinkFade {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to{
            opacity: 1;
            transform: translateX(0px);
        }

    }

    .toggle .line1{
        transform: rotate(-45deg) translate(-5px,5px);


    }
    .toggle .line2{
        opacity: 0
    }
    .toggle .line3{
        transform: rotate(45deg) translate(-5px,-5px);

    }

}

Upvotes: 0

Views: 604

Answers (1)

Fr0zenFyr
Fr0zenFyr

Reputation: 1939

Use the <meta /> tag for viewport to control this. To disallow any zoom on the page, set the minimum and maximum scales to 1.00 each along with user-scalable=no and target-densityDpi=device-dpi (to avoid browser misbehavior on high density screens like retina displays). Replace your meta tag with the below:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />

Note: Although this feature is widely supported across mobile platforms, limiting minimum/maximum boundaries cannot be simply guaranteed to work on every platform.

You can also check the viewport CSS descriptor which support min-zoom and max-zoom according to a working draft on css device adaptation. Again, reliability on this should be lower compared to the former approach.

Upvotes: 2

Related Questions