引导边栏和页面内容已合并

Question

I am attempting to use a bootstrap sidebar which on smaller screens becomes horizontal navigation. Everything is working fine except for Page content (which has to be on right side of sidebar) appears on top of sidebar.

JS Fiddle

My code:

  .nav-side-menu { overflow: auto; font-family:'Montserrat', sans-serif; font-size: 12px; font-weight: 200; background-color: #FFF; position: fixed; top: 0px; width: 250px; height: 100%; color: #000; border-right:solid 1px black; } .nav-side-menu .brand { background-color: #FFF; line-height: 50px; display: block; text-align: center; font-size: 14px; } .logoimg { width: 70%; margin-top: 20px; background: url('logomedium.png'); background-size: 200px 133px; height: 133px; width: 200px; /* margin-left:auto; margin-right:auto; */ margin-left:20px; background-position: center; margin-bottom: 80px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; /* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } } */ } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #eeeeee; background-color: #eeeeee; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #d19b3d; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #d19b3d; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #eeeeee; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; text-align: center; /*border-left: 3px solid #2e353d; */ padding-bottom: 15px; padding-top: 15px; /*border-bottom: 1px solid #23282e;*/ } .nav-side-menu li a { text-decoration: none; font-size:12pt; color: #000000; text-transform: uppercase; vertical-align: middle; } .nav-side-menu li a { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li a:focus { outline: 0; } .nav-side-hr { width: 75%; border: none; height: 1px; /* Set the hr color */ color: #333; /* old IE */ background-color: #333; /* Modern Browsers */ } .nav-side-menu li:hover { /*border-left: 3px solid##eeeeee;*/ background-color: #eeeeee; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; } .logoimg { margin-top: 10px; background: url('logohorizontal.png'); background-size: 200px 48px; height: 48px; margin-bottom: 10px; width: 200px; /* margin-left:auto; margin-right:auto; */ margin-left: 5px; background-position: center; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #AF2024; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; border-bottom: 1px solid black; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; } 

  <div id="wrapper"> <!-- Sidebar --> <div class="nav-side-menu"> <div class="brand"><div class="logoimg" />LOGO PLACEHOLDER</div></div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"> <i class=""></i> About Us </a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed"> <a href="#"><i class=""></i> Services </a> </li> <li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="#">CSS3 Animation</a></li> <li><a href="#">General</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Tabs & Accordions</a></li> <li><a href="#">Typography</a></li> <li><a href="#">FontAwesome</a></li> <li><a href="#">Slider</a></li> <li><a href="#">Panels</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Bootstrap Model</a></li> </ul> </li> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class=""></i> Contact us </a> </li> <li> <ul class="sub-menu collapse" id="service"> <li>New Service 1</li> <li>New Service 2</li> <li>New Service 3</li> </ul> </li> <hr class="nav-side-hr" /> <li data-toggle="collapse" data-target="#new" class="collapsed"> <a href="#"><i class=""></i> RATES </a> </li> <li> <ul class="sub-menu collapse" id="new"> <li>New New 1</li> <li>New New 2</li> <li>New New 3</li> </ul> </li> <li> <a href="#"> <i class=""></i> TRACKING SYSTEM </a> </li> <li> <a href="#"> <i class=""></i> QUOTE ME </a> </li> <hr class="nav-side-hr" /> <li> <a href="#"> <i class=""></i> FIND US </a> </ul> </div> </div> <!-- End Sidebar --> <!-- Page Content --> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <h1>Simple Sidebar</h1> <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> </div> </div> </div> </div> </div> 

UPDATE: As suggested added padding to page-wrapper, but when I add text to page content, sidenav links stop working/hovering. JS FIDDLE https://jsfiddle.net/y3eL6m8v/4/

Answer 1

Please add this in your css:

    @media (min-width: 768px)
    {
    #page-content-wrapper 
       {
        padding: 20px 20px 20px 250px;
        position: relative;
        }
    }

Check this fiddle https://jsfiddle.net/y3eL6m8v/2/

Answer 2

In the media query you should add a padding-left with the value of the width from the sidenav to the page-content-wrapper class.

@media(min-width:768px) {
  #page-content-wrapper {
    padding-left: 250px;
    position: relative;
  }
}

Click here for a jsfiddle