Color of the Collapse menu

Asked

Viewed 386 times

0

I have a problem with the bootstrap menu when it’s "collapsed". When the screen size is for example a mobile, it gets that button to click and open the menu. The problem is that if I leave the tag <nav> with the class navbar-default when the menu is open normally (on a desktop or something large) it gets the class color navbar-default. If I withdraw the class navbar-default when the user monitor is smaller then the button does not appear as it does not have a background to appear.

I’d like the class navbar-default only active (with the background) if the menu is "collapsed". If it is of normal size, then it does not leave stylized. An example is www.iped.com.br. When it is on desktop (dimension) then it does not appear the collapsado menu (so far so good), when we leave the browser in a smaller dimension, then it appears collapsado menu with style (background light gray), I would like to do the same. My code:

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

              <nav role="navigation" class="navbar navbar-default">
                <div class="navbar-header">
                  <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">
                  <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Sobre nós</a></li>
                    <li><a href="#">Produtos</a></li>
                    <li><a href="#">Localização & Contato</a></li>
                    <li><a href="#">Orçamento</a></li>
                  </ul>
                </div>

              </nav>

            </div>
html css twitter-bootstrap menu

  • I don’t understand very well. You want the Nav-default to appear only on smaller screens?

  • Yes... because if they are in larger dimensions (desktops, etc.) it stylizes my menu, which is not necessary. When it is on smaller screens I want you to keep the Nav-default there yes you can style, because will be with that button to open the menu

  • look at the 2 images http://img.gforum.tv/img/7c1472a21254c4f50c2ed854c376219dca1688.png. and http://img.gforum.tv/img/e4f1a8139909e54f2b23086464f434620d20846d.png

1 answer

1


  • That’s almost what I need, only the following, if the dimension is small with your code it hides the "button" to open the menu. What I want is for you to style the menu only when it’s smaller. When it’s normal sized (desktops) it doesn’t style the menu

  • look at the 2 images http://img.gforum.tv/img/7c1472a21254c4f50c2ed854c376219dca1688.png. and http://img.gforum.tv/img/e4f1a8139909e54f2b23086464f434620d20846d.png

  • I get it, I just don’t know how the bootstrap does "behind the scenes" to make some classes only take effect according to the resolution of the device. But it’s very curious.

  • And if you put the navbar-default in the navbar-header div ?

  • kkkkk, it worked! navbar-default on "navbar-header" ... Thanks Sertage!!

Browser other questions tagged html css twitter-bootstrap menu

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