overflow-x ruining my dropdown navbar

Question

My overflow-x: hidden; from the code ruins my dropdown bar.

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

I think this should be fixable with an overflow-x: visible; somewhere but I can't find out where to make it work.

I also can't delete it or my website will do this:

wrong header

When it should be like this:

header

I got a code snippet to show it (it's a lot of code but I don't know what code is usefull and what not so I put most of it on here)

* {
margin: 0;
padding: 0;
border: 0;
}

html, body {
width: 100%;
height: 100%;
overflow-x: hidden;  //The problem
}

.navbar ul {
list-style-type: none;
border-radius: 5px 0 5px 5px;
overflow: hidden;
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #d8d7d3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #d8d7d3 100%);
height: 45px;
-moz-border-radius: 5px 0 5px 5px;
-webkit-border-radius: 5px 0 5px 5px;
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
box-shadow: 0 -2px 2px rgba(105, 105, 105, 0.12) inset;
}

.navbar li {
float: left;
max-width: 1200px;
width: 15%;
}

.navbar li a {
display: block;
color: #000000;
text-align: center;
padding: 14px 2em;
text-decoration: none;
border-right: 1px solid #c8c8c8;
}

.navbar li a.active {
color: #eb800e;
background-color: rgba(255, 255, 255, 0.2);
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
}

.navbar li .dropdown-content a {
padding: 14px 0;
}

.navbar li a:hover {
color: #eb670c;
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
background-color: rgba(255, 255, 255, 0.2);
}

li .dropdown-content a:hover {
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #d8d7d3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #d8d7d3 100%);
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
}

.dropdown:hover .dropdown-content {
display: block;
}

li.dropdown {
display: inline-block;
width: 165px;
}

.dropdown-content {
display: none;
position: absolute;
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,     #f5f5f5), color-stop(100%, #e8e7e3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #e8e7e3 100%);
border-right: 1px solid #CBCACA;
width: 165px;
margin-top: -3px;
}

.dropdown-content a {
color: black;
padding: 12px 0;
text-decoration: none;
display: block;
text-align: center;
white-space: nowrap;
}

.dropdown-content a:hover {
background-color: #f1f1f1
}

.block_for_scroll{
height: 85%;
}

<div class="navbar">
  <nav>
    <ul>
      <li class="dropdown">
        <a href="Assortiment_erdeasy.html">Artikelen&nbsp;&nbsp;▼</a>
        <div class="dropdown-content" id="myDropdown">
          <a href="Groep1.html">Displays</a>
          <a href="Groep2.html">Manden</a>
          <a href="Groep3.html">Signing</a>
        </div>
      </li>
      <li><a href="Home_Dutch.html" class="active">Home</a>
      </li>
      <li><a href="Vision_Dutch.html">Vision</a>
      </li>
      <li><a href="Clubrax_Dutch.html">Clubrax</a>
      </li>
      <li><a href="Over_ons_Dutch.html">Over ons</a>
      </li>
      <li><a href="Contact_Dutch.html">Contact</a>
      </li>
    </ul>
    <br class="ClearLeft">
  </nav>
</div>
<div class="block_for_scroll"></div>

first hover over and it works fine, then scroll down and hover over it and you see it goes wrong. Dont expand the snippet.

Update

picture for the answer of Jack Goodman

Header going over screen

Update

Explaining the fiddle

If your scrolled down: Dropdown content not sticking to NavBar Does this only happen by my fiddle?

Try removing this `width: 15%;` form `li` items, and you'll get width auto adjusted to all items, and you won't have the problem with the overflow. — Kristijan Iliev, Jan 26 '17 at 11:42
@Chris It doesn't work, I also just tried deleting all other width's in my code but still doesn't work. — Minegolfer, Jan 26 '17 at 11:45
Have you got a snippet that will replicate the overflowing problem as your snippet fits on the screen. I'm thinking you have some sort of problem with your header widths and padding that is causing the space on the right — Pete, Jan 26 '17 at 12:07
This doesn't seem caused by `overflow-x` because there is a visible box-shadow. — Oriol, Jan 26 '17 at 12:11
@Oriol but when I take the `overflow-x` away everything goes perfectly. (in the dropdown bar) — Minegolfer, Jan 26 '17 at 12:15
@Pete sorry totally didn't see your comment. If you dont expand the snippet you can see the problem. — Minegolfer, Jan 26 '17 at 13:42
I've moved on, I can't replicate the error with the code you've provided and as you are unwilling to further the request with a [MCVE], I have voted to close and left it — Pete, Jan 26 '17 at 13:48
@Pete I have edited my question and showed what I see if I use my code snippet. You don't see that when u use it? — Minegolfer, Jan 26 '17 at 14:02

Joe · Answer 1 · 2017-01-26T13:31:09.187

0

change the "li.dropdown" css like this:

float: left;
width: 25%;

edited Jan 26 '17 at 13:31

answered Jan 26 '17 at 13:23

Joe

443
1
4
21

so I probably didn't undestand the problem. because when I change it in your example, the menu looks normal... – Joe Jan 26 '17 at 13:44

score 0 · Accepted Answer · edited May 23 '17 at 11:45

So I found the answer (finally) myself,

I removed the overflow-x from the body (which I did because I had the same problem as White space showing up on right side of page when background image should extend full length of page) and placed the overflow-x in article only (got my code splitted into header-article-footer) then the navbar still works and the code works just fine also on mobile devices.

overflow-x ruining my dropdown navbar

2 Answers2