Multi tool use

Getting the Height of Navigation bar dynamically in CSS

My website is based on React and react-strap. Well, I had my .header-overlay to cover the whole entire background in .header. But what is happening here is that because of the .navbar, the .header-overlay sticks out of .header vertically.

.header-overlay

.header

.navbar

.header-overlay

.header

I figured that using calc(100vh - heightOfNavigationBar) would resolve this.
But, I couldn't find any way to get the height of .navbar by dynamically. Is there any way to resolve this? (navbar is embedded in react-strap)

calc(100vh - heightOfNavigationBar)

.navbar

CSS CODE:

.navbar{
font-size: 20px;
}

.header {
background: url("../images/headerbg.jpg") no-repeat 50% 50% fixed ;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
height: 100vh;
}

.header-overlay {
background-color: rgba(31, 31, 31, 0.4);
height: 100vh;
}


HTML CODE:

<header className="header">

{/*Navigation Bar*/}
<div>
<NavBar/> <--from react-strap
</div>


<div className="header-overlay">
SOME CODE HERE
<div>
</header>


1 Answer
1

If position: absolute is an option, your solution would look something like this:

position: absolute

.navbar{
font-size: 20px;
z-index: 1;
}

.header {
background: url("../images/headerbg.jpg") no-repeat 50% 50% fixed ;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
height: 100vh;
position: relative;
}

.header-overlay {
background-color: rgba(31, 31, 31, 0.4);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

<header class="header">
<nav class="navbar">
Navbar
</nav>
<div class="header-overlay">
This is the overlay
</div>
</header>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.