Topic: .scrolling-navbar not working with MDB Free 4.4.0 Beta using their own documentation.

Shawn Pennington free asked 6 years ago


In the documentation, using Components > Navbar > section about Scrolling Navbar -- If you use that code (which just involves adding .scrolling-navbar to a .fixed-top nav element) you will never see the navbar doing the slight shrink/expand on scrolling action as in the example.

Ahmed Ayman free commented 6 years ago

yes it is not working with me also i wish to solve this problem in shortest time

Shawn Pennington free commented 6 years ago

Check out my solution and please inform if it fixed the problem for you also. If so, I'll see if I can mark this question solved or closed or whatever.

Shawn Pennington free answered 6 years ago


After judicious use of Developer Tools in Chrome comparing the working examples on the documentation page for .scrolling-navbar and noting that the example does *not* use the structure of the javascript includes the the tutorial uses (it uses a single minified js file vice the 3 or 4 included in the boilerplate index.html from the MDB 4.4.0 beta zip file), I decided to compare that minified js file from the working example to the mdb.min.js in the boilerplate HTML  index page and discovered the the working example has an extra function specifically for the scrolling-navbar behaviour that is missing from the mdb.min.js in the boilerplate (actually, it looks like it was inexpertly ripped out as there is an awkward dangling ';' where the scrolling-navbar function handler should be).  Also, comparing the CSS between the working example and the CSS boilerplate, I noticed a missing media query and definition for handling the .scrolling-navbar class. mdb.js in boilerplate code from unpacking the zip has this:
WOW.prototype.doSync = function (node) {

  if (node.className) {

    var classes = node.className.split(' ');

    if (classes.indexOf(this._boxClass) !== -1) {
      this._prepareBox(node);
    }

  }

};
/*!
 * Waves v0.7.5
 * http://fian.my.id/Waves
 *
 * Copyright 2014-2016 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE
 */

; # <--- Notice the useless extra ; as if something was deleted here; see next section
(function (window, factory) {
    'use strict';
However, in the working example from the documentation (which only includes a single JS file, compiled.min.js (here I un-minified it)), it has an extra function where the almost-completely-deleted line appears above:
WOW.prototype.doSync = function(e) {
    e.className && -1 !== e.className.split(" ").indexOf(this._boxClass) && this._prepareBox(e)
};
# Comment by me: Below begins the missing function 
var OFFSET_TOP = 50
  , TRANSITION_DURATION = 1500;
$(window).scroll(function() {
    $(".navbar").length && ($(".navbar").offset().top > OFFSET_TOP ? $(".scrolling-navbar").addClass("top-nav-collapse") : $(".scrolling-navbar").removeClass("top-nav-collapse"))
}), # End of missing function (don't forget this comma, or to clean up the the closing parentheses and braces as the end of this function when adding to mdb.js that comes with 
    # this software
function(e, t) {
    "use strict";
    "function" == typeof define && define.amd ? define([], function() {
Next we  need to fix the CSS file (mdb.css) so that it has the missing class definition and media query to make this work, so add this to the bottom of mdb.css:
.navbar.scrolling-navbar {
    z-index: 100
}

@media (min-width: 600px) {
    .navbar.scrolling-navbar {
        -webkit-transition:background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
        padding-top: 12px;
        padding-bottom: 12px
    }

    .navbar.scrolling-navbar .navbar-nav>li {
        -webkit-transition-duration: 1s;
        transition-duration: 1s
    }

    .navbar.scrolling-navbar.top-nav-collapse {
        padding-top: 5px;
        padding-bottom: 5px
    }

    .intro-margin.view {
        overflow: visible;
        margin-top: -56px
    }
}
Now, you can include the unminified files (which are the files we edited) or re-minify them and leave your includes alone. And voila! now it works.  Wasted a whole day tracking down this bug.  I just wish their examples would use their own product so they could catch these errors.  Do *not* think I am dissing  on MDB -- this is the most enjoyable means I have ever used to quickly and so easily spank out pages that comply with Bootstrap v4 and Material Design while I am in the process of learning both. I needed to update my corporate website quickly to these technologies but i was still in the process of going through all of each's tutorials -- this product MDB makes a painless joy to use. If anyone reading this finds it useful, please share any fixes you find with others like I have -- Let's all help make this a stellar product!

Shawn Pennington free commented 6 years ago

And, once I get some spare cash, I'm definitely buying the Pro version.

dminchev free commented 6 years ago

Thanks for the research and the useful info. It's somehow strange to leave such a bug for the essential behavior of the navbar.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags