The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Question

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear.

I followed tutorials and examples from w3schools to build my webpage. Specifically:

This code snippet exemplifies my issue:

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navi");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

#navi {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

.drop {
  float: left;
  overflow: hidden;
}

.drop .dropbutton {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 20px 25px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

#navbar a:hover,
.drop:hover .dropbutton {
  background-color: #25aa25;
}

.links {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 210px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.links a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.links a:hover {
  background-color: #ddd;
}

.drop:hover .links {
  display: block;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+article {
  padding-top: 60px;
}

<body>
  <header>
    <h1>
      Example for StackOverflow
    </h1>
  </header>
  <nav id="navi">
    <div class="drop">
      <button class="dropbutton">
                Button - dropdown
            </button>
      <div class="links">
        <a href="">Random link 1</a>
        <a href="">Random link 2</a>
        <a href="">Random link 3</a>
      </div>
    </div>
  </nav>
  <article>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
  </article>
</body>

javascript html css menu sticky

Answer 1

Answer №1

If you're wondering why the dropdown is still visible even when the navbar is not at the top of the screen, it's because of how CSS properties are set.

The navbar has the CSS property overflow set to hidden, which normally prevents content from being visible outside its boundaries. However, the div containing the drop-down links (.links) has position set to absolute, meaning it's taken out of the normal document flow.

According to MDN:

absolute

This means the element is removed from the normal document flow and no space is created for it in the page layout. It is positioned relative to its closest positioned ancestor, or if there isn't one, then it's placed relative to the initial containing block.

Because .links doesn't have any positioned ancestors, its position is relative to the initial containing block.

However, when the navbar reaches the top of the screen, the sticky class is applied. This class mainly sets the position CSS property to fixed (meaning it's out of the document flow and positioned relative to the initial containing block established by the viewport).

With the sticky class applied, .links is now positioned relative to the navbar itself, making it affected by overflow: hidden.

To prevent the need to hide it when sticky applies, you should set the overflow property of the navbar to visible in that situation.

In CSS, the id attribute takes priority over the class, so you have two options. You can either update the .sticky class:

.sticky {
  ...
  overflow: visible !important;
}

But using !important can lead to a nightmare of specificity issues. A better solution would be to create a new rule with both selectors to give it higher priority:

#navi.sticky {
  overflow: visible;
}

You can achieve this effect using JavaScript as well. Here's an example:

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navi");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Make sure your CSS styles match the structure of your HTML elements. For example:

#navi.sticky {
  overflow: visible;
} 

#navi {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

.drop {
  float: left;
  overflow: hidden;
}

/* Rest of the CSS styles go here */

Your HTML structure should look something like this:

<body>
  <header>
    <h1>
      Example for StackOverflow
    </h1>
  </header>
  <nav id="navi">
    <div class="drop">
      <button class="dropbutton">
                Button - dropdown
            </button>
      <div class="links">
        <a href="">Random link 1</a>
        <a href="">Random link 2</a>
        <a href="">Random link 3</a>
      </div>
    </div>
  </nav>
  <article>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
  </article>
</body>

Answer 2

If you're wondering why the dropdown is still visible even when the navbar is not at the top of the screen, it's because of how CSS properties are set.

The navbar has the CSS property overflow set to hidden, which normally prevents content from being visible outside its boundaries. However, the div containing the drop-down links (.links) has position set to absolute, meaning it's taken out of the normal document flow.

According to MDN:

absolute

This means the element is removed from the normal document flow and no space is created for it in the page layout. It is positioned relative to its closest positioned ancestor, or if there isn't one, then it's placed relative to the initial containing block.

Because .links doesn't have any positioned ancestors, its position is relative to the initial containing block.

However, when the navbar reaches the top of the screen, the sticky class is applied. This class mainly sets the position CSS property to fixed (meaning it's out of the document flow and positioned relative to the initial containing block established by the viewport).

With the sticky class applied, .links is now positioned relative to the navbar itself, making it affected by overflow: hidden.

To prevent the need to hide it when sticky applies, you should set the overflow property of the navbar to visible in that situation.

In CSS, the id attribute takes priority over the class, so you have two options. You can either update the .sticky class:

.sticky {
  ...
  overflow: visible !important;
}

But using !important can lead to a nightmare of specificity issues. A better solution would be to create a new rule with both selectors to give it higher priority:

#navi.sticky {
  overflow: visible;
}

You can achieve this effect using JavaScript as well. Here's an example:

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navi");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Make sure your CSS styles match the structure of your HTML elements. For example:

#navi.sticky {
  overflow: visible;
} 

#navi {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

.drop {
  float: left;
  overflow: hidden;
}

/* Rest of the CSS styles go here */

Your HTML structure should look something like this:

<body>
  <header>
    <h1>
      Example for StackOverflow
    </h1>
  </header>
  <nav id="navi">
    <div class="drop">
      <button class="dropbutton">
                Button - dropdown
            </button>
      <div class="links">
        <a href="">Random link 1</a>
        <a href="">Random link 2</a>
        <a href="">Random link 3</a>
      </div>
    </div>
  </nav>
  <article>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
    <p>Just for filling in the page</p>
  </article>
</body>

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Answer №1

Similar questions

Angular 2 404 Error persists despite successful retrieval of data from Oracle database using Backend Nodejs URL entered directly into the browser

Using TypeScript, let's take a closer look at an example of Angular

Is it possible to incorporate cmd.exe into an HTML file?

Retrieval of components from JSON array of objects

The presence of an Angular Element within an Angular application can lead to a problematic cycle of constant reloading,

Is it possible to utilize the function(e) multiple times within a single file?

Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Angular library is being excluded from the R.js optimizer process

When using Mongoose populate, it may either return an empty array or a list of Object

Does ExpressJS always terminate with JSON by default?

Is it possible to modify the host header within an Angular app?

What are the steps for utilizing JSON data retrieved from an ajax response?

Transitioning the width in CSS without using the "auto"

Utilizing Vuetify 2 skeleton-loader to customize loading states through Vuex store manipulation

Tips for extracting information from a Javascript Prompt Box and transferring it to a PHP variable for storage in an SQL database

Navigate through collections of objects containing sub-collections of more objects

I am encountering an issue where the useState hook is returning an undefined value on separate components, even after

Issue with current time malfunctioning

ReferenceError: 'exports' is undefined in the context of Typescript Jest

An error occurred while trying to serialize the `.res` response received from the `getServerSideProps` function in