| Autor | Zpráva | ||
|---|---|---|---|
| neregistrovaný Profil * |
#1 · Zasláno: 7. 3. 2015, 22:28:55
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 |
#2 · Zasláno: 7. 3. 2015, 22:30:41
neregistrovaný:
Neviem, ako ostatní, ale ja sa v tom nevyznám. Pridaj prosím odkaz na živú ukážku. |
||
| neregistrovaný Profil * |
#3 · Zasláno: 7. 3. 2015, 22:57:57 · Upravil/a: neregistrovaný
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 |
#4 · Zasláno: 8. 3. 2015, 10:07:38
neregistrovaný:
Neviem ti poradiť, poslal si očesanú verziu a v CSS sa nenachádza deklarácia triedy icon-bar.
|
||
| neregistrovaný Profil * |
#5 · Zasláno: 8. 3. 2015, 10:45:14
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 * |
#6 · Zasláno: 8. 3. 2015, 18:15:49
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 |
#7 · Zasláno: 8. 3. 2015, 21:19:58
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 * |
#8 · Zasláno: 8. 3. 2015, 22:27:58
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 |
#9 · Zasláno: 8. 3. 2015, 23:58:31
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.
|
||
|
Časová prodleva: 10 let
|
|||
0