'Header won't change size and position when I open full page menu

I can't seem to change my header size and position when my menu opens. I would like to move the header up and decrease the size. Instead of doing that, when I toggle the menu button, the header simply moves left. Can someone please help and explain? I've been stuck on this for the past two days. Thank you!

HTML:

    <body onload="myFunction()" style="margin:0;">

    <!-- Loader -->
    <div id="loader">Montée</div>

    <!-- Homepage -->
    <div style="display: none"; id="myDiv" class="container">
        <header>
        <h1 class="header">Montée</h1>
        </header>
        
        <!-- navigation -->
        <nav class="navbar">
            <div class="hamburger-menu">
                <div class="line line-1"></div>
                <div class="line line-2"></div>
                <div class="line line-3"></div>
            </div>

            <ul class="nav-list">
                <li class="nav-item"><a href="#" class="nav-link">Tops</li>
                <li class="nav-item"><a href="#" class="nav-link">Bottoms</li>
                <li class="nav-item"><a href="#" class="nav-link">Shoes</li>
                <li class="nav-item"><a href="#" class="nav-link">Contact</li>  
            </ul>
        </nav>

    </div>

<script src="script.js"></script>
</body>

This is my CSS:

    .header {
    font-family: Garamond;
    color: white;
    font-size: 100px;
    letter-spacing: 5px;
    font-weight: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.change .header {
    font-size: 30px;
    top: 30px;

}

.navbar {
    width: 0%;
    height: 100%;
    background-color: rgba(218,225,233,255) ;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.change {
    width: 100%;
}

I included my nav css in case I did something wrong there that messes with the header but the navigation works.

Lastly, my JS:

 const menuIcon = document.querySelector (".hamburger-menu");
const navbar = document.querySelector(".navbar");
const header = document.querySelector(".header");

menuIcon.addEventListener('click', () => {
    header.classList.toggle("change");
});

menuIcon.addEventListener('click', () => {
    navbar.classList.toggle("change");
});
javascripthtmlcssnavigationheader


Solution 1:[1]

Ok.so there is a problem with your code : You add an eventListener to menuIcon and the resault is to make h1.header to h1.change... Right? And in your css : .change .header{}so what is this bro? There is not any .header in your .change

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions