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

Asked

Viewed 1,489 times

1

Can anyone help me with css to leave the menu already activated like this when it goes into mobile resolution?

http://guiapetsaocarlos.com.br/

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 this, 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 that the button is not invisible when it decreases its resolution.

<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>
html css

1 answer

2


In your javascript, you will need to see if the media-query that the browser is in is or is not the one you want to open the menu, if yes then put the "open-menu" class in the element (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 values of media-querie to whatever you want :)
You can read more about javascript media queries 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.

Browser other questions tagged html css

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