I am trying to implement scrollspy on a second nav to a webpage. I a testing in a MAMP environment using Nginx web server. the host is named rtmf-bs5.local. So the web url becomes https://rtmf-bs5.local:7443/. the page I am testing the scrollspy on is https://rtmf-bs5.local:7443/right-to-manage-guidance.php. So I have the following markup on this page:
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="How to apply for Right to Manage with RTMF">
<title>Right to Manage Guidance</title>
<link rel="stylesheet" href="css/styles.css" /> // bootstrap compiled in here
</head>
<body id="rtm-guidance" data-bs-spy="scroll" data-bs-target="#spy-nav">
<?php include 'includes/header.php'; ?>
<main>
<section class="banner">
<div class="container-fluid">
<div class="row">
<div class="col d-flex">
<h1 class="align-self-center">Right to Manage Guidance</h1>
</div>
</div>
</div>
</section>
<span class="position-absolute trigger"></span>
<nav id="spy-nav" class="navbar navbar-expand-sm navbar-light bg-light spy-nav sticky-top">
<div class="container-fluid">
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#sec-1">RTM costs</a>
<a class="nav-link" href="#sec-2">Forming a company</a>
<a class="nav-link" href="#sec-3">Do you qualify</a>
</div>
</div>
</div>
</nav>
<section id="sec-1">
….
</section>
<section id="sec-2">
….
</section>
<section id="sec-3">
….
</section>
<div class="sidebar" id="sticky-button"> <a role="button" href="estimate.php" name="Get an Estimate" aria-label="Get An Estimate">Get an Estimate</a></div>
<a href="#" class="back-to-top"><i class="fa fa-chevron-circle-up fa-5x" aria-hidden="true"></i></a>
</main>
<?php include 'includes/footer.php'; ?>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The problem here is when I click one of the scrollspy links, instead of directing to the correct section. Which for example, for sec-1, would be https://rtmf-bs5.local:7443/right-to-manage-guidance.php#sec-1 It directs to this URL https://rtmf-bs5.local:7443/#sec-1 which re-directs to the index page.
Is this a MAMP setup issue? or am I missing something here? any pointers would be much appreciated.