Topic: Incorrect scrolling with fixed-top navbar

svm pro asked 6 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 Wierzbicka staff answered 6 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 6 years ago

Marta, thank you!

svm pro answered 6 years ago


svm pro answered 6 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!

Marta Wierzbicka staff answered 6 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

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

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