bootstrap 3 content overlaps fixed sidebar (using affix)

My content overlaps my fixed sidebar when screen gets smaller. Here's the URL:
http://cjehost.com/ikonltd/bootstrap-example.html.
squeeze browser down to iphone width and my content overlaps my sidebar. I can't find a fix for this. I need the sidebar to be fixed on all screen sizes.

Here's my css:
#sidebar.affix-top {
  position: static;
  }
  
  #sidebar.affix {
  position: fixed;
  top: 10px;
  }

Open in new window


Here's my sidebar html:

<div class="col-md-4 col-xs-4">
<div id="sidebar" class="nav nav-stacked affix">
              
<div class="panel panel-danger">
 <div class="panel-heading">Current Exhibition</div>
  <div class="panel-body">
<span style="font-weight:bold;">The Black & White Show</span><br />
January 13, 2015 - March 
                            14, 2015 <p class="noUnderline"> <a href="/current-unique/"><span class="glyphicon glyphicon-picture"></span> Unique</a><br />  <a href="/current-editions/"><span class="glyphicon glyphicon-picture"></span> Editions</a>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4bf2dbc80f1a8389" class="addthis_button_compact">Share</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4bf2dbc80f1a8389"></script>
<!-- AddThis Button END -->


</div>
</div>
</div>
</div>

Open in new window

phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Position:fixed takes the element out of the normal flow. It's like position:absolute. It ignores all other elements on the page. It's not what you want for that element. With it removed, the left content just collapses so the sidebar can fit on a narrow screen. You can prevent the left content from collapsing too much by setting a min-width. Then if the sidebar does not have enough room, it will move below the left content. But you cannot have it both ways.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:
So no way to use fixed with sidebar without the content overlap?
0
Tom BeckCommented:
You can use position:fixed to keep the sidebar from scrolling with the right content. The question is, what do you want it to look like when the screen gets too narrow to hold both items side by side? Do you want the right content to drop below the left? Do you want the left to be on top of the right? Do you want one or both to shrink down until both fit? As it is, they cannot both occupy the same space without one overlapping the other.
0
phillystyle123Author Commented:
Thanks. It's good to know that I'm not missing anything.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.