javascript - How to set a div's height equal to 100vh - responsive navbar height when it changes height?

Question

i'm creating a website and want to have a hero image that takes up 100% height of the viewport at different device heights.

I have used the vh property in CSS to set both the bootsrap navbar and hero image to 100% of the viewport height, which has worked as intended but I think it's has some unintended consequences.

In a mobile view when I click the toggler to bring the mobile navbar down the height of the hero image adjusts, but when I try to close the navbar again the toggler completely dissapears, I think this is because of the hero image then trying to take the entirety of the viewport height not leaving space for the toggle icon?

The 100vh also means that the navbar cannot be sticky, when the screen scrolls past the hero image the navbar stays - it cannot pass the hero image.

I'm assuming both these issues stem from them both being encased in a 100vh div together, but have tried to find a solution to no avail.

Is there another workaround for what I am trying to achieve that would be better practice, or is there something I have done wrong in my markup.

HTML

   <!-- Creates section for navbar and the hero image to take up 100% of the height of viewports - responsive and works at all screen sizes -->
    <div class="landingBanner">
        <!-- open the navbar -->
        <nav class="navbar navbar-expand-md" id="home">
            <!-- set content of the navbar fluid -->
            <div class="container-fluid">
                <!-- set the content of the navbar to width 80% -->
                <div class="content" id="navbarContent">
                    <!-- hamburger button that appears in medium screens - click to toggle navbar so that it does not take up so much room on mobile devices -->
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                        <!-- font awesome hamburger icon -->
                        <i class="fas fa-bars"></i>
                    </button>
                    <!-- everything inside div is toggleable with the button -->
                    <div class="collapse navbar-collapse" id="navbarContent">
                        <!-- mx-auto centers the navbar -->
                        <ul class="navbar-nav mx-auto">
                            <li class=" nav-item ">
                                <a class="nav-link" href="index.html">Home</a>
                            </li>
                            <li class="nav-item ">
                                <!-- One page referenced by using the ID of the target section -->
                                <a class="nav-link" href="#aboutUs">About Us</a>
                            </li>
                            <!-- drop down for acquisition criteria -->
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#whatWeDo" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">What We Do</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                    <li><a class="dropdown-item" href="#whatWeDo">Information</a></li>
                                    <li><a class="dropdown-item" href="acquisitionCriteria.html">Acquisition Criteria</a></li>
                                </ul>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link" href="#theTeam">The Team</a>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link" href="#contactUs">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <!-- End of navbar -->
        <!-- Beginning of hero image -->
        <section class="banner">
            <div class="content bannerContent">
                <!-- Puts logo to the responsive width of content -->
                <img src="img/logo.png" alt="organization logo" id="logo">
                <!-- div for arrow centers the arrow and puts it at the bottom of the div - responsive -->
                <div class="arrow">
                    <!-- font awesome arrow -->
                    <a href="#aboutUs"><i class="fas fa-angle-down"></i></a>
                </div>
            </div>
        </section>
        <!-- end of hero image -->
    </div>
    <!-- end of responsive landing section -->

CSS

/*
*
*      navigation bar, branding and landing hero image
*
*/


.landingBanner {
    height: 100vh;
    width: auto;
}


.navbar,
.navbar-nav {
    background-color: black;
    text-align: center;
}


.navbar {
    padding-top: 1%;
    padding-bottom: 1%;
}

.navbar-brand {
    color: #EA1830;
    text-decoration: none;

}

.nav-link {
    color: white;
    margin-left: 5px;
    margin-right: 5px;
}

.nav-link:hover {
    color: #EA1830;
    font-weight: bold;
}

.dropdown-menu {
    background-color: black;
}

.dropdown-item {
    color: white;
}

.dropdown-item:hover {
    color: #EA1830;
    font-weight: bold;
    background-color: black;
}

.fa-bars {
    color: white;
    font-size: 30px;
}

#logo {
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.banner {
    background-image: url("../../img/banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: auto;
}

.bannerContent {
    padding-top: 5%;
    text-align: center;
    align-content: center;
    color: #EA1830;
}

.bannerContent h1 {
    font-size: 350%;
    padding-bottom: 5%;
}


.arrow {
    position: absolute;
    bottom: 0px;
    left: 50%;
}

.fa-angle-down {
    font-size: 300%;
    color: #EA1830;
}

Would really appreciate any help that someone may be able to provide, and hope it makes sense what i'm trying to achieve!

question from:https://stackoverflow.com/questions/65901895/how-to-set-a-divs-height-equal-to-100vh-responsive-navbar-height-when-it-chan

Answer 1

Waitting for answers