1

Alguém pode me ajudar com o css para deixar o menu já ativado assim quando ele entrar em resolução mobile?

http://guiapetsaocarlos.com.br/

Quando você está em resolução pequena, ele abre um ícone para abrir o botão mobile. Você clica e ele abre para navegar.

O que eu quero é o seguinte, quando ele estiver em resolução mobile aquele botão não vai existir e o menu estará sempre ativo.

Eu uso bootstrap, com os botões padrões. A única coisa que preciso é do css para que o botão não fique invisível quando diminui sua resolução.

<nav class="nav-main"><div class="container">
<div class="menu-inferior-container">
<ul id="menu-inferior" class="flexnav with-js opacity sm-screen" data-breakpoint="992">
<li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-106 item-with-ul">
<a href="http://guiapetsaocarlos.com.br/pet-shop/">Pet Shop</a>
<ul class="sub-menu" style="display: none;">
<li id="menu-item-182" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-182">
<a href="http://guiapetsaocarlos.com.br/agropecuaria/">Agropecuária</a>
</li>
</ul>
<span class="touch-button">
<i class="navicon"></i>
</span>
</li>
<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108">
<a href="http://guiapetsaocarlos.com.br/clinicas-veterinarias/">Clínicas Veterinárias</a>
</li>
<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109">
<a href="http://guiapetsaocarlos.com.br/banho-e-tosa/">Banho e Tosa</a>
</li>
<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107">
<a href="http://guiapetsaocarlos.com.br/hotel-pet/">Hotel Pet</a>
</li>
<li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110">
<a href="http://guiapetsaocarlos.com.br/66-2/">Babás Pet</a>
</li>
<li id="menu-item-163" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-163">
<a href="http://guiapetsaocarlos.com.br/adestramento/">Adestramento</a>
</li>
<li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-171 current_page_item menu-item-178 active">
<a href="http://guiapetsaocarlos.com.br/171-2/">Dog Walker</a>
</li>
</ul>
</div>
</div>
</nav>

1 Resposta 1

2

No seu javascript, terá que ver se a media-query que o browser está é ou não a que tu queres para abrir o menu, se sim então coloca no elemento a class de "menu-aberto" (neste caso é flexnav-show) e ele irá abrir :)

var mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {
    document.querySelector('#menu-inferior').className += " flexnav-show";
}

Muda os valores da media-querie para os que você quiser :)
Pode ler mais sobre o media-queries em javascript aqui


Em contrapartida podes também fazer

@media (max-width: 990px) {
    #menu-inferior {
        max-height: 2000px;
        opacity: 1;
        transition: all 0.5s ease-in-out 0s;
    }
}

O que isto irá fazer é: Quando o browser for menor que 990px ele usa aquele css para o menu-inferior.

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 .