Bootstrap navbar sidebar covering page text
Question
Link to the navbar sidebar I am using: http://bootsnipp.com/snippets/featured/responsive-navigation-menu
I'm having trouble figuring out how stop this sidebar from blocking text on a page. I've used navbars before and they appear to separate from the rest of the page, so pieces of the webpage don't disappear behind it. I understand this isn't an official bootstrap navbar, as I believe they don't fully support sidebars.
// Place all the styles related to the Welcome controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ /* BELOW HERE IS ALL NAVBAR CSS */ .nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; position: fixed; top: 0px; width: 300px; height: 100%; color: #e1ffff; } .nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px; } .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 #d19b3d; background-color: #4f5b69; } .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: #181c20; 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; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e; } .nav-side-menu li a { text-decoration: none; color: #e1ffff; } .nav-side-menu li ai { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -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; } .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: #000; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; } /* ABOVE HERE IS ALL NAVBAR CSS */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <title>Index</title> </head> <body> <div class="container-fluid"> <div class="nav-side-menu"> <div class="brand">Navbar Sidebar</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="fa fa-dashboard fa-lg"></i> Dashboard </a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed active"> <a><i class="fa fa-gift fa-lg"></i> <%= link_to("Contact", {:controller => 'welcome', :action => 'contact' }) %> <span class="arrow"></span></a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed active"> <a href="#"><i class="fa fa-gift fa-lg"></i> Help <span class="arrow"></span></a> </li> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Lessons <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="service"> <li>Lesson 1</li> <li>Lesson 2</li> <li>Lesson 3</li> </ul> <li> <a href="#"> <i class="fa fa-user fa-lg"></i> Profile </a> </li> <li> <a href="#"> <i class="fa fa-users fa-lg"></i> Users </a> </li> </ul> </div> </div> <div class="main"> <div class="row"> <div class="col-md-8"> <h1>Navbar Sidebar</h1> <p> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p> </div> </div> <!-- end main div --> </div> <!-- close container fluid --> </body> </html>
Apparently imgur is currently having issues, and others (myself included) cannot upload images onto stack using imgur, so I have included a gyazo snapshot of the issue I am having:
2 answers
solution1
2 ACCPTED 2017-02-28 18:59:19
You are going to have to change padding-left for both .container and container-fluid at all of the responsive breakpoints in CSS so that it looks good for your design. Note: these are the default bootstrap breakpoints, if you have custom ones, edit these to fit yours.
@media only screen and (min-width : 320px) {
.container, .container-fluid {
padding-left: 100px; // just an example
}
}
@media only screen and (min-width : 480px) {
.container, .container-fluid {
padding-left: 100px; // just an example
}
}
@media only screen and (min-width : 768px) {
.container, .container-fluid {
padding-left: 100px; // just an example
}
}
@media only screen and (min-width : 992px) {
.container, .container-fluid {
padding-left: 100px; // just an example
}
}
@media only screen and (min-width : 1200px) {
.container, .container-fluid {
padding-left: 100px; // just an example
}
}
solution2
1 2017-02-28 18:59:39
也许为导航栏外的所有内容制作一个div，并在左侧给予该div一些余量，以便导航栏上的内容不会被覆盖。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Navbar covering text (Bootstrap)
Stylus Navbar covering text
Navbar with sidebar in Bootstrap
Bootstrap 4 - sidebar to top navbar
Getting Bootstrap 4 Navbar Sidebar to Extend to Full Height of Page
Bootstrap 2.3.2 Responsive Navbar Not Covering Content
Make a fixed navbar and sidebar in bootstrap
Bootstrap fixed to top navbar covering website
Bootstrap sidebar and content under navbar
Make a fixed navbar and sidebar in bootstrap 4?
Related Tags