Topic: .scrolling-navbar not working with MDB Free 4.4.0 Beta using their own documentation.
Shawn Pennington
free
asked 5 years ago
Shawn Pennington
free
answered 5 years ago
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 5 years ago
And, once I get some spare cash, I'm definitely buying the Pro version.dminchev free commented 5 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.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Ahmed Ayman free commented 5 years ago
yes it is not working with me also i wish to solve this problem in shortest timeShawn Pennington free commented 5 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.