fixed navbar's inner link not scroll correcty

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: fixed navbar's inner link not scroll correcty

Chen Xiao pro asked 7 years ago

not a question, I'lll post answer by myself, maybe can help someone.

problem: when use fixed navbar to jump to the inner link, you'll find it's not scroll right place.

navbar part:

<ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link waves-light" href="#latestPart" mdbRippleRadius>latest<span class="sr-only">(current)</span>
 </a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" href="#historyPart" mdbRippleRadius>history</a>
 </li>
 <li class="nav-item">
 <a class="nav-link waves-light" href="#aboutPart" mdbRippleRadius>about</a>
 </li>
 </ul>

latest part:

<div id="latestPart" class="container">

when you click history, then click latest to come back, you'll find right scroll not at the top.

Chen Xiao pro answered 7 years ago

you should give some css trick to the latest part: 3rem just a height >= header height 
#latestPart:before { 
 display: block; 
 content: " "; 
 margin-top: -3rem;
 height: 3rem; 
 visibility: hidden; 
}
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

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
Chen Xiao
Pro User
52Support score
7Questions 8Answers
0Snippets likes 0Snippets