Incorrect scrolling with fixed-top navbar

Topic: Incorrect scrolling with fixed-top navbar

svm pro asked 5 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).

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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 5 years ago

Marta, thank you!

Add comment

svm pro answered 5 years ago

0 0 Best answer

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

Thanks to Boris!

Add comment

svm pro answered 5 years ago

0 0 Best answer

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

Please insert min. 20 characters.

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:

-------------------------------------------------

<a class="navbar-brand" href="#"><strong>Brand</strong></a>

</button>

<a class="nav-link" title waves-effect waves-light data-offset="90" href="#F1">F1<span class="sr-only">(current)</span></a>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</form>

</div>

</nav>

----------------------------------------------

Thank you!

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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

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

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

svm

Pro User 10Support score
1Questions 2Answers 0Snippets