sticky-sidebar | making smart and high performance sticky sidebar | Plugin library

I trying to make layout something like stack overflow in bootstrap 5, I am only using bootstrap grid not using other utilities class (using saas) ,

@import "../node_modules/bootstrap/scss/grid"

This layout consist of fixed header , fixed left sidebar,main content scrollable (in the main content consist of post content etc & footer )

Note in example code I used couple of hepler class, later I will take care of it, It is just for making example code...

Problem in x-axis scrollbar appear (below example code), that is unwanted, This problem need to be fix...

Before ask, I already tried it couple of way, somehow I did not resolve it, If already answer here drop the link and I will delete my question

I've got problem with self-created sidebar in admin panel. It works fine on desktop, but I want that in mobile it should change position to top.

At this moment it looks like this: LINK

I'm making a site and i want my sidebar to disappear when i go under 450px's because then all the other content gets bigger on phone. How can i do this with media queries?

I am looking to create the functionality when the user selects an accordion menu it opens that one and closes others.

At the moment I have the functionality that it removes the class if the user selects the top level of the currently opened menu.

But I have been trying to add in the close all others functionality. I realise this has been asked before and I have tried to implement the other very good suggestions that get the reuslts I need. However, I am struggling to match them with the structure I have. Also, my jQuery knowledge is weak at this time.

Does anyone have any suggestions? I am going round in circles at this time.

I have the following structure. I have no real control over this as it is a WP, pre-built, template project that I have inheritied and trying to shoehorn functionality - (simplified structure for ease)

I'm using Datatables and Bootstrap, and I'm trying to add a sidebar on the left side of the datatables, actually I did half of the job, infact I created this code:

Suppose I have a div which is the container of a sidebar (available on the left) and of a main content (available on the right).

I want make the sidebar navigation collapsible, so through a button the user can hide or display the sidebar.

I'm currently using Bootstrap 4 and all the solution proposed on Internet have a lot of work to make this, I'm looking for a simple way to achieve this.

Actually this is my code:

I am working on a React JS project, inside the project I am using React Router v4 to create a client-side route.

This is the project live URL: https://gokhana.herokuapp.com/

On the homepage, a customer will search for the city/location (Indian cities only), whenever customer will select the location (https://prnt.sc/jsy8rp), I want to load the next route i.e https://gokhana.herokuapp.com/restaurants.

I am using for redirecting the page to /restaurants route.

When the /restaurants route is loaded, the page is not loading properly, everything is messed. Check this how it is loading https://prnt.sc/jsy96i

Now, if I reload the same URL, the page is loaded correctly without any problem https://prnt.sc/jsya4t

Redirecting to the route with creates a problem, while reloading the same route works fine.

I have checked for CSS and JS files all of them are loading properly.

I am unable to figure out this issue.

app.js file

If I use gemini-scrollbar instead of native scrollbar, I can't make, that my sidebar don't scroll.

• my sidebar in aside tag,
• content of my article in main tag.

My minimal example code (see also in Codepen):

I am trying to have a bar sit at the bottom of the users screen, but only within a column. I can use position:fixed; bottom:0; if I want the element to stretch across the entire screen, but I can't figure out how to make the bar stay within the column. See picture for example

In the above picture, I want the Like, Comment, Share box to always be at the bottom of the users screen, but stay within the column it's in.

I'm using bootstrap 4, and you can see the website here: https://www.arelplane.com/@arelenglish

EDIT:

HTML of page