Autor Zpráva
neregistrovaný
Profil *
Podařilo se mi po delším bojování dostat hlavní navigaci do podoby, jakou si představuji. Bohužel se mi stále nezobrazuje "burger" navigace na mobilní velikosti. Ten prostor je normálně klikatelný a funkční, ale ikonka nikde. Potřebuji, aby ta ikonka měla bílou barvu. Pokud k divu .navbar přidám navbar-default, tak se mi zobrazí bootstrapův navbar a ikonka tam je. Já ale tento šedý navbar tam nechci.

<div class="container">
        <div class="navbar">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-collapse-navigation">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a href="/" class="navbar-brand">LOGO</a>
          </div>
           
           <div class="collapse navbar-collapse" id="main-collapse-navigation">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>               
                <li><a href="#">Item3</a></li>
                <li><a href="#">Item4</a></li>
              </ul>
           </div>
        </div>
      </div>  


CSS:

div.navbar a.navbar-brand {
                padding-left: 0;
                font: normal 15px 'open_sansbold', Arial, sans-serif;
                text-transform: uppercase;
                color: #ffffff;
               } 
               
div.navbar a {
            color: #9fa6d7;
           }  

div.navbar a:hover {
                    background: transparent;
                    color: #ffffff;
                   } 


Procházím dokumentace, zkouším kde co, ale bez výsledku. Není mi vůbec jasná ta struktura navigace, kterou bootstrap používá :(

Budu rád za radu a pomoc.

Děkuji.
Tomáš123
Profil
neregistrovaný:
Neviem, ako ostatní, ale ja sa v tom nevyznám. Pridaj prosím odkaz na živú ukážku.
neregistrovaný
Profil *
Zkouším poslat živou ukázku, ale tam to už vůbec nefunguje a nezobrazuje se, jak se má zobrazovat :(

http://kod.djpw.cz/hglb


Vyřešil jsem to nakonec tak, že jsem tam dal tu třídu .navbar-default k .navbar a nastavil jsem tomu background: transparent a border na none. Tím se tam nezobrazuje ten bootstrapův šedý navbar.

Co se mi ale pořád nedaří, je změnit tu ikonku burger menu na bílou barvu. Ať nastavím jaký styl chci, ať už tomu buttonu, nebo spanům, tak nic na to nezabírá :(
Tomáš123
Profil
neregistrovaný:
Neviem ti poradiť, poslal si očesanú verziu a v CSS sa nenachádza deklarácia triedy icon-bar.
neregistrovaný
Profil *
Ta třída icon-bar je asi třída bootstrapu.

Ten kód té navigace mám z velké části zkopírovaný z toho prvního příkladu v dokumentaci bootstrapu, kde tato třída u těch spanů je: http://getbootstrap.com/components/#navbar
neregistrovaný
Profil *
Tak jsem to nakonec vyřešil tak, že jsem si definoval svou třídu, místo té icon-bar co používá bootstrap ve které mám definovanou bílou barvu

span.mybg {
          
          display: block;
          width: 22px;
          height: 2px;
          background-color: #ffffff;
          margin-bottom: 4px;
          border-radius: 1px;  
          }

Nevím proč, ale prostě někdy se mi nedaří přebít styly od bootstrapu a můžu v css nastavovat co chci, ale nic se neděje. Samozřejmě mám svou css šablonu definovanou v html až za css bootstrapu.
Keeehi
Profil
neregistrovaný:
Samozřejmě mám svou css šablonu definovanou v html až za css bootstrapu.
To je sice správné, ovšem neznamená to, že to automaticky stačí. Ona pak ještě vystupuje do hry síla selektorů www.pcblog.cz/clanek/1731/jak-spocitat-silu-css-selektoru takže váš pozdější zápis musí mít stejnou nebo větší sílu. Stejné síly se dá jednoduše dosáhnout tím, že vezmete ten selector bootstrapu a jenom ho o kopírujete. Pak už bude fungovat to, že je v kódu později.
neregistrovaný
Profil *
To dělám, ale taky to nepomáhá. Např. chci odstranit v mobilní menu horní border, který má třída .navbar-collapse

Do vlastního css dám pro jistotu klidně i
div.navbar div.navbar-collapse {border:none};

A nic. Ta čára tam pořád je :(
Keeehi
Profil
neregistrovaný:
Mě to tedy funguje. Ta čára, mezi tím panelem a menu které se z něho vysouvá, mi mizí. Jestli se bavíme o nějaké jiné, tak ta mizet samozřejmě nemůže, jelikož nepatří .navbar-collapse ale něčemu jinému.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: