List items from a Dropbox with navbar responsive bootstrap

Question

I am formulating a responsive page with bootstrap, where I have 2 bars:

• NAVBAR where I have the company logo, and a simple Dropbox with the name of the person, and with the options change password and exit.

• MAINBAR where you have the navigation menu of the site.

When accessed by a mobile device, it switches the visualization to the bootstrap pattern, where it has a simple button per bar that when clicked opens the corresponding menu in list form.

When you click the NAVBAR on the device, it opens a menu written the person’s name and then I have to click the person’s name to open the password change menu and exit.

I wonder if you have how to take this extra click on the person’s name and go straight to change password and exit options, or already view expanded when clicked on the NAVBAR menu button.

This is the code:

<div class="navbar">

  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-cogs"></i>
      </button>

      <a class="navbar-brand navbar-brand-image" href="http://www.example.com.br">
        <img src="logo.png">
      </a>

    </div> <!-- /.navbar-header -->

    <div class="navbar-collapse collapse">

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

        <li class="dropdown navbar-profile">
          <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
            <span class="navbar-profile-label">NOME DO USUARIO</span>
            <i class="fa fa-caret-down"></i>
          </a>

          <ul class="dropdown-menu" role="menu">

            <li>
              <a href="profile.php">
                <i class="fa fa-user"></i> 
                Perfil
              </a>
            </li>

            <li>
              <a href="profilePassword.php">
                <i class="fa fa-cog"></i> 
                Alterar Senha
              </a>
            </li>

            <li class="divider"></li>

            <li>
              <a href="logout.php">
                <i class="fa fa-sign-out"></i> 
                Sair
              </a>
            </li>

          </ul>

        </li>

      </ul>

    </div> <!--/.navbar-collapse -->

  </div> <!-- /.container -->

</div> <!-- /.navbar -->

<div class="mainbar">

  <div class="container">

    <button type="button" class="btn mainbar-toggle" data-toggle="collapse" data-target=".mainbar-collapse">
      <i class="fa fa-bars"></i>
    </button>

    <div class="mainbar-collapse collapse">

      <ul class="nav navbar-nav mainbar-nav">
        
<!--

        CRIAÇÃO DO MENU DE NAVEGAÇÃO DO SITE, EXEMPLO DE OPÇÂO:

        <li class="MENU ATIVO OU NÃO ATIVO">
          <a href="index.php">
            <i class="fa fa-dashboard"></i>
            Dashboard
          </a>
        </li>
        
-->
      </ul>

    </div> <!-- /.navbar-collapse -->   

  </div> <!-- /.container --> 

</div> <!-- /.mainbar -->

Answer 1

And if you took the first list <ul class="nav navbar-nav navbar-right"/> and put the user name at the top of the second. Staying as below:

<div class="navbar">

  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <i class="fa fa-cogs"></i>
      </button>

      <a class="navbar-brand navbar-brand-image" href="http://www.example.com.br">
        <img src="logo.png">
      </a>

    </div> <!-- /.navbar-header -->

    <div class="navbar-collapse collapse">


          <ul class="dropdown-menu" role="menu">

          <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
            <span class="navbar-profile-label">NOME DO USUARIO</span>
            <i class="fa fa-caret-down"></i>
          </a>

            <li>
              <a href="profile.php">
                <i class="fa fa-user"></i> 
                Perfil
              </a>
            </li>

            <li>
              <a href="profilePassword.php">
                <i class="fa fa-cog"></i> 
                Alterar Senha
              </a>
            </li>

            <li class="divider"></li>

            <li>
              <a href="logout.php">
                <i class="fa fa-sign-out"></i> 
                Sair
              </a>
            </li>

          </ul>

    </div> <!--/.navbar-collapse -->

  </div> <!-- /.container -->

</div> <!-- /.navbar -->

<div class="mainbar">

  <div class="container">

    <button type="button" class="btn mainbar-toggle" data-toggle="collapse" data-target=".mainbar-collapse">
      <i class="fa fa-bars"></i>
    </button>

    <div class="mainbar-collapse collapse">

      <ul class="nav navbar-nav mainbar-nav">
        
<!--

        CRIAÇÃO DO MENU DE NAVEGAÇÃO DO SITE, EXEMPLO DE OPÇÂO:

        <li class="MENU ATIVO OU NÃO ATIVO">
          <a href="index.php">
            <i class="fa fa-dashboard"></i>
            Dashboard
          </a>
        </li>
        
-->
      </ul>

    </div> <!-- /.navbar-collapse -->   

  </div> <!-- /.container --> 

</div> <!-- /.mainbar -->

Answer 2

To do this is quite simple, just check what is the resolution of the mobile device and add the class open within the dropdown class thus remaining:

<li class="dropdown open">

I believe it is not so UX this practice so it follows an example of how I would implement:

.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu {
  margin-top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Logo" src="...">
      </a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">Usuário <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Perfil</a>
          </li>
          <li><a href="#">Alterar Senha</a>
          </li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Sair</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

I removed the data-toggle="dropdown" and added to open the menu at Hover.