How to Make Bootstrap Off Canvas Nav Overlap Content Instead of Move It

how to make bootstrap off canvas nav overlap content instead of move it

update (based on your comment and new sketch)

See: http://bootply.com/78559

html:

<div class="container">

<div class="row">
    <div class="col-sm-9" style="background-color:lightgreen;height:500px;">
        Content

        <button id="navigator">Show Nav</button>
    </div>
    <div class="sidenav col-sm-3" style="background-color:red;height:100px;">Nav</div>
</div>

  <hr>

  <footer>
    <p>© Company 2013</p>
  </footer>

</div><!--/.container-->

css:

@media (max-width: 767px) 
{ 

    .sidenav
    {
        position: absolute;
        top: 50px;
        height: 0px;
        width: 0px;
        overflow: hidden;
        left:100%; 
        padding:0;
    }

    .sidenav.on
    {    

        width:50%;
        left:50%;
        -webkit-transition: all 2s ease 0s;
        -moz-transition: all 2s ease 0s;
        -o-transition: all 2s ease 0s;
        transition: all 2s ease 0s;

    }   

}

javascript:

 $('#navigator').click(function(){$('div.sidenav').toggleClass('on');});

--

Yes, see: http://bootply.com/77207

The off canvas feature is not a default feature of bootstrap.
This demo shows what you can do with Bootstrap, css, mediaqueries and javascript (jQuery).

1) media queries hide the sidebar when the screen width is below 768px (css a negative right position)
2) clicking the button adds the class .active to the content (including the sidebar)
3) css sets the position of the content with class .active to the left with ... % (positive right position) the content hide (outside the viewport) and the navbar become visible.
4) the effect of show / hide is done with CSS3 transitions http://www.w3schools.com/css3/css3_transitions.asp

In the original example the content swift 50%, change this to 100% (or a little more) will give the effect of overlap.

Maybe also see:
Toggle sidebar on mobile device with Twitter Bootstrap 2.x (easy to migrate to TB3)

Jasny Bootstrap - offcanvas avoid push of the main page: how to force menu to overlap?

I commented the line 155:

//$('body').css(prop, padding)

And line 187:

//$(this).css(placement, 0)

and replaced all canvas-sliding with the class no-sliding...

it worked by attempt!

Jasny bootstrap Off Canvas menu: how to force menu slide under the navbar?

You need to add top:120px to make it appear below the navbar

.navmenu-fixed-left, .navmenu-fixed-right, .navbar-offcanvas {
  position: fixed;
  z-index: 1050;
  top: 120px;
  bottom: 0;
  overflow-y: auto;
  border-radius: 0;
}

DEMO

Bootstrap 4 content and navigation side bar Overlap issue

change your .sidenav{position:fixed; top:0;} to .sidenav{position:absolute; top:5%;}

function openNav() {    document.getElementById("mySidenav").style.width = "250px";  }
  function closeNav() {    document.getElementById("mySidenav").style.width = "0";  }

body.mainbody {  overflow: hidden;
  font: 13px/1.7em 'sans-serif';  font-family: sans-serif;}
html, body {  height: 100%;  width: 100%;  margin: 0;  padding: 0;}
.bg-inverse {  background-color: grey !important;}
.header {  width: 100%;  height: 5%;
  background: red;  position: fixed;  top: 0;}
.footer {  width: 100%;  height: 60px;  background: grey;  position: fixed;  bottom: 0;
}
.main-content{  height: 85%;  margin-top:11%;z-index: 0; overflow-y: scroll;}
#content-top {  width: 100%;  top: 5%;  height: 5%;  padding: 1.5%;z-index: -1;background-color: white;  position: fixed;}#content-top-fat {  width: 100%;  top: 5%;  background-color: white;  height: 5%;  padding: 1.5%;  z-index: 1;  position: fixed;}#content-bot-fat {  width: 100%;  top: 10%;  z-index: -1;  height: 5%;  padding: 1.5%;  background:white;  position: fixed;}.p-2 {  padding: 0.4em 0.5rem !important;}#contents {  /*position: fixed;*/
  overflow-x: hidden;margin-top: 5.0rem;padding: 2%;}

.sidenav {  height: 100%;  width: 0;  position: absolute;  z-index: 5;  top: 5%;  right: 0;  background-color: #eee;  overflow-x: hidden;  transition: 0.5s;  padding-top: 60px;}
.sidenav a {  padding: 8px 8px 8px 32px;  text-decoration: none;  font-size: 25px;  color: #818181;  display: block;  transition: 0.3s;}
.sidenav a:hover, .offcanvas a:focus{  color: #f1f1f1;}
.sidenav .closebtn {  position: absolute;  top: 0;  right: 25px;  font-size: 36px;  margin-left: 50px;}
@media screen and (max-height: 450px) {  .sidenav {padding-top: 15px;}  .sidenav a {font-size: 18px;}}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><body class="mainbody"><div class="header"><div class="d-flex justify-content-end">  <div class="mr-auto p-2">Dashboard</div>  <div class="p-2"></div>  <div class="p-2"><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span></div></div>

</div><div id="mySidenav" class="sidenav">  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>  <a href="#">About</a>  <a href="#">Services</a>  <a href="#">Clients</a>  <a href="#">Contact</a></div><!--/header--><div id="content-top-fat">  <div class="add-text-fat">    <div class="d-inline-flex ">+</div>    <div class="d-inline-flex ">Add New Rate Plan</div>
  </div>

</div><div id="content-bot-fat">

  <div class="d-flex justify-content-center"><p class="rateplan-date">Thursday, April, 20, 2017  </p></div></div><!--content--><div class="main-content">  <div id="contents"> 
Responsive across devicesOne framework, every device.Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
ComponentsFull of featuresWith Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.PreprocessorBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

ComponentsFull of featuresWith Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.PreprocessorBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with pFull of featuresWith Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.PreprocessorBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.
Responsive across devicesOne framework, every device.Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.
Responsive across devicesOne framework, every device.Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.
Responsive across devicesOne framework, every device.Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.
Responsive across devicesOne framework, every device.Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.
Responsive across devicesOne framework, every device.Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.
Responsive across devicesOne framework, every device.Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
ComponentsComponentsFull of featuresWith Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.  </div></div>
<div class="footer"></div></body>

How to prevent Navbar dropdown from overlapping with rest of the content?

The navbar is overlapping the content below it after toggling because its position is fixed and it is aligned independent of the content below it, so in order to make it push the content below when it toggles you need to make it relative for small screen devices using media queries, something like

@media (max-width:480px){

    body{
        padding:0;
    }
    .fixed-top{
         position:relative;
    }

}

I made body padding 0 to make sure it doesn't show white space at top after navbar is made relative

But note that this will make your navbar to move up and away from viewport when page is scrolled down.

how to avoid that the scroll bar on the right overlaps with the top navbar (bootstrap)?

First you need to tell the body not to use the scroll bars by setting overflow:hidden; .Then you need to move .main down a bit 50px as this is the headers height and tell it to scroll overflow-y: scroll; .However .main needs a height to be set and for that you need some Jquery code to calculate how much height is available on the window minus the 50px for the headers height.

Demo

https://jsfiddle.net/ksroccd8/

Css

body {
overflow:hidden;
}
.main {
  margin-top: 50px;
  overflow-y: scroll;
}

Code

//get window height minus 50 pixels for the headers height
var height = $(window).height() - 50;

$(".main").height(height);

When you resize the window you need to recalculate the height for .main and for that you will need window resize function to add

Code

window.onresize = function(event) {
var height = $(window).height() - 50;

$(".main").height(height);
};

Demo

https://jsfiddle.net/a88n0aet/

Bootstrap navbar overlapping body content

Acoording to bootstrap navbar-fixed-top docs:
###Body padding required

The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

I think if it takes two lines on non-mobile viewport, you can set

@media screen and (min-width: 768px) {
    body { padding-top: 100px; }
}

---

Related Topics