When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

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.

Answer №1

Here is a solution to fix the issue: Eliminate the slashes from the href links of navigation items as shown below:

 <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>

I'm not sure why this change fixes the problem, but it does indeed resolve it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Currently handling Angular and Bootstrap in my work, but facing challenges with table manipulation and collapsing rows. I fetch data from a database and showcase it in a dynamically generated table using *ngFor and two rows within an ng-container. My goal ...

There is no value inputted into the file

I'm facing a small issue while trying to retrieve the value from my input of type="file". Here is the code snippet: <tr ng-repeat="imagenDatos in tableImagenesPunto | filter: busquedaDatosPunto " > <td>PNG</td> <td>{{imag ...

The JSON.stringify() function helps to convert data into a JSON-formatted string, avoiding any potential "c

connection.query( 'SELECT DeskName FROM desks WHERE stat = ?',["Booked"], function(err, rows){ if(err) { throw err; }else{ try{ var dataToParse = new Array(); dataToParse = rows; res.render('workspaces.html',{parsedArray : JS ...

The Bootstrap website is experiencing issues with mobile responsiveness as a result of content overflow

As a newcomer to web development, I am currently working on a Bootstrap website. Everything seemed to be working fine in desktop mode, but I encountered an issue in the mobile view where some Bootstrap columns were overflowing, causing a vertical white spa ...

Issue with the functionality of Material-ui tooltip

I'm exploring the implementation of the material-ui tooltip feature and I am hoping to have it displayed at the top of the element. Despite specifying placement="top", the tooltip still does not appear as intended. You can view a demo of this issue b ...

Attempting to align a banner image in the middle using CSS styling

I'm having some trouble getting the banner image to be centered on all screen sizes. It looks good on smaller screens, but on larger ones it seems to be shifting to the left. Here's what I've attempted so far: .banner { padding-top: ...

Uh-oh! An unexpected type error occurred. It seems that the property 'paginator' cannot be set

I am developing a responsive table using Angular Material. To guide me, I found this helpful example here. Here is the progress I have made so far: HTML <mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder ...

Unable to alter the dimensions of the `symbol` element from an external SVG using CSS, although the other `symbol` within the same document is responsive to styling changes

Could someone help me find the bug in my code related to resizing SVG symbols with CSS? I am able to resize one <symbol> from an external SVG file, but not another <symbol> from the same file. In my CSS, I am trying to change the width and hei ...

Stop mega menu items from disappearing when hovered over

I'm currently working on a web page that features a mega menu. When I hover over the mega menu, it displays its items. However, when I try to hover over the items, they disappear. Here is the HTML code snippet: <li class="dropdown mega-dropdown m ...

The identical page content is displayed on each and every URL

Implementing a multi-step form in Next JS involves adding specific code within the app.js file. Here is an example of how it can be done: import React from "react"; import ReactDOM from "react-dom"; // Other necessary imports... // Add ...

Sending POST Requests with Node and ExpressJS in the User Interface

Just diving into the world of Node.js and Express.js, I'm attempting to create a form submission to an Express.js backend. Below is a snippet of the code I am working with: var author = 'JAck'; var post = 'Hello World'; var body ...

Do the values returned by window.screen.width and height represent CSS pixels or physical screen pixels?

After exploring the API named screen and visiting this documentation link, my initial anticipation was that I would receive information regarding actual screen size pixels. https://developer.mozilla.org/en-US/docs/Web/API/Screen/width https://i.sstatic.n ...

Querying the api for data using Angular when paginating the table

Currently, I have a table that retrieves data from an API URL, and the data is paginated by default on the server. My goal is to fetch new data when clicking on pages 2, 3, etc., returning the corresponding page's data from the server. I am using an ...

Navigating through Sails.js: A comprehensive guide on executing test cases

Being a beginner in sails, node, and js, I may be missing out on some obvious steps. My environment includes sails 0.10.5 and node 0.10.33. Although the sails.js documentation covers tests in , it does not provide instructions on how to actually execute ...

How to Extract a URL from an Anchor Tag without an HREF Attribute Using Selenium

How can I make a link, which normally opens in a new window when clicked, open in the current window instead? The link does not have an href attribute, only an id and a class. For example: <a id="thisLink" class="linkOut">someLinkText</a> I r ...

How to Use Radio Buttons in Material-UI to Disable React Components

Just starting out with ReactJS and Material-UI, I've been experimenting with them for about 3 weeks. Currently, I'm facing a challenge where: - There are 2 radio buttons in a group and 2 components (a text field and a select field); - The goal is ...

Utilize a single function to toggle the visibility of passwords for multiple fields upon clicking

Is there a way to optimize the function used to hide passwords for multiple fields when clicked? Instead of having separate functions for each field, I would like to have one function that is only active on the clicked button. For example, if the toggle ...

Guide: Creating an AngularJS directive for displaying a jQuery dialog that triggers submission on pressing the Enter button

Looking to create a similar functionality to the jQuery modal form Dialog in my AngularJS app to collect the username from the user. I've tried using the twitter-bootstrap modal and AngularUI dialog, but both are lacking in two key areas: Auto-focu ...

step-by-step guide for resolving issues with downloading files in node.js

I've been attempting to download files from my server using node.js with the res.download function from Express, but I keep getting an undefined error. The folder path is D:\program\web\java_script\Node\my_project\ketabk& ...

Stop text from being selected across all browsers in Firefox

My current CSS includes: *{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } If you visit http://jsfiddle.net/KyF5x/ and click be ...