0

Preciso de uma customização em uma navbar que é o seguinte:

Primeiro, sem o collapse, aparecer dessa maneira (isso eu consegui e é bem tranquilo)

Depois, quando tiver em telas menores, transformar em 2 botões e separar os menus em perfil e busca:

O problema é que quando crio o conteúdo do segundo navbar-collapse, ele não aparece apenas em telas menores, como acontece com o perfil. A div "collapse navbar-collapse" não desaparece nas telas maiores.

Meu código é o seguinte:

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;
  }
}
4
  • Acho que preciso de um pouco mais de detalhes aqui. Não consigo simular o problema ou não estou entendendo o problema... 24/05/2017 às 16:40
  • @LeonFreire preciso de 2 collapse no meu header, basicamente. Imagine que tenha um botão pra barra de busca (que expande o "menu" com a barra) e outro com as informações do perfil. 24/05/2017 às 16:42
  • Só pra ter certeza, há duas divs com collapse navbar-collapse não era pra ser uma delas ser collapsable navbar-collapse? Ou até ambas? 24/05/2017 às 16:59
  • Resolveu o seu problema?
    – Jorge B.
    23/02/2018 às 9:48

1 Resposta 1

0

Corrija-me se estiver errado, mas me parece que ser erro está mais ou menos aqui no meio da confusão de muitas classes com nomes similares:

<!-- 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">

Me parece que a classe onde está comentada ao lado deveria ser trocada:

<!-- 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">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .