troubleshooting Question

bootstrap left nav overlap on mobile device

Avatar of UniqueData
UniqueDataFlag for United States of America asked on
JavaScriptHTMLCSSWeb Development
4 Comments1 Solution1026 ViewsLast Modified:
I am EXTREMELY new to bootstrap.  I found code for a fixed left nav that works awesome on a desktop and laptop, but on a mobile device the body overlaps the left nav.  Any suggestions:

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="//"></script>
  <link href="//" rel="stylesheet">
  <script src="//"></script>
  <link href="//" rel="stylesheet">  
<!-- left nav -->
  <div class="col-sm-2">
      <ul class="nav nav-stacked affix" id="sidebar">
        <li><a href="#">Hello</a></li>
        <li><a href="#">About Caroline</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">The Studio</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Inspiration</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
<!-- end left nav -->

      <div class="col-sm-7">
          <div class="row"> <!-- body content here -->
                 blah blah
Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros