Nav links only work as scroll-down links, not to other pages

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Nav links only work as scroll-down links, not to other pages

cms8000 pro asked 7 years ago

When I want to use a link to another html page instead of an anchor, the link will not work in the nav bar. Nav only allows "#services" links, but not to "services.html".   Anyone else?

Bartłomiej Malanowski staff pro premium commented 7 years ago

Could you please share your code with us?

Bartłomiej Malanowski staff pro premium answered 7 years ago

Please add .smooth-scroll class only to <li>'s that contains links to anchors. It's because we use "preventDefault()" on links inside .smooth-scroll class so your code should be:

<ul class="navbar-nav mr-auto">
  <li class="nav-item smooth-scroll">
    <a class="nav-link font-up" href="#home">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item smooth-scroll">
    <a class="nav-link font-up" href="#about" data-offset="100">About Us</a>
  </li>
  <li class="nav-item">
    <a class="nav-link font-up" href="services.html" data-offset="20">Services</a>
  </li>
  <li class="nav-item smooth-scroll">
    <a class="nav-link font-up" href="#portfolio" data-offset="100">Portfolio</a>
  </li>
  <li class="nav-item smooth-scroll">
    <a class="nav-link font-up" href="#contact" data-offset="100">Contact</a>
  </li>
</ul>

cms8000 pro answered 7 years ago

Sure. Just use any of the provided samples and edit the menu navigation. In the code below, I replaced the services link...   
<ul class="navbar-nav mr-auto smooth-scroll">
 <li class="nav-item">
 <a class="nav-link font-up" href="#home">Home <span class="sr-only">(current)</span></a>
 </li>
 <li class="nav-item">
 <a class="nav-link font-up" href="#about" data-offset="100">About Us</a>
 </li>
 <li class="nav-item">
 <a class="nav-link font-up" href="services.html" data-offset="20">Services</a>
 </li>
 <li class="nav-item">
 <a class="nav-link font-up" href="#portfolio" data-offset="100">Portfolio</a>
 </li>
 <li class="nav-item">
 <a class="nav-link font-up" href="#contact" data-offset="100">Contact</a>
 </li>
 </ul>

cms8000 pro answered 7 years ago

PERFECT - THANKS :-)
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: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
cms8000
Pro User
40Support score
3Questions 4Answers
0Snippets likes 0Snippets