Incorrect scrolling with fixed-top navbar

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Incorrect scrolling with fixed-top navbar

svm pro asked 7 years ago

The jump to the linked section is not calculating the navbar height. The referenced section partly hided by navbar itself. Especially this visible on collapsed navbar(mobile view).

Marta Szymanska staff pro premium answered 7 years ago

Hi, have you tried our solution with data-offset? If you have and item in the navbar, add to it the data-offset with the value as in the example below: 
<li class="nav-item">
<a class="nav-link title waves-effect waves-light" href="#features" data-offset="90">Features</a>
</li>
Best, Marta

svm pro answered 7 years ago

Hi Marta,
the same result with data-offset. Also, please take in to consideration that on small monitors the height of navbar might much more 90.....
The code:
-------------------------------------------------
<nav id="topNavbar" class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
            <div class="container">
                <a class="navbar-brand" href="#"><strong>Brand</strong></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
                    <ul class="navbar-nav mr-auto smooth-scroll">
                        <li class="nav-item active">
                            <a class="nav-link" title waves-effect waves-light data-offset="90" href="#F1">F1<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" title waves-effect waves-light data-offset="90" href="#F2">F2</a>
                        </li>
                       <li class="nav-item">
                            <a class="nav-link" title waves-effect waves-light data-offset="90" href="#F3">F3</a>
                        </li>
                      <li class="nav-item">
                            <a class="nav-link" data-offset="90" href="#F4">F4</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-offset="90" href="F5">F5</a>
                        </li>
                    </ul>
                    <form class="form-inline">
                        <div class="md-form my-0">
                            <input id="searchTop" class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                           <a class="btn btn-purple btn-rounded"><i class="fa fa-user left"></i> Sign up!</a>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
----------------------------------------------
Thank you!

svm pro answered 7 years ago

Here is the workaround: https://mdbootstrap.com/support/smooth-scroll-automation-with-navbar-fixed-top/

Thanks to Boris!

Marta Szymanska staff pro premium answered 7 years ago

Hi, you can change the value, it doesn't have to be 90, it depends on you, what offset is right for you. And about the script from Boris, when you add this to the scripts in your index.html file it will work, it doesn't have to be in mdb.js to work. Best, Marta  

svm pro commented 7 years ago

Marta, thank you!
Write
Create snippet
Please insert min. 20 characters.

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
svm
Pro User
10Support score
1Questions 2Answers
0Snippets likes 0Snippets