Bootstrap Affix and an issue with Offset CSS

[toplisek]

I have seen many posts related to Affix and also article:

Understanding Bootstrap's Affix and ScrollSpy plugins — SitePoint

After testing I see that offset CSS inside Bootstrap includes CSS code and preventing scroll on narrow devices:

html {
    overflow-x: hidden; /*  */
}

I have solution to set ID like:

html .overflowrapper {
 overflow-x: hidden;
}

Where to set this type of ID that .overflowrapper will actually work inside Bootstrap:
http://getbootstrap.com/examples/offcanvas/

Code is like:

  <div class="row row-offcanvas row-offcanvas-right">

    <div class="col-xs-12 col-sm-9">
      <p class="pull-right visible-xs">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>

Now there is an issue as fixed header will not work due to this CSS. Is there some solution how to fix this in the correct way or I just delete Offset CSS as mentioned above?

When you have the CSS style overflow-x:hidden on the body element then the affix plugin does not work. It simply will not switch between affix, affix-top and affix bottom.

[PaulOB]

Do you have a live example that we can play with otherwise we would have to build a demo just to test anything out?

The off-canvas nav needs overflow-x on html,body or the viewport gets a horizontal scrollbar and will break mobile.

If your issue that the affix isn’t working on small screens then I would be tempted not to use a fixed element on small screens and just save it for larger screens. You should be able to do this with media queries (although I haven’t looked at the documentation for affix yet).