Answered
Bootstrap Navbar dropdown links not working (linking to multiple subfolders)
Hi all, I need help with a problem that needs to be solved quickly. I have a website with pages in 3 subfolders, and the dropdown links do not work when clicked on in page within those folders. Here is my folder structure:
Main-->first folder-->html pages
-->second folder-->html pages
-->third folder-->html pages
For the links in the subfolders, I edited the links accordingly, but I am not sure why only the dropdown links on those pages are not working. The single links are working, as do the linked css and bootstrap files, which are in their own css and js folders. I am not sure what I am doing wrong. Here is my navbar code for the Article1 page:
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark" >
<div class="container-fluid">
<a class="navbar-brand" href="#">Navigation</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="../index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../CV.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../cs.html">Candidate Statement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../criteria.html">Department Criteria</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Research Papers
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="article1.html">Article 1</a></li>
<li><a class="dropdown-item" href="process1.html">Referee Process 1</a></li>
<li><a class="dropdown-item" href="article2.html">Article 2</a></li>
<li><a class="dropdown-item" href="process2.html">Referee Process 2</a>
</li>
<li><a class="dropdown-item" href="readership.html">Readership and Downloads</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Creative Work
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../creative/page1.html">Page 1</a></li>
<li><a class="dropdown-item" href="../creative/page2.html">Page 2</a></li>
<li><a class="dropdown-item" href="../creative/page3.html">Page 3</a></li>
<li><a class="dropdown-item" href="../creative/page4.html">Page 4</a></li>
<li><a class="dropdown-item" href="../creative/page5.html">Page 5</a></li>
<li><a class="dropdown-item" href="../creative/page6.html">Page 6</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Conferences
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../conference/page7.html">Page 7</a></li>
<li><a class="dropdown-item" href="../conference/page8.html">Page 8</a></li>
<li><a class="dropdown-item" href="../conference/page9.html">Page 9</a></li>
<li><a class="dropdown-item" href="../conference/page10.html">Page 10</a></li>
<li><a class="dropdown-item" href="../conference/page11.html">Page 11</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I've been trying to figure this out on my own, but I feel stuck. If I can't fix it, I will have to get rid of the subfolders, but I really don't want to because my site is so big and I want to keep things organized. If someone could help me, I would really appreciate it.
AdChoices