CSS: sticky navbar with dropdown-menu not showing (-overflow)?

Question

I try to have a sticky navbar with a dropdown-menu. But the dropdown-menu is not showing.

I player around with this for too long now i guess.. and the biggest problem: in jsfiddle the dropdown-menu is now showing at all. However at my pc the dropdown-menu is showing as long as the 'sticky' class is not added, then becomes invisible, too.

Here in stackoverflow I read about overflow:hidden in the navbar causing the problem. Deleting that makes the dropdown-menu work but the navbar disappears.

-> dropdown-menu invisible https://imgur.com/JYcswYq

-> navbar not shown https://imgur.com/Gk5P6gN

I assume the error somewhere here but couldnt figure it out..

#navbar{
  overflow: hidden;
  font-size: 25px;
  background-color: #333333;
}
main{
  padding-top: 30px;
  padding-bottom: 30px;
}
.dropdown-content {
  right:0;
  display: none;
  position: absolute;
  background-color: #333333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-top: 48px;
}

There you can find a reduced part of my code. Here the dropdown doesnt show at all. (at my pc it at least shows as long as the sticky-class isnt added) https://jsfiddle.net/xncjazky/3/

Hopefully i can get any advice on how to make the dropdown-menu popup even with the sticky-navbar. Thank you.

Answer 1

Remove the overflow:hidden as you found out yourself, and add a height or min-height property to the #navbar selector, like so:

#navbar {
  //overflow: hidden;
  font-size: 25px;
  background-color: #333333;
  min-height: 48px;
}

The problem occurs because of the use of floats in your navigation items.

So another way to solve the issue without setting a fixed height to the #navbar , is changing your navigation items from float:left to display:inline-block .

Like so:

#navbar {
  //overflow: hidden;
  font-size: 25px;
  background-color: #333333;
}
.lnav{
  //float: left;
  //display: block;
  display: inline-block;
  padding: 10px;
  text-align: center;
  color: #d9d9d9;
  text-decoration: none;
  cursor: pointer;
}

Hope this helps. Cheers, Jeroen.

Answer 2

Removing overflow: hidden; will cause the background color of the main navbar to disappear if you have the li elements set to float: left; or float: right; .

I managed to fix the issue of content not appearing by making the .dropdown-content div class position: sticky; with the ul.topnav element. Problem is, a new glitch arises as the dropdown list appears with the background color assigned to it, acting as it should, except for one thing. The background color of the topnav list comes down around the dropdown, making the whole list fatter instead of showing a simple lonely dropdown menu.

Answer 3

I had the same problem and solved it by placing the navbar inside the "div" element with "position: sticky".
For example:

<div style="top: 0; position: -webkit-sticky; position: sticky">
<nav>
<!-- here goes the code of navbar -->
</nav>
</div>