2

Quando o site fica responsivo o menu fica com aquele botão para abrir um menu. O problema que estou passando é a questão do CSS dele. Ele deveria ter um estilo, bonitinho, ficar em block, só que ele fica dessa maneira:

Não sei o porque, o código está assim:

<div class="col-md-7" id="menu">

              <nav role="navigation" class="navbar">
                <div class="navbar-header navbar-default">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>

                <div id="menu-collapse" class="collapse navbar-collapse menu">
                  <ul>
                    <li><a href="<?php echo base_url();?>">Home</a></li>
                    <li><a href="<?php echo base_url('sobre');?>">Sobre nós</a></li>
                    <li><a href="<?php echo base_url('produtos');?>">Produtos</a>
                    <ul>
                    <?php echo dropdown();?>
                    </ul>
                    </li>
                    <li><a href="<?php echo base_url('contato');?>">Localização & Contato</a></li>
                    <li><a href="<?php echo base_url('orcamento');?>"><i class="fa fa-pencil-square-o"></i> Orçamento</a></li>
                    <li class="hidden-md hidden-lg"><input type="text" class="form-control search"name="buscar" placeholder="Buscar..."></li>
                  </ul>
                </div>

              </nav>

            </div>

Link do site online: http://www.servidorcafedigital.com.br/clientes/ktf

0

1 Resposta 1

2

Junta isto no teu CSS para mobile:

#menu-collapse { overflow: none; } /* tirar o scroll */
#menu-collapse ul > li {           /* manter tudo à esquerda, um por linha */
    float: left;
    clear: both;
}

e tira

#menu ul li:nth-child(1){
    margin-left:0px;
}

do custom.css (linha 81) para evitar que o home esteja desalinhado com os outros.

3
  • deu uma grande melhorada, só que o seguinte... A parametro #menu-collapse ul > li deixa o menu block quando acessa em desktop. Ele deve ficar block só quando for mobile. Commented 16/05/2015 às 18:57
  • @AlissonAcioli se precisas então podes usar uma media query typo: @media screen and (max-width: 300px) { regras de CSS aqui }
    – Sergio
    Commented 16/05/2015 às 19:27
  • Eu fiz de outra forma que funcionou :) .navbar-collapse.in{ overflow: hidden !important;} /* tirar o scroll */ .navbar-collapse.in > ul > li { /* manter tudo à esquerda, um por linha */ float: left !important; clear: both !important; } Commented 16/05/2015 às 19:36

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 .