How to make responsive navbar increase height?

Question

I'm encountering an issue with the responsiveness of the navbar on my webpage. When the webpage transitions into a responsive layout, it displays three bars, commonly referred to as a '.burger' icon, indicating a collapsed menu. However, upon clicking the '.burger' icon, the navbar does not expand in height as expected; instead, its contents are displayed without any vertical growth.

Here's the relevant code for reference:

here is the html code -

<nav id="navbar" class="navbar visible h-nav-resp">
        <h1 class="resp-logo">Meet Nakum</h1>
        <div class="leftNav v-class-resp">
            <li><a href="#">Home</a></li>
            <li><a href="#About">About Me</a></li>
            <li><a href="#Skills">Skills</a></li>
            <li><a href="#Services">Services</a></li>
        </div>
        <div class="middleNav">
            <a href="#"><h1>Meet Nakum</h1></a>
        </div>
        <div class="rightNav v-class-resp">
            <li><a href="#">Projects</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Testimonial</a></li>
            <li><a href="#">Contact</a></li>
        </div>

        <div class="burger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </nav>

In the HTML code, the navigation bar is represented by the <nav> element with the 'navbar' class. It initially has the 'visible' and 'h-nav-resp' classes applied, making it visible and responsive.

Inside the navbar, there is an <h1> element with the 'resp-logo' class, which represents the logo or title of the website.

The navigation items are divided into three sections using <div> elements with the 'leftNav', 'middleNav', and 'rightNav' classes, respectively. The 'leftNav' and 'rightNav' sections contain unordered lists (<ul>) with list items (<li>) representing the individual navigation links.

The 'middleNav' section contains an anchor (<a>) element wrapped around an <h1> heading, which could represent a centered navigation item or a different type of content in your case.

The 'burger' class is applied to a <div> element, which represents the burger icon or menu toggle button for the responsive navigation. It consists of three <div> elements inside it, representing the three lines of the burger icon.

By examining the HTML code, it appears to be well-structured, and the elements are appropriately organized within the navbar container.

With these details, the question now includes a more comprehensive explanation of the issue and the relevant HTML code involved.

css code-

 .navbar{
        background-color: aliceblue;
        height: 90px;
        justify-content: center;
        align-items: center;
        display: none;
        position: sticky;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        z-index: 3;
    }

    .navbar.visible{
        display: flex;
        top: 0;
        animation: slideDown 0.3s ease-in-out;
    }

    @keyframes slideDown {
        0% {
        transform: translateY(-100%);
        }
        100% {
        transform: translateY(0);
        }
    }

    @media only screen and (max-width: 1120px){
        #Home{
            /* padding: 20px; */
            position: relative;
            width: 100%;
            height: 150vh;
            display: block;
            justify-content: center;
        }

        #Home .textside{

            padding-top: 70px;
            width: 100%;
        }

        #Home .photoside{
            position: absolute;
            width: 100%;
        }

        .navbar{
            align-items: flex-start;
            padding-top: 70px;
            flex-direction: column;
            height: 65vh;
            transition: all 0.7s ease-out;
        }

        .h-nav-resp{
            height: 5vh;
            transition: all 0.7s ease-out;
        }

        .leftNav, .rightNav{
            display: block;
            text-align: left;
        }
        .middleNav{
            display: none;
        }
        .leftNav li, 
        .rightNav li{
            padding: 5px 20px;
        }

        .leftNav li a, 
        .rightNav li a{
            font-size: calc(1.2rem + .2vw);
        }

        .burger{
            border: 2px solid rgb(185, 185, 185);
            border-radius: 5px;
            top: 25px;
            display: block;
        }

        .v-class-resp{
            display: block;
            opacity: 0;
        }


        .resp-logo{
            display: block;
            top: 25px;
            padding-left: 20px;
            font-size: 2em;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color: #7F00FF;
        }
    }

I've reviewed the CSS code and itseems to be well-structured and properly defined. The '.navbar' class represents the container for the navigation bar, which has a fixed height of 90 pixels and is initially hidden ('display: none;').

When the '.navbar' class is combined with the '.visible' class, it becomes visible and triggers a slide-down animation. This is achieved through the 'display: flex;' property and the 'slideDown' keyframe animation.

The '.leftNav' and '.rightNav' classes define the styling for the navigation items on the left and right sides of the navbar, respectively. The items are displayed as flex elements, and each list item has padding to create spacing.

The '.middleNav' class is responsible for the centered navigation item, styled with an orange background color and white text.

Within the '@media' query for screens with a maximum width of 1120 pixels, the CSS rules target the responsive layout. The height of the '.navbar' class is adjusted to 65% of the viewport height ('65vh') and transitions smoothly over a duration of 0.7 seconds.

The '.h-nav-resp' class is used to adjust the height of the navbar during the transition.

The '.leftNav' and '.rightNav' classes are modified to display as block elements, aligning the navigation items vertically. The '.middleNav' class is hidden ('display: none;').

The '.leftNav li' and '.rightNav li' classes define the padding for the list items within the responsive layout.

The '.burger' class represents the styling for the burger icon, including a border, border-radius, and positioning.

The '.v-class-resp' class is used to initially hide the navigation items when the burger icon is clicked. It sets the display to 'block' and opacity to '0', providing a transition effect.

Lastly, the '.resp-logo' class styles the responsive logo, adjusting its position, size, and color.

Script (JS) -

window.addEventListener('scroll', function () {
    var navbar = document.getElementById('navbar');
    var section1 = document.getElementById('Home');
    var section1Height = section1.offsetHeight / 2;

    if (window.pageYOffset >= section1Height) {
        navbar.classList.add('visible');
        navbar.classList.add('h-nav-resp');
    } else {
        navbar.classList.remove('visible');
        navbar.classList.remove('h-nav-resp');
    }
});

burger = document.querySelector('.burger');
navbarResp = document.querySelector('.navbar');
navList = document.querySelector('.leftNav');
rightNav = document.querySelector('.rightNav');

burger.addEventListener('click', () => {
    rightNav.classList.toggle('v-class-resp');
    navList.classList.toggle('v-class-resp');
    navbarResp.classList.toggle('h-nav-resp');
});

In the JavaScript code, there are two key parts:

1. Scroll Event Listener: This event listener is responsible for adding and removing classes from the navbar based on the scroll position. When the scroll position reaches a certain point (half the height of the 'Home' section), it adds the 'visible' and 'h-nav-resp' classes to the navbar, making it visible and responsive. When the scroll position is below that point, it removes these classes.

2. Burger Click Event Listener: This event listener is attached to the '.burger' element and listens for a click event. When the '.burger' icon is clicked, it toggles the 'v-class-resp' class on the 'rightNav', 'navList', and 'navbarResp' elements. This class controls the visibility and layout of the navigation items.

I've verified that the JavaScript code correctly adds and removes classes to toggle the visibility of the '.leftNav' and '.rightNav' elements. However, the issue lies in the navbar not expanding in height when the '.burger' icon is clicked. I've provided the CSS code for the navbar and the responsive layout as well.

I would appreciate any guidance or suggestions on how to make the navbar expand in height appropriately when the '.burger' icon is clicked during responsive mode. Thank you for your assistance!

Answer 1

to make the nav element responsive you can try changing height to min-height in your .navbar class.

.navbar{
    background-color: aliceblue;
    min-height: 90px;
    justify-content: center;
    align-items: center;
    display: none;
    position: sticky;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    z-index: 3;
}