Problem with overlapping content and navigation side bar in Bootstrap 4

Working on a project for my university, I utilized Bootstrap-4 to create various divisions - header, content-top-fat, content-bot-fat, and main-content. I aimed to fix the positioning of the header, content sections, and footer while allowing only the main content section to be scrollable. However, upon adding a sidebar navigation menu, an overlapping issue arose which affected the appearance of the layout. If you can review my code and image provided, kindly assist me in resolving this problem by fixing the position and scrollbar functionality specifically for the main content part.

Thank you.

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

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

...

Image https://i.sstatic.net/U1kEB.jpg

csstwitter-bootstrapbootstrap-4

Answer №1

adjust 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";
  }
/* CSS code snippet goes here */
<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()">&#9776; </span></div>
</div>


</div>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</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 devices
One 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.

Components
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor
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.


  </div>
</div>

<div class="footer"></div>
</body>

Answer №2

After analyzing your code, I have identified the issue and successfully resolved it. I trust that this solution will be beneficial to you :)

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;
}
...

<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>

Answer №3

Seems like there is a simple issue with the z-index that can be easily fixed by transferring z-index: 5 from .sidenav to .header

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%;
  z-index: 5;
  background: red;
  position: fixed;
  top: 0;
}

.footer {
  width: 100%;
  height: 60px;
  background: grey;
  position: fixed;
  bottom: 0;

}

.main-content{
  height: 85%;
  margin-top:5%;
z-index: -1; 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: 6.5rem;
padding: 2%;
}


.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  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()">&#9776; </span></div>
</div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
</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 devices
One 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.

Components
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor
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 devices
One 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.


  </div>
</div>

<div class="footer"></div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The division of columns in the Bootstrap grid is malfunctioning

Recently, I embarked on my journey with Bootstrap and encountered an issue with the Grid Col System. I am aiming to center the logo and navigation bar on the page by dividing the Grid layout into 4 col-lg-4 (md-4). Subsequently, I inserted the image and na ...

htmlcsstwitter-bootstrap

When clicked, check if the CSS value is equal to

I have no idea why it's not working. After toggleClass is executed, if the CSS value equals "-84%" then hide(); $(".rwd-sec").click(function() { $(".rwd-main").toggleClass("is-active"); if ($(".rwd-main").css("right") == "-84%") { ...

jquerycssif-statement

Switching between various quantities of inputs in each row using Bootstrap V3

My Bootstrap V3 form has a mix of rows with two inputs and rows with one input, as per the designer's request. Check out my fiddle here: https://jsfiddle.net/06qk4wh4/ <div class="form-group col-sm-12"> <label class="control-label col- ...

htmlcsstwitter-bootstrap

Prevent sorting in EditItemTemplate within GridView

Currently, I have integrated responsive DataTable classes into my GridView. <asp:GridView ID="myGrid" runat="server" EnableViewState="False" CssClass="table table-striped table-bordered table-hover"> <Columns> <asp:CommandF ...

jqueryasp.nettwitter-bootstrapresponsive-designdatatables

Resolving the issue of nested modals within Bootstrap

I am experiencing some issues with my customer visits list page. When I try to add a visit, it opens a bootstrap popup ("#Pop1") to record the visit details. Within this modal, there is an option to add a new customer on the spot, which then triggers anoth ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

Struggling to align Social Media Share Buttons in inline format for a website

I'm having trouble aligning these social media share buttons with my inline list. I tried using vertical-align: top; on the <li> element, but it didn't work in Chrome. You can view the page here: Here is the full HTML/CSS code: <!DOCT ...

htmlcsssocial-media

Tips for concealing a tab within Angular Bootstrap UI using ng-show/ng-hide

Angular Bootstrap UI is being utilized to display a tabset. The necessary script, ui-bootstrap-tpls-0.6.0.min.js, and some HTML template files are included in the setup. Check out the following markup: <tabset> <tab ng-hide="!hideme"> ...

twitter-bootstrapangularjsangularjs-directive

Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use animation-iteration-count: infinite. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it ...

htmlcssloopsanimation

Is it possible to create a sticky element that stays fixed to the window without using JavaScript?

Using position: sticky has been a game-changer for me. It resolves many issues without the need for JavaScript. However, I've encountered a roadblock. I am trying to create a sticky element that is nested inside multiple <div> elements. Since po ...

javascripthtmlcss

Adjust the order of list items based on the resolution change

Is there a way to rearrange the order of the list items in an ul when the screen resolution changes, specifically having the last li appear in the first place? Edit: I am attempting to achieve this by using flexbox. .postpreview ul { list-style: none; d ...

jqueryhtmlcss

Modifying CSS style according to the contents of an HTML element

Creating a room allocation page with multiple panel boxes using Bootstrap. Each box represents a bed - highlighted in red if occupied and green if vacant. Clicking on a green panel redirects to the room allocation page, while clicking on a red panel goes t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Error in NodeJS (EJS): Unable to locate stylesheet file

Having trouble adding a CSS file to my Node.js project with the EJS Template Engine. The file cannot be found when trying to access it. GET http://localhost/css/bulma.css net::ERR_ABORTED 404 (Not Found) Project folder structure ./index.js ./views ...

cssnode.jsexpressnginxejs

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

What is the CSS method for altering the color of a slider's runnable track upon selection?

Seeking assistance in changing the slider track color upon selection. Struggling to achieve the desired outcome of altering the color as it slides. CSS: /* Custom Styles */ .text-size-slider { line-height: 100%; font-size: 14px; position: relative ...

javascriptcssangularjscss-selectors

How about a fading effect for the select box?

I'm currently working on creating a select tag that opens its options slowly with a fade in, fade out effect when the user clicks on "Actions." I've attempted to use jQuery for this feature but haven't had any luck. Here's my code: &l ...

jqueryhtmlangularjscss

Ensuring Smooth Alignment of CSS Divs

I am facing challenges with the compatibility of my CSS code for HTML checkboxes. In certain versions of Internet Explorer and when I insert the live HTML into my PowerPoint presentation, the center div overlaps with the left div causing the entire page to ...

htmlcsscss-floatcenter

What is the best way to style divs in this manner?

Imagine you have a div with specific height and width (as shown in the illustration as the innermost one), and you wish for the outer divs to encompass it, with an outer margin of 1 em. How could this be achieved? +--------+ | +-----+| | |+---+|| | || ...

csshtml

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

javascripthtmlcss

How can I prevent scrolling while a loader is displayed during page loading?

How can I disable scrollability on my personal website when the page is loading with the loader wrapper? I have tried using overflow: hidden; in the CSS but it didn't work. The loader is set to display for 2.5 seconds. Any suggestions on how to achiev ...

javajquerycssloader

The :focus pseudo-class is failing to target the input element

I'm dealing with a simple input field of type text: <input matInput type="text" placeholder="{{placeholder}}" class="input-field" [ngClass]="{'error': hasErrors}" [readonly]="isReadonly&quo ...

htmlcssangular8