Determining the Height of a Navigation Bar Automatically with CSS

My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically.

I thought that using 

calc(100vh - heightOfNavigationBar)
could fix this issue. But, I struggled to find a way to dynamically retrieve the height of the .navbar. Is there a solution for this? (Keep in mind that the navbar is part of react-strap).

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>
htmlcssreactjsoverlay

Answer №1

Learn How to Easily Adjust Navbar Height

Add ID "navbar" to Your Navigation Bar

Use JavaScript to Dynamically Set Property Value:

document.documentElement.style.setProperty('--nav-height', document.getElementById("navbar").offsetHeight);

Utilize the Property in Your CSS:

For example:

:root {
    --nav-height: 70px; /*Always Provide a Default Fallback Value*/
}

.container-fs{
    width: 100vw;
    height: calc(100vh - var(--nav-height));
}

How Does This Code Work?

document.getElementById("navbar").offsetHeight

This Line of Code Retrieves and Stores the Height of the Nav Element by Using Its ID

document.documentElement.style.setProperty();

This Line Sets a Custom CSS Property (Variable) with the Height of the Navbar as its value

var(--nav-height)

This CSS Function Returns the Value of the Custom Property (Navbar Height)

Answer №2

If you choose to use position: absolute, your solution will be similar to the following:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on utilizing Material UI Fade for smoothly fading in a component when a text field is selected

I am facing an issue with a text field input and a helper component. My goal is to have the helper component fade in when a user focuses on the input field. The helper component is wrapped as follows: <Fade in={checked}> <DynamicHelperText lev ...

javascriptreactjstypescript

Recording a message from an HTML input using NodeJS and socket.io

I am currently working on a project where I want to log user input from an input box to the NodeJS console. For example, if a user types "Hello world" into the input box and clicks "Send message to console", I want it to show up as "Hello world" in the con ...

javascripthtmlnode.jssocket.io

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Setting the user's current location on my website has been a challenge. Using Java Script to obtain the geographical coordinates (longitude and latitude) was successful, but converting them into an address format proved tricky. My solution involved le ...

javascriptjqueryhtmlgeolocation

Is it possible to have multiple ReactDOM.render calls in a single project

Currently, I am in the process of learning react and encountering an issue when trying to call multiple ReactDOM.render functions: Here is my code using React: class Header extends React.Component{ render(){ return( <div> <p&g ...

reactjs

PHP mistakenly outputs content that is not enclosed within tags

After discovering StackOverflow, I couldn't resist sharing my PHP code conundrum with the incredible community here! So, in a WordPress template, I have this chunk of PHP: echo '<div class="thumbnail">'; echo the_post_thumbnail(); ec ...

phpjqueryhtmlcsswordpress

What are the most effective methods for utilizing React child components?

I have a particular interest in how to efficiently pass information along. In a different discussion, I learned about the methods of passing specific props to child components and the potential pitfalls of using <MyComponent children={...} />. I am ...

javascriptreactjsjsx

Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made: drop-down-cell-renderer.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-drop-down-cell-renderer', templateUrl: './drop-down-cell-r ...

angularhtmlcssbootstrap-4

Please replace the text with only letters and then submit it without any spaces, periods, commas, or other symbols

Whenever I encounter a form like this, I need to submit it and replace the text in the name field with only letters - no commas, spaces, or special characters. https://i.sstatic.net/9FQnT.png myform.html <script> function fixInput(event) { na ...

javascripthtmlregex

Customizing PrimeReact Styles

I've been on a quest to find the perfect solution for customizing the default 'Nova' theme used in Prime React. While I know there is a theme designer available for purchase, I'd prefer not to go that route. In the past, I found myself ...

htmlcssreactjssassprimereact

Touch Screen Button Interaction

Planning to create a Kiosk website with HTML5 that includes point and drag & drop functionality. The site will have buttons and images for user interaction, with actions triggered by finger touches on the screen instead of mouse clicks. Would it be more ...

javascriptjqueryhtml

Ensure that PHP form validations are checked when submitting the form using jQuery

I have created a form in HTML with basic verification. Here is the code: <form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form"> <input class="form- ...

javascripthtmljquery

How can I dynamically update a div without refreshing the page by using an onclick event on a

When working on my project, I found helpful insights from this Stack Overflow thread. The structure of template-comparison.php involves fetching code from header.php to ensure the page displays properly. However, the actual "fetch code" process remains un ...

javascriptphpjqueryhtml

Requiring a page refresh in order to update the navigation menu based on custom claims set in ReactJS and Firebase

I have been delving into a project that requires Firebase custom claims with admin and user roles. I've managed to get it operational. Upon an admin logging in, the admin navigation bar displays; for regular users, the user navigation bar shows up. ...

reactjsfirebasefirebase-authenticationrouter

Troubleshooting Div Element Width in CSS Not Functioning

When working on a form design, I encountered an issue where the text labels were not aligning to the same width. Despite setting the width, it didn't seem to work as expected: .form-label { display:inline; width: 160px; } <div class="form-label ...

htmlcsswidth

Why is it that jQuery is not working in Internet Explorer but works fine in Firefox?

Below is the code for handling file upload onchange event: <input type='file' onchange="displayFilePath(this);" id="loadfile" /> This text field will display the full path of the uploaded file. <script type="text/javascript"> fun ...

jqueryhtml

Tips for sending custom properties to Material-UI component via makeStyles/withStyles

Is there a way to pass custom props to an MUI component? For example, if I want to set the background color of a component using customProps='red', how can I achieve this? I specifically need to change the background color of a button, and I was ...

reactjsmaterial-uistyled-components

Tips for transferring input values from a JavaScript function to a separate PHP page for storage in a database

This code snippet allows dynamic rows to be added to a table when the add button is clicked. Now, the goal is to retrieve the values entered into the text boxes and submit them to the database. <div id="addinput"> <p> <button name=" ...

javascriptphpjqueryhtmlajax

The issue of Storybook webpack failing to load SCSS files persists

I'm running into an issue where my styles are not loading in Storybook, even though I'm not getting any errors. Can someone help me out? My setup involves webpack 2.2.1. I've scoured Stack Overflow and GitHub for solutions, but nothing seem ...

javascriptreactjswebpacksassstorybook

Bootstrap4 lacks responsiveness

html, body { background-color: #E3E3E3; width: 100%; height: 100%; margin: 0; padding: 0; } /* Custom Styling */ .section1 { background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed; -webkit-background-size: cover ...

htmlcssbootstrap-4

The functionality of the click event attached with the addEventListener is

I have a unique project where I am developing a user interface for a paper-rock-scissor game. To create the UI, I included four buttons: "Start game," "rock," "paper," and "scissor." Initially, I wrote separate code for each button, which worked perfectly ...

javascripthtmlcss