Bootstrap 4: Content overlapping fixed sidebar position

Simply put, I am in the process of building a website utilizing the SB Admin 2 template with some slight adjustments. One modification I am looking to make is ensuring that the left sidebar remains fixed as users scroll through the site. By applying .position-fixed to the main UL wrapper accomplishes this task but it also causes an issue where the #content-wrapper div, located immediately after the UL, ends up spanning the entire width of the page and overlapping the sidebar. I have experimented with adjusting the margin-left value for the #content-wrapper, but this solution proves to be too reliant on screen resolution. Additionally, I aim to have the content wrapper expand when the sidebar collapses, similar to how it functions in the original SB Admin 2 template. Any suggestions or advice would be greatly appreciated. The classes for the sidebar and content wrapper are currently defined as:

<ul class="navbar-nav bg-gradient-secondary sidebar sidebar-dark accordion position-fixed" id="accordionSidebar">

<div id="content-wrapper" class="d-flex flex-column">
cssbootstrap-4flexbox

Answer №1

Success! I managed to resolve the issue on my own by incorporating #wrapper #content-wrapper {margin-left: 14rem;} into the CSS and creating this snippet of jQuery code for the sidebar collapse button. It appears to be functioning perfectly on all screen resolutions:

    $('#sidebarToggle').click( function(e) {
      if ($("#accordionSidebar").hasClass("toggled")) {
       $('#content-wrapper').css({'margin-left': "6.5rem"});
     } else {
       $('#content-wrapper').css({'margin-left': "14rem"});
     }
    });

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

Exploring the engaging section of interconnected images featuring rounded edges

I'm currently working on a unique widget that can be found at this link: http://codepen.io/JonnyNineToes/pen/zGYxwV This widget features an image that reveals additional information when clicked, with the extra info sliding out from behind the image. ...

htmlcsscss-shapes

How to customize the default color palette in Bootstrap 5 for a Next.js project using Sass?

After successfully loading and implementing Bootstrap in my next.js app, I have been struggling for several days to customize the default color scheme. In my global.scss file: @import "../node_modules/bootstrap/scss/bootstrap"; $primary:#f3ced6 ...

typescriptbootstrap-4sassnext.js

Add a Font Awesome 5 icon to serve as the background of a Bootstrap 4 card

How can I utilize a Font Awesome 5 icon as the background image for a card using Bootstrap-4? After trying numerous solutions found online, I am still unable to get it to work. My environment consists of Angular2 (v8) in conjunction with Bootstrap 4. ...

csstwitter-bootstrapbootstrap-4font-awesomefont-awesome-5

Having trouble displaying PHP content above the footer section

Having a bit of an issue here. Everything on the page is printing out correctly, except for the PHP content. It keeps showing up at the bottom of the page below the footer. I need it to display above the footer. I've checked the code and it should be ...

phphtmlcss

Tips for troubleshooting a sass file that is not displaying changes in the browser

Currently working on my portfolio website using bootstrap and sass along with a theme kit. Initially, I attempted to implement a grid column style for the intro-section but had a change of heart and deleted the style. Surprisingly, every time I refresh my ...

htmlcsssassbootstrap-5

Tips for changing a non-standard tag's attribute in Python 3

Below are some tags that use non-standard attributes with the style "display: none". Since these cannot be parsed, I need to either remove style="display: none;" completely or change it to style="display: inline;". ... <section id="box3" class="nodisp_ ...

cssregexpython-3.xselenium

Modifying the border of images in a Weebly gallery

I'm having trouble changing the gallery image borders on Weebly. The client prefers using Weebly for easy backend editing once the design is in place, so I need to work within these parameters. Usually, I can make most code edits easily...but this iss ...

jquerycssimage-galleryweebly

The live feature is operational, but unfortunately the on feature is not functioning

I am facing an issue in my code where replacing .live with .on is not working. I have been trying to identify the problem but haven't found a solution yet. $(document).ready(function () { /* Reading the data from XML file*/ $.ajax({ ...

jqueryhtmlcss

Steps for setting up dart sass on Fedora 37

I'm facing difficulties while trying to install Dart Sass on my Fedora 37 system. Despite following the official instructions and watching several tutorials, I keep encountering an error. According to the official Sass website: You can install Sass ...

csssass

Is there a way to prevent the repositioning of bootstraps (reactstrap) drop-down menu when the screen sizes are altered?

When in portrait mode, there is ample space for the drop-down menu to display below the button you click to reveal it: https://i.sstatic.net/WEgYl.png However, when the screen size shrinks (such as in landscape mode on certain mobile devices), the menu&a ...

javascriptbootstrap-4reactstrap

The button is unresponsive. Which code do I need to implement?

Hello there, I am still learning so please bear with me as I ask this question about my website. I have a Get Started button with a transparent background. When the user clicks on the button, I want the background to disappear. What code do I need to inse ...

jqueryhtmlcss

Encountering a display:flex problem with postcss in Vue CLI 3

Issue with Vue CLI 3 Configuration In my current setup, utilizing vue cli 3 with all default configurations including autoprefixer and postcss, I have encountered a challenge. The problem arises when using Samsung internet version greater than 7, as the ...

vue.jsflexboxpostcssvue-cliautoprefixer

Ensuring Bootstrap Cards (version 4.4.1) Blend Seamlessly with Body Text for a Cohes

https://i.sstatic.net/Dqywt.png I have implemented a card similar to the one displayed on my homepage, but I would like it to be aligned left and take up less horizontal space. Additionally, I want the text to wrap around the card rather than being comple ...

htmlcsstextbootstrap-4bootstrap-cards

Preventing background style from taking precedence over backgroundColor style in React's inline styling

What causes background to take precedence over backgroundColor in React inline-style? In this scenario, the lack of a specified green background-color results in the background gradient with transparency transitioning into white rather than green within t ...

javascriptcssreactjs

What could be causing the last LI to drop onto a new line when floating UL to the right?

I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new l ...

htmlcsscss-floathtml-lists

Position an icon at the top-right corner of an image that is absolutely positioned

I've come across many questions and answers similar to mine, but none quite fit what I'm aiming for. Here's the HTML code: <div class="container"> <div class="inner"> <div class="image-container"> <img src ...

csscss-position

Incorporate Bootstrap styles into your React SSR project in Next Js

I've encountered an issue where the styles are not being loaded in my Next.js project. I followed the guidelines provided in the official documentation and tried importing CSS or SCSS files, but when I introduced reactstrap and Bootstrap to the mix, t ...

javascriptreactjsbootstrap-4next.jsreactstrap

Struggles with aligning a hyperlink vertically in an unordered list

Here is a simple code I am using to vertically center a hyperlink within a UL. The style is applied to the hyperlink instead of the li because I need the entire list element to be clickable. Although my code works as intended, there seems to be a slight i ...

htmlcss

Dimensions of Bootstrap carousel

I am attempting to create a Bootstrap carousel with full-width images (width: 100%) and a fixed height. However, when I set the width to 100%, the height automatically takes on the same value. I am unsure if the issue lies within my files. <div id="m ...

javascriptjqueryhtmlcsstwitter-bootstrap

Link to toggle a CSS spoiler button

Currently, I have Ajax set up to replace the main div with a link. In addition, there's a spoiler-type navigation that allows you to hide or show the menu. I have my links inserted in this structure and am trying to figure out how to make it so that c ...

htmlcssajax