Forums

C5-8.2.1: How to add Bootstrap Affix plugin to theme?

Permalink
Could you please tell me how to add a Bootstrap Affix plugin to theme and how to use it then? All I need is to make my 'nav' menu bar get fixed to the top of screen on scrolling to a certain point.

So far I've registered the assets in the page_theme.php:
$this->providesAsset('javascript', 'bootstrap/*');
$this->providesAsset('css', 'bootstrap/*');

uploaded bootstrap.min.js into the 'js' folder in my theme and added the following attributes in the header.php:
<div class="navigation" data-target=".ccm-responsive-navigation" data-spy="affix" data-offset-top="50">
    <?php
    $a = new GlobalArea('Header Navigation');
    $a->display();
    ?>
</div>

It doesn't work. I can see the classes change but the div doesn't get fixed.

I also tried doing that through JS:
$('.navigation').affix({
    offset: {
        top: $('.navigation').offset().top
    }
});

+ CSS:
div.navigation.affix {
    top: 40px;
}

In this case the nav bar changes position (drops down to the offset) but then again starts scrolling with the page. If I add 'position: fixed;' to the .affix css, the nav bar gets fixed in position, even without the bootstrap.min.js. But what's the point of the Bootstrap's JS in that case if I can do the same myself?

What am I doing wrong here?

Thank you.
linuxoid
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi linuxoid,

Have you reviewed the Bootstrap Affix documentation?
https://getbootstrap.com/docs/3.3/javascript/#affix...

"Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions."

Did you create the CSS for the three plugin classes?
linuxoid replied on at Permalink Reply
linuxoid
I've spent hours trying to figure out why it doesn't work while ... it actually does, doh!

The thing is while logged in, there's the C5 bar on top of the page which breaks the layout for fixed blocks because they're positioned according to the top of the screen and not the top of the available screen area below the bar.

It all works like a charm right after I logged out and refreshed the screen )))