How to make the menu appear in bootstrap in mobile resolution without clicking the button?

Navigation
1

Can anyone help me with css to leave the menu already enabled so when it comes in mobile resolution?

link

When you are in small resolution, it opens an icon to open the mobile button. You click and it opens to browse.

What I want is the following, when it is in mobile resolution that button will not exist and the menu will always be active.

I use bootstrap, with the default buttons. The only thing I need is the css so the button will not be invisible when it slows down. 

<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>
    
asked by anonymous 20.04.2015 / 15:56

1 answer

2

In your javascript, you will have to see if the media-query that the browser is or is not what you want to open the menu, if yes then put the element in the "open menu" class (in this case it is flexnav-show ) and it will open:) 

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

Change the media values for the ones you want :)
You can read more about media-queries in javascript here

In return you can also do 

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

What this will do is: When the browser is less than 990px it uses that css for the bottom-menu.

    
20.04.2015 / 20:43
Error installing Composer on Windows 7 64bit with Wampserver 2.5 Post method with idhttp without crashing