Docs

[Zeshan]

Hi there,

This is because the JavaScript responsible for the sidebar scrolling only works on screens larger than 1200px. However, you can try adding following JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {

  var $body    = $('body');
  var $sidebar = $('.x-sidebar');

  enquire.register("screen and (min-width: 1000px)", function() {
    if ( ! $body.hasClass('x-full-width-active') ) {
      $sidebar.find('.max.width').addClass('nano-content');
      $sidebar.find('.max.width').removeClass('x-container');
      $('.nano').nanoScroller({
        contentClass         : 'nano-content',
        preventPageScrolling : true
      });
    }
  });

  enquire.register("screen and (max-width: 999px)", function() {
    if ( ! $body.hasClass('x-full-width-active') ) {
      $sidebar.find('.max.width').addClass('x-container');
      $('.nano-content').removeClass('nano-content');
    }
  });

  if ( $body.hasClass('x-full-width-active') ) {
    $sidebar.find('.max.width').addClass('x-container');
  }

});

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[kirk74]

Tried. didn’t work unfortunately..

I have noticed others asking for this – so if it could be put on the wish list I thin it would be a great addition / customisation for ICON.

Thx!

[Rad]

Added as feature request. But there is no guarantee to be implemented. But you can always contact a developer to do customization 🙂

Thanks!

[D.J.]

Sorry for never replying – the code above worked perfectly!

[Nico]

Glad to hear that.

Have a great day! 🙂

[kirk74]

Hi DJ,

I am so glad this is working for you – would you pretty please pot here exactly what you used for the CSS and the Javascript to achieve this? That would be so useful for me, and I know many others have asked for this functionality.

Thx so much!

Kirstie 🙂

[jessica]

I would like the sidebar to stay on my screen longer, I don’t need the sidebar to scroll.
I used this solution:

/*Keep Sidebar showing on smaller screen sizes*/
@media (min-width: 481px) and (max-width: 1024px) {
.x-main.full {
width: 70% !important;
float: left !important;
}
.x-sidebar {
width: 29% !important;
float: right !important;
padding: 1%;
}
}

But, it’s not having an effect.

[jessica]

This reply has been marked as private.

[Lely]

Hello There,

Thanks for the admin credentials. If you want your sidebar to stay from 481px and wider, please use the following custom CSS:

@media (min-width: 481px) and (max-width: 1199px) {
.x-content-sidebar-active .x-sidebar {
position: fixed;
    top: 0;
    height: 100%;
    margin: 0;
    border-top: 0;
    z-index: 1031;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    right: 0;
    border-left: 1px solid #dfdfdf;
    border-left: 1px solid rgba(0,0,0,0.075);
    width: 29%;
    padding: 1%;
}
.x-navbar-fixed-left-active, .x-content-sidebar-active {
    padding-right: 30%;
}
}

As you see, I’ve used 1199px max width. This is because by default, the sidebar starts showing on the right side at a minimum 1200px screen width. So if you use the 1024px, from 1025px to 1199ppx, sidebar will be on the bottom.

Hope this helps.

[Author]

Posts