0

I'm using D8 and working on new theme in Open Social witch uses bootstrap/sass. In my theme I want the navigation bar (in the header region) to be sticky at the top of the screen. I've made some javascript/sass code but I can't get it to work. This is what I have done so far:

Created a new javascript function in the theme_name.js file:

    //-- Sticky Header
    (function($) {
        Drupal.behaviors.navbar = {
            attach: function (context, settings) {

                var nbar = $('.header');

                if (nbar.length) {
                    var elmHeight = $('.header-top').outerHeight(true);
                    $(window).scroll(function() {

                        var scrolltop = $(window).scrollTop();
                        if (scrolltop > elmHeight) {
                            if (!nbar.hasClass('sticky')) {
                                nbar.addClass('sticky');
                            }

                        } else {
                            nbar.removeClass('sticky');
                        }
                    });
                }
            }
        }
    })();

This is a code snippet from the navbar.scss file:

.navbar-sticky-top {
  @include z-depth-3;
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-navbar-sticky;
}

Code snippet from the index.twig file:

<nav class="navbar navbar-default navbar-sticky-top" id="top"
role="banner">
    <div class="container">
      <div class="navbar-header">
...

This is the content of the region--header.html.twig file:

{% if content %}
  <nav {{ attributes.addClass('navbar navbar-default navbar-sticky-top') }} role="banner">
    <div class="container">
      {{ content }}
    </div>
  </nav>
{% endif %}

What am I missing here?

0

Seems like you're over-complicating it by re-writing things that bootstrap already does. The stock bootstrap theme and most of it's subthemes should have a setting in the theme for setting a fixed nav bar.

See Appearances -> Theme settings -> Components -> Navbar. There is an option for fixed top navbar.

If that does not do what you want, there is also the Bootstrap Affix plug-in which should be part of the standard drupal bootstrap theme.

See: This W3school page for details.

0

I see that in the latest version of Open Social, the header bar is sticky. So maybe updating to a newer version helps you out!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.