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

The button I have controls two spans with distinct identifiers

When I press the player 1 button, it changes the score for both players. I also attempted to target p2display with querySelector("#p2Display"), but it seems to be recognized as a nodeList rather than an element. var p1button = document.querySelector("# ...

javascripthtml

The componentDidMount function is not initializing the state

I am trying to access the references from the render function and then set them to the state. Below is my code snippet: class App extends Component { constructor(props) { super(); this.arr = this.generateTimelineArray(); ...

javascriptreactjsstate

Creating a dynamic word cloud in D3: Learn how to automatically adjust font sizes to prevent overflow and scale words to fit any screen size

I am currently utilizing Jason Davies' d3-cloud.js to create my word cloud, you can view it here 1. I'm encountering an issue where the words run out of space when the initial window size is too small. To address this, I have a function that cal ...

javascriptcssangularjsd3.jsword-cloud

Is it possible to modify @page directive(CSS) values from the code-behind(C#) or JavaScript?

Using the @page directive, you can define the printer margins for a page separately from regular CSS margins: <style type="text/css" media="print"> @page { size: auto; /* auto is the current printer page size */ margin ...

javascriptc#jqueryhtmlcss

Using an External Style Sheet on AMP Pages is not allowed

I'm currently in the process of converting my HTML page into AMP Pages. I recently came across a test url on to validate my AMP pages. Here's a screenshot for reference: However, I encountered an issue when trying to use external CSS. <lin ...

htmlcssamp-html

How can I achieve a smooth background-image transition in Firefox?

Currently, I'm on the hunt for a substitute for this specific code snippet: "transition:background-image 1s whatever" This particular transition only seems to function on webkit browsers, leaving Firefox users out of luck. I experimented with utili ...

htmlcssfirefox

Organize Dates in React Table

I need help with sorting the Date column in my code. Currently, the sorting is being done alphabetically. Here is the JSON data and code snippet: JSON [ { "date": "Jun-2022" }, { "date": "Jul-2022" } ...

javascriptreactjstypescriptreact-hooks

Eliminate any empty spaces between the HTML tags

Is there a way to remove spaces between characters inside HTML tags? For example <option value="0" title="Advertising / Promotional Charges">Advertising / Promotional Charges</option> I tried using this code .replace(/\>\s+&bs ...

jqueryhtml

What are the possible complications that could arise from implementing this system for designing web pages?

Feeling frustrated with the limitations and compatibility issues of CSS, I decided to create a new approach for structuring webpages. Instead of relying on CSS, I developed a javascript library that reads layout instructions from XML files and uses absolut ...

javascriptcssweb-applications

Unable to bring in @material-ui/core/styles/MuiThemeProvider

I'm currently working on a React project that utilizes Material UI React components. My goal is to import MuiThemeProvider in src/index.js with the following code snippet: import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; . H ...

javascriptreactjsmaterial-uiyarnpkg

Toggle the visibility of 2 Form Fields by checking the Checkbox

Hi, I am trying to display two form fields when a checkbox is selected. These fields are required, so they should only be displayed when the checkbox is checked and should be mandatory. However, I am facing issues with hiding the fields when the checkbox i ...

jqueryhtmlformsshow-hiderequired

Having trouble resolving React within the Formik/dist package due to a custom webpack configuration

Struggling to set up projects from scratch, encountering an issue with webpack not being able to resolve formik's modules while other third-party modules like styled-components work fine. I've tried searching online for a solution but couldn&apos ...

reactjstypescriptwebpackformik

Only the initial value is being processed in the for loop using Javascript

I am having issues trying to sum the values within a for loop sourced from my Django database using JavaScript. Currently, when I iterate through the loop, only the first value in the array is returned. I need assistance in finding a solution that allows ...

javascripthtmldjangomath

When using React / Next.js, the .map() function may not rerender the output based on changes in the state array if the keys remain the same

In my react component, Matches.js, I handle the display of tournament matches sorted by rounds. The data is fetched from a parent component through nextjs SSR and passed as props to the child component. To avoid unnecessary requests upon data changes like ...

javascriptreactjsnext.js

Creating AngularJS variables with dependencies on integer values

Hello, I am a brand new developer and I am currently working on creating an expenses calculator. The goal is to have the sum of inputted integers from a table, each with a default value, become the integer value of another variable. However, I seem to be m ...

javascriptangularjshtmlscopedata-modeling

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

cssvue.jsstyles

React - How to properly pass a reference to a React portal

I have a Card component that needs to trigger a Modal component. Additionally, there is a versatile Overlay component used to display content above the application. Displayed here is the App component: class App extends Component { /* Some Code */ ...

javascriptreactjsreduxportal-system

Setting up your configuration for create-react-app once you have ejected to start building your very own component library

As I embarked on creating a component library to publish on NPM and reuse in various apps, I decided to start by developing a React app with the help of create-react-app. However, it quickly became apparent that the default configuration of create-react-ap ...

reactjsnpmwebpackcreate-react-app

Material Design - Adjustable Sidebar

Looking for advice on creating a reactive Appbar and Drawer. Can anyone provide guidance or examples? The goal is to have the drawer dynamically undock and hide when the browser is small, and dock the drawer when larger. Ideally, this would work similar t ...

reactjsmobileresponsive-designmaterial-designmaterial-ui

Connect the AngularJS data model with a Foundation checkbox element

I am attempting to link a model (a boolean value) to a checkbox created with Foundation (Zurb). I have created a small demonstration displaying the issue: http://jsfiddle.net/JmZes/53/ One approach could involve simply creating a function that triggers o ...

javascriptjqueryhtmlangularjszurb-foundation