Topic: Bug: Vanilla Bootstrap Scrollspy not working after including MDB Pro stylesheet
ankurpathak pro asked 6 years ago
<!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <!-- <link href="css/mdb.min.css" rel="stylesheet"> --> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> <body data-spy="scroll" data-target="#navbar-example" data-offset="50" style="position: relative;"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" id="navbar-example"> <ul class="navbar-nav" > <li class="nav-item"> <a class="nav-link" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> </ul> </nav> <div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px; height: 400px;"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px; height: 400px;"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px; height: 800px;"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html> My vanialla bootstrap scroolspy is working if I comment MDB pro stylesheet in above markup. But movement I include it. It stops working. Why it doesn't work after including stylesheet of MDB pro.
Jakub Strebeyko staff answered 6 years ago
Hi there Ankur,
Investigating the snippet (in ChromeDevTools, while scrolling) reveals that the mechanism of dynamically applied .active
CSS class works. The "breaking" issue you came across stems out of the fact, that MDB nav items text gets styled in white and therefore the class change is not visible. Disabling the CSS rule turns it into the Bootstrap example:
.navbar.navbar-dark .breadcrumb .nav-item .nav-link,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link {
/* color: #fff; */ <----- the rule
-webkit-transition: .35s;
transition: .35s;
}
With Best Regards,
Kuba
ankurpathak pro commented 6 years ago
Hi Jakub, I did as suggested by you, but it didn't worked. Anyway, but your answer helped me to fix it by applying custom css to link holding dynamic active class in Navbar, like this: .navbar.navbar-dark .navbar-nav .nav-item .nav-link.active{ border-bottom: 2px solid white; } Thanking you. With regards, Ankur PathakJakub Strebeyko staff commented 6 years ago
Hey Ankur, I am very happy to learn you got the issue figured out. Take care! With Best Regards, Kubaankurpathak pro answered 6 years ago
Hi Jakub,
Please check this link from w3School which shows the behaviour I am expecting:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_scrollspy&stacked=h
Basically I am expecting, when I scroll the page and pass through the different
sections of the page, the link pointing to current section in Navbar automatically
get highlighted. This is the behaviour in pure vanilla bootstrap. But when you
will add the MDB pro stylesheet, this behaviour stops.
With regards,
Ankur Pathak
ankurpathak pro commented 6 years ago
And to add on In above code sample I have commented MDB pro stylesheet to get the that behaviour. The movement I uncomment it, that behaviour stops.Jakub Strebeyko staff answered 6 years ago
ankurpathak pro answered 6 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
ankurpathak pro commented 6 years ago
<!-- Required meta tags --> <!-- Bootstrap CSS --> Hello, world! body{ position: relative !important; } <!----> <!--Navbar--> <!-- Navbar brand --> <a href="#">Navbar</a> <!-- Collapse button --> <!-- Collapsible content --> <!-- Links --> <a href="#home">Home</a> <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> <!-- Dropdown --> <a>Section 4</a> <a href="#section41">Section 4.1</a> <a href="#section42">Section 4.2</a> <!-- Links --> <!-- Collapsible content --> <!--/.Navbar--> Home Section 1 Section 2 Section 3 Section 4.1 Section 4.2 <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> $(document).ready(function () { $('body').scrollspy({ target: '#main-navbar', offset: 50 }) }); I tied it not even working by javascipt instead of data api. The movement I comment MDB pro css. It starts working.Jakub Strebeyko staff commented 6 years ago
Hi there, are you getting any console output?