• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Bootstrap Navbar dropdown links not working (linking to multiple subfolders)

Community Beginner ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

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. 
TOPICS
Bootstrap , Code , Error , Extensions

Views

1.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , May 08, 2023 May 08, 2023

Nevermind, I solved it! I forgot to update the js file at the bottom of the page (add ../ to js/bootstrap.bundle.min.js

) I updated only the bootstrap css and I forgot about the js file. 

Votes

Translate

Translate
Community Beginner ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

Nevermind, I solved it! I forgot to update the js file at the bottom of the page (add ../ to js/bootstrap.bundle.min.js

) I updated only the bootstrap css and I forgot about the js file. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

Root relative links rarely work when testing locally.

What's the URL to your online site where links don't work?

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

Thanks for your reply. My site is not live yet, but I was able to figure the problem out. I had to make sure all js files were correctly linked to the page.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 08, 2023 May 08, 2023

Copy link to clipboard

Copied

LATEST

Glad you got it worked out.  🙂

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines