Fixed Positioned Div is extending outside of HTML & Body

Question

I have a responsive site I'm working on and when you go below 800px wide the menu becomes fixed at the top with a toggle drop down menu.

What's happening is that the div is extending outside of the HTML and Body area and making add a sideways scrollbar. I'm not sure how to get around this.

Any help would be greatly appreciated!

Here is my code

HTML:

<div class="navMobile">
<div class="menuBox">
<div class="navMobileBtn"><img src="<?php echo get_template_directory_uri(); ?>/img/menuBtn.png" /></div>
<ul class="navMobileBox">
  <li><a class="location" href="#">Location</a></li>
  <li><a class="building" href="#">Building</a></li>
  <li><a class="space" href="#">Space</a></li>
  <li><a class="links" href="#">Links</a></li>
  <li><a class="contact" href="#">Contact</a></li>
</ul>
</div>
</div>

CSS:

.navMobile {display:block;}

.navMobile {
    height:auto;
}

.navMobile .menuBox {
    height:auto;
    min-height:40px;
    width:100%;
    display:inline-block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:#fff;
    z-index:99999;
}

.navMobile .menuBox ul {
    display:block;
    clear:both;
    height:auto;
    width:100%;
    padding:0;
    margin:0;
    border-top:1px solid #eee;
    font-family: "proxima-nova";
}

.navMobile .menuBox ul>li {
    display:block;
    clear:both;
    padding:10px 0;
    text-align:center;
    border-bottom:1px solid #eee;
}

.navMobile .menuBox ul>li a {
    padding:0;
    margin:0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color:#ccc;
    font-size: 0.9em;
    font-weight:500;
    opacity: 1;
}

.navMobile .menuBox ul>li a:hover,.mainnav ul>li a:focus {
    text-decoration: none;
}

.navMobile .menuBox ul>li:last-child a {
    margin-right: 0;
    padding-right: 0;
}

.navMobileBtn {
    clear:both; 
    height:40px;
    width:40px;
}

Answer 1

try add these into your .css

html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
height: 100%;
position: relative;
}

acctually just one of them would probably solve your problem, but i'm not sure wich.. probably body

Answer 2

For anyone looking for a solution like I was, here you go:

This issue is caused by the fact that if the main containing element, either body or html depending on the browser*, is not set to a specific width and height its content can grow beyond the bounds of the window causing the base of the document to be larger than the window.

Normally this causes scrollbars, which is expected behavior. However, in the case of fixed elements, it also changes the starting positions for fixed elements by moving the right and bottom values to the position of the main element rather than the edges of the window. This makes the fixed elements scrollable within the window, which is the very opposite of how fixed elements are supposed to behave.

• As a side note some browsers use the body element to scroll the content, while others use the html element to scroll the content by default. This needs to be reset to the body for consistent results.

Solution, set the width and height of the html and body element to 100% so that it remains the size of the window. You also need to set standard resets for the margin specifically and for good measure padding and border. Finally setting the overflows to their proper elements guarantees that the browser is using the correct element to scroll the document.

html, body {
  position: relative;
  margin: 0;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  overflow: auto;
}

Adding this to your reset css should solve the problem in the future.

This is what did it for me anyway. Hope it helps someone else.