Search code examples
htmlcssbootstrap-4navigationanchor

Bootstrap 4 anchor links not directing to target

So I have a bootstrap4 one page index page with a navbar that has hyperlinks that jumps to the correct section of the page. Example: This nav link

  • goes to the section with id="events:

    <li class="nav-item"><a class="nav-link" href="#events">Events</a></li>

<div id="events" class="events-container section-container text-left vents px-md-5">

    I have created a separate contact.php page with the same navbar and links and am linking to sections on the index page from this contact.php page using the following code:

    <li class="nav-item"><a class="nav-link" href="index.php#events">Events</a></li>

    However, this is not working. Clicking on the link doesn't do anything. All list links will link to the index.php page but not a particular section on that page. Any help or suggestions would be most grateful.

    • Solution

  • After spending hours modifying the css and deleting and adding different elements of code-finally found that the problem was the isotope jquery codes-think it was interfering with the anchor links in some way. I removed the isotope.js files from the contact.php page. I am new to javascript and didn't realise how jquery affects other elements. Any hints or suggestions about overriding the isotope affects on anchors much welcome:)