Getting the Height of Navigation bar dynamically in CSS
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 C...