I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, but once the user returns to the index.html page, the styling is not displaying properly. How can I resolve this issue? Below are the hrefs from the contact.html:
<li class="nav-item">
<a class="nav-link" href="/index.html/#footer">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.html/#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.html/#cta">Download</a>
</li>
Your assistance is appreciated.
If more information is required, I will provide additional details - when clicking on the navbar links in the contact.html page, an error occurs instead of loading the index page as expected:
Error: ENOTDIR: not a directory, stat '/home/mp/code/m-p/tflix/tflix-start/index.html/'
Here are some CSS and HTML snippets:
Bootstrap navbar in contact.html
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<a class="navbar-brand" href="#">tinflix</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="/index.html/#footer">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.html/#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.html/#cta">Download</a>
</li>
</ul>
</div>
</nav>
</body>
In index.html, the content is divided into sections with corresponding ids like:
<section id="pricing">
<h1 class="big-white-header"> This is the pricing section </h1>
</section>
As for the CSS, here is an example snippet:
body {
font-family: 'Montserrat', sans-serif;
text-align: center;
}
h1, h2, h3, h5 {
font-weight: bold;
}
.big-white-header {
color: #fff;
font-size: 3rem;
line-height: 1.5;
}
Please let me know if further clarification is needed, thank you for your support!
The issue was resolved by removing the extra slashes from the nav-link hrefs! Grateful for all the assistance provided.