Navbar bootstrap Collapse

Asked

Viewed 872 times

0

I need a customization in a navbar that is the following:

First, without the Collapse, appear this way (this I achieved and it is very quiet)

Then, when you have smaller screens, turn into 2 buttons and separate the menus in profile and search:

The problem is that when I create the content of the second navbar-Collapse, it doesn’t just appear on smaller screens, as with the profile. The div "Collapse navbar-Collapse" does not disappear on the larger screens.

My code is this:

HTML

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-profile" aria-expanded="false">
                <img class="profile" src="img/profile.jpg" />
            </button>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-search" aria-expanded="false">
                <i class="fa fa-search"></i>
            </button>
            <a class="navbar-brand" href="#">
                Menu
            </a>
        </div>

        <!-- Deve aparecer somente quando estiver em telas menores -->
        <div class="collapse navbar-collapse" id="navbar-collapse-search">
            <div class="form-group has-feedback">
                <input type="text" class="form-control">
                <span class="fa fa-search form-control-feedback"></span>
            </div>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-profile">
            <!-- Just when collapsed -->
            <ul class="nav navbar-nav collapsable">
                <li><a href="#"><i class="fa fa-cog"></i>&nbsp;&nbsp;Configurações</a></li>
                <li><a href="#"><i class="fa fa-sign-out"></i>&nbsp;&nbsp;Sair</a></li>
            </ul>

            <!-- Hide when collapsed -->
            <div class="collapse-hide">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img class="profile" src="img/profile.jpg" />&nbsp;&nbsp;Claudio Neto&nbsp;<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a>
                                    <i class="fa fa-cog"></i>&nbsp;&nbsp;Configurações
                                </a>
                            </li>
                            <li>
                                <a>
                                    <i class="fa fa-sign-out"></i>&nbsp;&nbsp;Sair
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group has-feedback search-bar">
                        <input type="text" class="form-control">
                        <span class="fa fa-search form-control-feedback"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</nav>

CSS

@media (min-width: 767px) {
  .collapsable {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .collapse-hide {
    display: none;
  }
}
html css twitter-bootstrap bootstrap-3

  • I think I need a little more detail here. I can’t simulate the problem or am not understanding the problem...

  • @Leonfreire, I need two Clapses in my header, basically. Imagine you have a button for the search bar (which expands the "menu" with the bar) and another with the profile information.

  • Just to be sure, there are two Ivs with collapse navbar-collapse wasn’t supposed to be one of them being collapsable navbar-collapse? Or even both?

  • Solved your problem?

1 answer

0

Correct me if I’m wrong, but it seems to me that being wrong is more or less here in the midst of the confusion of many classes with similar names:

<!-- Deve aparecer somente quando estiver em telas menores -->
        <div class="collapse navbar-collapse" id="navbar-collapse-search">
            <div class="form-group has-feedback">
                <input type="text" class="form-control">
                <span class="fa fa-search form-control-feedback"></span>
            </div>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-profile">
            <!-- Just when collapsed -->
            <ul class="nav navbar-nav collapsable">
                <li><a href="#"><i class="fa fa-cog"></i>&nbsp;&nbsp;Configurações</a></li>
                <li><a href="#"><i class="fa fa-sign-out"></i>&nbsp;&nbsp;Sair</a></li>
            </ul>

            <!-- Hide when collapsed -->
            <div class="collapse-hide">

It seems to me that the class where it is commented beside should be changed:

<!-- Deve aparecer somente quando estiver em telas menores -->
        <div class="collapsable navbar-collapse" id="navbar-collapse-search"> <!-- << Creio que aqui deveria ser collapsable -->
            <div class="form-group has-feedback">
                <input type="text" class="form-control">
                <span class="fa fa-search form-control-feedback"></span>
            </div>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-profile">
            <!-- Just when collapsed -->
            <ul class="nav navbar-nav collapsable">
                <li><a href="#"><i class="fa fa-cog"></i>&nbsp;&nbsp;Configurações</a></li>
                <li><a href="#"><i class="fa fa-sign-out"></i>&nbsp;&nbsp;Sair</a></li>
            </ul>

            <!-- Hide when collapsed -->
            <div class="collapse-hide">

Browser other questions tagged html css twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.