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

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

cms8000 pro asked 6 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 commented 6 years ago

Could you please share your code with us?

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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>

Add comment

cms8000 pro answered 6 years ago

0 0 Best answer

PERFECT - THANKS :-)

Add comment

cms8000 pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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>

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

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

cms8000

Pro User 40Support score
3Questions 4Answers 0Snippets