2

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;
}
dennisterrey
  • 183
  • 1
  • 3
  • 11

2 Answers2

8

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.

Henchmen.Media
  • 106
  • 2
  • 4
3

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

user1576978
  • 1,763
  • 1
  • 14
  • 27
  • 1
    I don't know if your answer actually solves anything (hopefully it does), but wouldn't combining those rules make sense? `html, body {...` – j08691 Feb 25 '13 at 18:28
  • sorry it didn't solve it. Could you try put overflow: hidden; rule inside a wrapper that wrapps your menu? – user1576978 Feb 25 '13 at 18:37
  • @user1576978 this is something I've already tried and also hasn't worked. Hence why I am so stumped, I think it has something to do with fixed positioning but I have never had this issue before. Here is a link to the site so you can see for yourself. [link]http://designbyparent.co.uk/10highstreetFinal/ – dennisterrey Feb 25 '13 at 18:49
  • 2
    you'll probably hate me for this, but i just overflow-x: hidden; in html, body rules – user1576978 Feb 25 '13 at 19:34
  • @user1576978 haha that worked! don't know why I didn't try that, I guess with the original overflow:hidden not working I figured that wouldn't work either. Thank's a lot for you're time, you've been great help!! – dennisterrey Feb 26 '13 at 17:03
  • @user1576978 sorry, that did work, but it broke the jquery scroll menu. arghh! I've never seen this problem before and starting to give me a massive headache! – dennisterrey Feb 26 '13 at 17:24
  • lol dude... would mess it up if you set the menu less than 100%? like 95% or so? its not a true solution, but may work for you – user1576978 Feb 27 '13 at 17:43