Bootstrap Sidebar by Colorlib V1 scroll

Site Feedback
1

Hello,

I downloaded and am trying to use the Bootstrap Sidebar by Colorlib V1 template for an internal home use site, but I was wondering if there is a way to get the sidebar to stay in it’s position on the page and not scroll with the rest of the verbiage on the left hand part of the page. I would only need it to scroll if the menu options are expanded. Thanks in advance.

-Chris

2

hey there

It should be possible, there must be a class name or ID of the sidebar that needs to be change, or it can be also disabled by the JS, please note you need some basic knowladge of HTML and css to work with html templates

3

I have tried a few different methods that I have Googled, but I can’t get it to work correctly. I was wondering if you all could tell me how to do it?

4

Hi

Please provide direct link to the page and I will check it

5

Hello,

is there already a solution to the problem. I am confronted with the same problem.

Regards,
Ale

6

Hi there

Ale, it’s not a problem, its is a feature and can be added to any sidebar, there are many solutions in the web about this

7

Hi,

I have expressed myself incorrectly. It is not a problem. But I would like to use the feature. However, I haven’t found anything or I’m just too new to the topic that I can’t implement it properly. Hence the request if you can help. Surely you just have to insert a class?

This is the example script, which I use:

<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
   <div class="custom-menu">
      <button type="button" id="sidebarCollapse" class="btn btn-primary">
      <i class="fa fa-bars"></i>
      <span class="sr-only">Toggle Menu</span>
      </button>
   </div>
   <div class="p-4">
      <h1><a href="index.html" class="logo">Portfolic <span>Portfolio Agency</span></a></h1>
      <ul class="list-unstyled components mb-5">
      <li class="active">
         <a href="#"><span class="fa fa-home mr-3"></span> Home</a>
      </li>
      <li>
         <a href="#"><span class="fa fa-user mr-3"></span> About</a>
      </li>
   </div>
</nav>

Best Regards,
Alex

8

Hi

Any chance to post your page with the sidebar here?

9

Hello,

I tried that, however the limitations of the site had forbidden the posting (too many links etc.).
But I just used this example - only with other labels:

https://colorlib.com/etc/bootstrap-sidebar/sidebar-05/

Thanks in advance.
Alex

10

Ok, the solution is to use the class “sticky-top” and put the collapse button under the nav-Tag:

  <div class="wrapper d-flex align-items-stretch">
    <nav id="sidebar">
      <div class="p-4 sticky-top">
      <div class="custom-menu">
        <button type="button" id="sidebarCollapse" class="btn btn-primary ">
          <i class="fa fa-bars"></i>
        </button>
      </div>

Regards,
Alex

11

Hi

Ok, thanks for sharing your solution :slight_smile: