Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kelvin Atawura
.a{fill-rule:evenodd;}techdegree
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Points

bootstrap nav issue

l created a navbar using bootstrap but l nested some dropdowns into a dorpsdown. That sounds a bit confusing but when you look at the code below you notice that l have nested a drop into the product link which always drops down. This product dropdown works perfectly on desktops but cease to work on mobile and tablets. any idea how i can solve this please? Nick Pettit Guil Hernandez Joy Kesten

`<ul class="nav navbar-nav navbar-right">

        <li class="active"><a href="index.html">Home</a></li>

        <li><a href="about.html">About</a></li>
        <li class="dropdown">
          <a data-toggle="dropdown" hidden-sm data-target="#">Products<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="menu-item dropdown dropdown-submenu"><a data-toggle="dropdown" data-toggle="dropdown">Industrial Consumables</a>
              <ul class="dropdown-menu">
                <li class="menu-item ">
                  <a itemprop="url" href="fastener.html">Fasteners</a>
                </li>
                <li class="menu-item ">
                  <a itemprop="url" href="general.html">General</a>
                </li>
                <li class="menu-item ">
                  <a itemprop="url" href="electrical.html">Electrical</a>
                </li>             
              </ul>
            </li>
            <li class="menu-item dropdown dropdown-submenu"><a data-toggle="dropdown" data-toggle="dropdown">Health and Safety</a>
              <ul class="dropdown-menu">
                <li class="menu-item ">
                  <a itemprop="url" href="pProtective.html">Personal Protective</a>
                </li>
                <li class="menu-item ">
                  <a itemprop="url" href="workspace.html">Workspace</a>
                </li>
                <li class="menu-item ">
                  <a itemprop="url" href="industrialequip.html">Industrial Equipments</a>
                </li>

              </ul>
            </li>
            <li class="menu-item dropdown dropdown-submenu"><a data-toggle="dropdown" data-toggle="dropdown">Fabrication</a>
              <ul class="dropdown-menu">
                <li class="menu-item ">
                  <a itemprop="url" href="metal-fab.html">Metal fabrication</a>
                </li>
                <li class="menu-item ">
                  <a itemprop="url" href="pallet.html">Pallet & Storage Facilities</a>
                </li>
                <li class="menu-item ">
                  <a itemprop="url" href="special_fab.html">Special Fabrication</a>
                </li>       
              </ul>
            </li>

            <li class="menu-item dropdown dropdown-submenu"><a data-toggle="dropdown" data-toggle="dropdown">Office and Home</a>
              <ul class="dropdown-menu">
                <li class="menu-item ">
                  <a itemprop="url" href="stationery.html">Home Stationery</a>
                </li>
                <li class="menu-item ">
                  <a itemprop="url" href="stationery.html">Office Stationery</a>
                </li>
                <li class="menu-item ">
                  <a itemprop="url" href="cop.html">Coporate Branding</a>
                </li>       
              </ul>
            </li>


          </ul>
        </li>

        <li><a href="contact.php">Contact</a></li>
        <!-- search barbit -->
        <li>
          <form class="navbar-form" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
            </div>
          </form>
        </li>
      </ul>
    </div>
  </div>
</div>

1 Answer

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Kelvin,

Take a look at Bootstrap's Documentation. In particular, this block of code. The way you're setting up the dropdown is quite a bit different than Bootstrap's boilerplate code. Hope this helps!

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
  </ul>
</li>

Also, I noticed an issue that may or may not be causing the problem, but in your line of code here:

<a data-toggle="dropdown" hidden-sm data-target="#">

hidden-sm is a class that is not inside a class attribute. That being said, I don't think you need hidden-sm at all. Try changing data-toggle's value to dropdown-toggle. Finally, the data-target attribute should instead be an href attribute; so, this line of code would then look like this:

<a href="#" data-toggle="dropdown-toggle">