Home/ Questions/Q 8165903
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T19:40:52+00:00

I have a navbar with 4 elements in it. The first is just a

  • 0

I have a navbar with 4 elements in it. The first is just a home link, the second and third have dropdowns and the fourth is pulled right with a dropdown.

Now the dropdowns of the second and third element always apear under the first menu item and not under the one clicked.

The fourth one does not have this problem, what am I doing wrong?

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#"><span class="blue">art</span><span class="black">ly.de</span></a>
      <div class="pull-right">
        <ul class="nav">
          <li class="divider-vertical"></li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-user"></i> Patrick Fraley
              <span class="icon-caret-down"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="icon-edit"></i> Profile</a></li>
              <li><a href="#"><i class="icon-cog"></i> Account Settings</a></li>
              <li class="divider"></li>
              <li><a href="#"><i class="icon-signout"></i> Sign Out</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Dashboard</a></li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Elements
              <span class="icon-caret-down"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Calendar</a></li>
              <li><a href="#">Forms</a></li>
              <li><a href="#">Graphs</a></li>
              <li><a href="#">Tables</a></li>
              <li><a href="#">Typography</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Pages
              <span class="icon-caret-down"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Login</a></li>
              <li class="divider"></li>
              <li><a href="#">Error 404</a></li>
              <li><a href="#">Error 500</a></li>
            </ul>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you forgot class="dropdown" on your .nav lis that hold the dropdowns.

    And you also missed one </li>

    <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <!-- ... -->
            <div class="pull-right">
                <ul class="nav">
                    <li class="divider-vertical"/>
                    <li class="dropdown">
                        <!-- ... -->
                    </li>
                </ul>
            </div>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active">
                        <!-- ... -->
                    </li>
                    <li class="dropdown">
                        <!-- ... -->
                    </li>
                    <li class="dropdown">
                        <!-- Missed this /li -->
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>
    • 0