Responsive navbar blocks body content once it’s opened

Before you try to make a solution make sure responsive toolbar is enabled on your chrome browser. I am trying to first make the responsive design for mobile then for desktop. But I am having this problem where I open the hamburger menu and the navbar blocks my content. I tried to fix this by doing position: relative; but I want to make the navbar fixed so when I scroll it’s up there. Also when I click the hamburger menu while I am scrolling it just comes back to the top. Please help me

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
})

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&family=Oswald&display=swap');
@import url("style.css");
*{
    box-sizing: border-box;
}
body{
    padding-top: 65px;
    margin: 0px;
    background-image: url(images/banner.jpg);
}
/* toggle button desiging */
.toggle-button{
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 30px;
    height: 21px;
}
.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}
/* brand title decoration*/
.brand-title{
    font-size: 32px;
    margin: .5rem;
}
.brand-title a{
    margin-left: 5px;
    font-family: "Jetbrains Mono", sans-serif;
    font-size: 28px;
}
/* navbar decoration */
.navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: black;
    color: white;
    position: fixed;
    top: 0;
    flex-direction: column;
    align-items: flex-start;
}
.navbar-links{
    width: 100%;
    display: none;
}
.navbar-links ul{
    margin: 0;
    padding: 0;
    display: flex;
    font-family: "Jetbrains Mono", sans-serif;
    flex-direction: column;
    width: 100%;
}
.navbar-links li{
    list-style: none;
}
.navbar-links li a{
    text-decoration: none;
    color: white;
    padding: 1rem;
    display: block;
    transition: .4s ease;
    font-size: 15px;
    text-align: center;
}
.navbar-links li a:hover{
    color: crimson;
}
.navbar-links.active{
    display: flex;
    position: relative;
}
.navbar-links ul.active{
    color: black;
}

/* landing page */

.introduction{
    padding: 0px;
    margin: 32px 32px;
    display: block;
    color: white;
}
.introduction .first-text{
    margin: 0px;
    font-family: "Jetbrains Mono", sans-serif;
    font-weight: 100;
    font-size: 6vh;
}
.first-text a{
    font-weight: bold;
}
.introduction .second-text{
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: "Jetbrains Mono", sans-serif;
    font-weight: 600;
    font-size: 4vh;
    color:rgba(255, 255, 255, 0.800);
}
.introduction .third-text{
    margin: 0;
    font-family: "Jetbrains Mono", sans-serif;
    font-weight: 600;
    font-size: 3vh;
    color:rgba(255, 255, 255, 0.800);
}
.btn-hire-me{
    background-color: rgba(0, 255, 255, 0.800);
    padding: 1rem;
    border: 1px solid black;
    margin-top: 32px;
    border-radius: 8px;
    box-shadow: rgba(255, 255, 255, 0.431) 0 2px 4px;
    font-family: "Jetbrains Mono", sans-serif;
    width: 150px;
    height: 75px;
}
.btn-hire-me img{
    position: relative;
    right: 6px;
    height: 16px;
    width: 16px;
}
.btn-hire-me a{
    font-weight: bold;
    font-size: 22px;
}

.btn-hire-me:hover{
    background: crimson;
    color: white;
}
/* my image */
.my-image img{
    display: block;
    margin: auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 3px solid crimson;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <script src="https://use.fontawesome.com/72f2c1bea1.js"></script>
    <title>Talha Bin Hasan ||</title>
</head>

<body>
    <header>
        <nav class="navbar" id="nav">
            <div class="brand-title"><i class="fa fas fa-code"></i><a>Talha Bin Hasan</a></div>
            <a href="#" class="toggle-button">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </a>
            <div class="navbar-links">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <section>
        <div class="introduction">
            <h1 class="first-text">Hello I am <a>Talha Bin Hasan</a></h1>
            <h3 class="second-text">Front End Web Developer</h3>
            <h3 class="third-text">Highly experienced in designing and developing responsive website.</h3>
            <button type="button" class="btn-hire-me"><img src="images/hire-icon.png" alt=""><a>Hire me</a></button>
        </div>
        <div class="my-image">
            <img src="images/myphoto.jpg" alt="Talha Bin Hasan's photo">
        </div>
    </section>
    
</body>

</html>

Answer

When you click on your menu it will jump to the top, because your menu is an a element. Just change it to a div:

<div class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

In order to make the content visible when the menu is opened, you can add a margin to your first section. You can add a check for how far the page is scrolled to prevent adding and removing the margin when opening the menu while scrolled down. Change your .js to:

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
const firstSection = document.querySelector("section:first-of-type")

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
    firstSection.classList.toggle('marginTop');
})

window.addEventListener('scroll', function(){ 

    if(window.scrollY > 100){
        firstSection.classList.add("scrolled");
    }
    else {
        firstSection.classList.remove("scrolled");
    }

});

In your .css (transition to make it a bit more smooth):

section:first-of-type {
    transition-duration: 1s;    
}

section.marginTop:not(.scrolled) {
    margin-top: 200px;
}

Advertisement

Answer