Click here to Skip to main content
14,603,826 members
Rate this:
Please Sign up or sign in to vote.
When I try to click "Products" (Nav Bar like this: Home | Products | About | Contact) it doesn't actually link to the products page, just acts as a hover spot so the dropdown menu of "Cattle" and "Hay" appear. I would still like there to be a general product page, then the specific pages from the dropdown menu as well.

Here's my code, please help!

<li class="nav-item dropdown">
                <a class="nav-link active dropdown-toggle" href="products.html" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
                <div class="dropdown-menu" aria-labelledby="dropdown04">
                  <a class="dropdown-item" href="cattle.html">Cattle</a>
                  <a class="dropdown-item" href="hay.html">Hay</a>
                  </div>
              </li>


What I have tried:

I've tried to change the <a class tag but not sure what to do.
Posted
Updated 14-Jun-18 7:21am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Adding data-toggle="dropdown" to the link ensures that the dropdown menu appears when you click the link. It prevents the browser from following the link, since this would prevent you from seeing the dropdown menu.

The simplest solution is to add the link to the dropdown menu as well:
<li class="nav-item dropdown">
    <a class="nav-link active dropdown-toggle" href="products.html" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
    <div class="dropdown-menu" aria-labelledby="dropdown04">
        <a class="dropdown-item" href="products.html">All products</a>
        <a class="dropdown-item" href="cattle.html">Cattle</a>
        <a class="dropdown-item" href="hay.html">Hay</a>
    </div>
</li>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100