Bug: Vanilla Bootstrap Scrollspy not working after including

Topic: Bug: Vanilla Bootstrap Scrollspy not working after including MDB Pro stylesheet

ankurpathak pro asked 7 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.

ankurpathak pro commented 7 years ago

Hello, world! body{ position: relative !important; }    <a href="#">Navbar</a>    <a href="#home">Home</a> <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a>  <a>Section 4</a> <a href="#section41">Section 4.1</a> <a href="#section42">Section 4.2</a>    Home Section 1 Section 2 Section 3 Section 4.1 Section 4.2   $(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 7 years ago

Hi there, are you getting any console output?

Add comment

ankurpathak pro answered 7 years ago

0 0 Best answer

Hi Jakub, No output in console. Console is clean. You can try any of two above two code samples. The movement you add MDB Pro stylesheet, it stops working. It works if you add nav-tab class along with navbar-nav class, But it of no use. It should work with simple navbar-nav without addition of nav-tab or nav-pills to it. Thanking you. With regards, Ankur Pathak

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Hi there Ankur, If the bootstrap scrollspy snippet is supposed to display an upper menu with links that get you to consecutive sections, then works fine on my end. What is behavior you are getting and in what what is it different from your desired result? Thanks. With Best Regards, Kuba

Add comment

ankurpathak pro answered 7 years ago

0 0 Best answer

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 7 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.

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

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 7 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 Pathak

Jakub Strebeyko staff commented 7 years ago

Hey Ankur, I am very happy to learn you got the issue figured out. Take care! With Best Regards, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

ankurpathak

Pro User

27Support score
5Questions 2Answers

0Snippets likes 0Snippets