CODEWITHSUNDEEP
htmlcss
d3wannabe
d3wannabe

Reputation: 1317

Overflow: hidden conundrum on mobile devices

I have 2 bootstrap navbars immediately followed by 2 horizontally centered dropdown menus as follows...

<div class="bodyWrapper"> 

  <!-- top navbar - doesn't change size-->
  <div class="navbar navbar-fixed-top navbar-inverse nav-top">
    ...
  </div>

  <!-- bottom navbar - collapses and changes size-->
  <nav class="navbar navbar-inverse navbar-static-top" >
    ...
  </nav>    

  <!-- 2 dropdown menus, always centered, and underneath the navbars-->
  <div style="width: 100%;">
      <div style="position: relative; left: 50%; top: -20px;">
              <nav id="menu" class="menu"> 
              </nav>
              <nav id="menu2" class="menu"> 
              </nav>
      </div>
  </div>

</div>

With just this setup, a horizontal scroll bar appears on mobile devices allowing the user to scroll across to nothing but blank space, other than my top navbar (which for some reason continues to fill the whole screen). I don't know why this happens but to solve it, I can add this CSS...

.bodyWrapper {
  position : relative; 
  overflow : hidden;
}

(I experimented first applying overflow/overflow-x:hidden properties to body/html but it didn't remove the scroll bar on my iPhone).

But the problem with this option is that since the dropdown menus are now inside a wrapper with overflow:hidden, when the user tries to expand them they're cut off.

The only solution I can come up with, it to take the dropdown menus outside of the bodyWrapper div and use absolute positioning on them - but this is a pretty bad option since I'd constantly have to readjust their positioning because the height of the navbars above them can grow.

Anyway, all that's a long way of asking whether anyone can see a better way to deal with this mobile-specific (at least iPhones) issue. Thanks for any thoughts at all!

EDIT

example as requested: http://codepen.io/d3wannabe/pen/gaVXzO (the last line of the css can be commented in/out to see what happens to the dropdown)

Upvotes: 2

Views: 107

Answers (1)

Afsar
Afsar

Reputation: 3124

You can set display of dropdown class to inline-block and its parent to have text-align to center.

.dropdown{
    display:inline-block;
 }

Check out here : http://codepen.io/anon/pen/aveEoP

Upvotes: 1

Related Questions