CSS Disfigured mobile menu

Asked

Viewed 387 times

2

When the site gets responsive the menu gets that button to open a menu. The problem I’m going through is the question of CSS him. He should have a style, cute, stay in block, only he stays that way:

I don’t know why, the code is like this:

<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 to the online site: http://www.servidorcafedigital.com.br/clientes/ktf

1 answer

2


Add this to your mobile CSS:

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

and strip

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

of custom.css (line 81) to prevent home is misaligned with others.

  • gave a great improvement, only the following... The parameter #menu-collapse ul > li leaves the menu block when accesses on desktop. It should stay block only when mobile.

  • @Alissonacioli if you need then you can use a media query typo: @media screen and (max-width: 300px) { regras de CSS aqui }

  • I did otherwise that worked :) .navbar-collapse.in{ overflow: hidden !important;} /* tirar o scroll */&#xA;.navbar-collapse.in > ul > li { /* manter tudo à esquerda, um por linha */&#xA; float: left !important;&#xA; clear: both !important;&#xA;}

Browser other questions tagged

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