abouolia/sticky-sidebar

Having sidebar width always fitting the whole page's width

bacloud23 opened this issue · 2 comments

bacloud23 commented

First of all, thanks a lot for this amazing library @abouolia

For some reason, sticky-sidebar is recalculating .sidebar__inner div to fit the whole width of the page. This is problematic as users could not click on anything on the right of the sidebar (on left).

Attaching a capture to illustrate:
Capture

I think I followed exactly the simplest setup instructions but this is code anyway:

<body lang="en">
  <div class="main-content">
    <div id="sidebar" class="sidebar">
      <div class="sidebar__inner">
        <%- include('../partials/shared/sidebar'); %>
      </div>
    </div>
    <div id="content" class="content">
     ...
var sidebar = new StickySidebar('#sidebar', {
  topSpacing: 60,
  bottomSpacing: 60,
  containerSelector: '.main-content',
  innerWrapperSelector: '.sidebar__inner',
  // disable for small screens
  minWidth: 768
});
Deleted user commented

@abouolia do you know please ?

Deleted user commented

The issue was with my inner HTML and not sticky-sidebar.
I had to set my nav element CSS: width: fit-content