My navigation bar links seem to only be functioning on the homepage - any idea why?

I'm experiencing an issue with my navbar where the links only work on the homepage of my website. When I try to navigate to other pages through the navbar, I receive a 404 error. The navbar was created using a template from w3 school's. Does anyone have any insights into what might be causing this problem?

HTML:

<!-- Navbar (sit on top) -->
<div class="w3-top">
  <div class="w3-bar w3-white w3-wide w3-padding-small w3-card">
      <div id = homeID>
    <a href="index.php" class="w3-bar-item w3-button r-logo">Home</a>
    </div>
    <!-- Float links to the right. Hide them on small screens -->
    <div class="w3-right w3-hide-small">
    
    <div class="dropdown">
      <button class="dropbtn w3-bar-item w3-button r-font">Shop A</button>
      <div class="dropdown-content r-font">
        <a href="pages/a-clothing.php">Clothing</a>
        <a href="pages/a-makeup.php">Makeup</a>
        <a href="pages/a-skin+hair.php">Skin + Hair</a>
        <a href="pages/a-accessories.php">Accessories</a>
        <a href="pages/a-household.php">Homeware</a>
      </div>
    </div>
           
    <div class="dropdown">
      <button class="dropbtn w3-bar-item w3-button r-font">Shop B</button>
      <div class="dropdown-content r-font">
        <a href="pages/b-clothing.php">Clothing</a>
        <a href="pages/b-makeup.php">Makeup</a>
        <a href="pages/b-skin+hair.php">Skin + Hair</a>
        <a href="pages/b-accessories.php">Accessories</a>
        <a href="pages/b-household.php">Homeware</a>
      </div>
    </div>
    
    <div class="dropdown">
      <button class="dropbtn w3-bar-item w3-button r-font">Shop C</button>
      <div class="dropdown-content r-font">
        <a href="pages/c-clothing.php">Clothing</a>
        <a href="pages/c-makeup.php">Makeup</a>
        <a href="pages/c-skin+hair.php">Skin + Hair</a>
        <a href="pages/c-accessories.php">Accessories</a>
        <a href="pages/c-household.php">Homeware</a>
      </div>
    </div>
    
     <div class="dropdown">
      <button class="dropbtn w3-bar-item w3-button reddo-font">Shop D</button>
      <div class="dropdown-content r-font">
        <a href="pages/d-clothing.php">Clothing</a>
        <a href="pages/d-makeup.php">Makeup</a>
        <a href="pages/d-skin+hair.php">Skin + Hair</a>
        <a href="pages/d-accessories.php">Accessories</a>
        <a href="pages/d-household.php">Homeware</a>
      </div>
    </div>
    
      </div>
    </div>
  </div>

htmlcssuinavigationbar

Answer №1

(Update 31/03/21) If you encounter a 404 error, it means the server cannot locate the file at the specified path. To resolve this issue, move all pages/**/*.php files to the main folder where index.php is located. Next, in your existing code, remove the 'pages/' prefix from all href links. Finally, apply the modified navbar code to all other pages.

<!-- Navbar (sit on top) -->
<div class="w3-top">
  <div class="w3-bar w3-white w3-wide w3-padding-small w3-card">
      <div id = homeID>
    <a href="index.php" class="w3-bar-item w3-button r-logo">Home</a>
    </div>
    <!-- Float links to the right. Hide them on small screens -->
    <div class="w3-right w3-hide-small">
    
    <div class="dropdown">
      <button class="dropbtn w3-bar-item w3-button r-font">Shop A</button>
      <div class="dropdown-content r-font">
        <a href="a-clothing.php">Clothing</a>
        <a href="a-makeup.php">Makeup</a>
        <a href="a-skin+hair.php">Skin + Hair</a>
        <a href="a-accessories.php">Accessories</a>
        <a href="a-household.php">Homeware</a>
      </div>
    </div>
           
    <div class="dropdown">
      <button class="dropbtn w3-bar-item w3-button r-font">Shop B</button>
      <div class="dropdown-content r-font">
        <a href="b-clothing.php">Clothing</a>
        <a href="b-makeup.php">Makeup</a>
        <a href="b-skin+hair.php">Skin + Hair</a>
        <a href="b-accessories.php">Accessories</a>
        <a href="b-household.php">Homeware</a>
      </div>
    </div>
    
    <div class="dropdown">
      <button class="dropbtn w3-bar-item w3-button r-font">Shop C</button>
      <div class="dropdown-content r-font">
        <a href="c-clothing.php">Clothing</a>
        <a href="c-makeup.php">Makeup</a>
        <a href="c-skin+hair.php">Skin + Hair</a>
        <a href="c-accessories.php">Accessories</a>
        <a href="c-household.php">Homeware</a>
      </div>
    </div>
    
     <div class="dropdown">
      <button class="dropbtn w3-bar-item w3-button reddo-font">Shop D</button>
      <div class="dropdown-content r-font">
        <a href="d-clothing.php">Clothing</a>
        <a href="d-makeup.php">Makeup</a>
        <a href="d-skin+hair.php">Skin + Hair</a>
        <a href="d-accessories.php">Accessories</a>
        <a href="d-household.php">Homeware</a>
      </div>
    </div>
    
      </div>
    </div>
  </div>

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

Utilize ng-repeat to iterate over two arrays

Two arrays are at my disposal here. The first array contains option content, while the second array consists of option tags (i.e., A, B, C, D). How can I structure the layout for the 'input type="radio"' using ng-repeat? To start off, I am attem ...

javascripthtmlarraysangularjs

Display endless data within a set window size

I am looking to create a fixed-size window for displaying text from the component <Message/>. If the text is longer, I want it to be scrollable within the fixed window size. See screenshot below: Screenshot export default function AllMessages(){ ...

javascriptcssreactjs

Create a recursive CSS style for an angular template and its container

I am struggling with styling CSS inside an ng-container that is used in a tree recursive call to display a tree hierarchy. <ul> <ng-template #recursiveList let-list> <li *ngFor="let item of list" [selected]="isSelected"> <sp ...

cssangularrecursiontree

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

htmlcssasp.net

What is the correct way to insert a Vimeo video into an HTML document?

When embedding a YouTube video in HTML, the <iframe src="https://youtube.com/embed/videoId> element is used. But what about when you want to embed Vimeo videos using the <iframe> element? ...

htmlembedvimeo

How can you implement a repeating carousel with JavaScript?

I recently came across some carousels on and was intrigued by how they smoothly repeat the slides. Instead of jumping back to the first slide when reaching the end, it seamlessly transitions from the final slide back to the first one. I am eager to learn ...

javascripthtmlcsscarousel

Arrangement featuring two distinct types of tiles

Looking for a way to achieve this layout using just CSS or a combination of CSS and a little JS. Click on my avatar to see the reference image enlarged =) I've tried using floats and display options but haven't been successful. Take a look at htt ...

javascriptcsslayoutresponsive-design

What could be causing the Bootstrap icon to remain the same size without changing?

Take a look at this piece of code: <div class = "banner-image w-100 vh-100 d-flex justify-content-center align-items- center"> <div class = "content text-center"> <i class="bi-chevron-compact-down bi-7x"&g ...

htmlcssbootstrap-5bootstrap-icons

Switch the default blue color of Ngx-Pagination to a different color option

I am currently using the ngx-pagination plugin in my Angular 16 project and I would like to change the default blue color to a different one, is there anyone who can assist me with this? https://i.sstatic.net/NNuy7.png This is the HTML code snippet: < ...

cssangularngx-pagination

Font sizes may vary depending on whether the site is accessed with or without the "www" prefix

There is an odd occurrence on my website where the font size seems to change when viewing both the www version and non-www version. While setting up a 301 redirect is a common solution, I am intrigued by why this discrepancy exists as it is not something ...

htmlcss

Using the arrow keys, I must adjust the border sides

I am looking to switch between different sides of borders by using the arrow keys $(function(){ $(document).keydown(function(e){ switch(e.which){ case 38:$("#sh").css("border-top-color", "#fff"); //arrow up break; ...

javascripthtmljqueryuser-input

One of the two buttons on the form must be selected

Within a form, I have implemented two buttons that are structured like this: <button name="option" id="option" value="A" class="btn btn-outline-primary" onclick="storeTime()"> Select Option A </but ...

javascripthtml

Move the box upwards and change it to grayscale when hovering over the image, then reverse the effect when the hover

As I hover over the image, my goal is to make a gray box appear at the bottom and smoothly slide up. While it slides up, everything it covers should turn grayscale. When I move my mouse away from the image, I want the gray box to slide back down and remove ...

javascripthtmlcsscss-animations

"Can you share some tips on successfully transferring an image I've uploaded from an HTML page to

Looking for help with passing my uploaded image to Flask. Although the HTML page successfully uploads the image, I am facing challenges in transferring that image as a request to Flask. This is particularly important for image prediction purposes, but unfo ...

pythonhtmlmachine-learningflask

Is there a way to retrieve the text of li elements without assigning them IDs?

I have a list of names with four items inside it. My goal is to display the text of the selected name while hiding the others. Only one name should be visible at a time on the page. <ul id="names"> <li>John</li> <li>Alex</ ...

javascriptjqueryhtml

Guide to dynamically modify the font family value of the entered text

I have a simple question regarding customizing font styles. I have an input text field and a drop-down list with various font family options. My goal is to display the text entered in the input field in the selected font style from the dropdown list. Can ...

phphtmlmysqli

Use the mouse scroll to navigate and scroll a vertical-rl div from right to left

Here I have created a vertical-rl environment; (function() { function scrollHorizontally(e) { e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); document.documentElement.scrollLeft -= (delta * 50); ...

javascripthtmlcss

Is there an HTML code block available for embedding an HTML snippet?

This has got to be one of the most irritating things I've encountered haha. So, I'm using prettify.js to add syntax coloring to my code, but whenever I try to encode HTML using either prettify.js or prism.js, I have to format it like this with a ...

javascripthtmlprettifygoogle-code-prettify

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

Looking for a reliable solution to have a fixed footer that adjusts based on the page content? I've tested multiple samples, but they all fall short when it comes to incorporating AJAX elements. Is there a fixed footer out there that truly works seaml ...

javascriptjqueryhtmlcss

Arranging elements in a single line using Bootstrap 4

I need to align links in a row at the bottom, such as "Link 1 left bottom", "Link 2 center bottom", "Link 3 right bottom" but "Link 2" is not centered on PC and mobile devices. HTML: <div> <a id="contact" hre ...

htmlcsstwitter-bootstrapbootstrap-4