Diskuze: Bootstrap nav

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Michal Kuba

Tvůrce

Michal Kuba:15.11.2015 18:37

Ahoj!.
Máte někdo nápad, jak se zbavit mýho problému?
Mám responzivní web. Až teď jsem se dostal k dodělání menu, které předtím fungovalo, ale teď ne. Na určitém breakpointu mám nastaveno, aby bylo menu collapse, tudíž se po kliknutí jakoby rozvinulo. Jenže mi to pouze překrývá horní obsah a ne že by ho to posunulo dolů.

Struktura je zhruba taková:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-left">
        <li class="dropdown">
          <a class="dropdown-toggle" href="zobraz.asp?t=kontakty">KLUB</a>
          <ul class="dropdown-menu">
            <!-- #include file="menu_01.inc" -->
          </ul>
        </li>
        <li>
          <img class="menu-kladivo" src="./img/kladivo2.PNG">
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" href="soupiska.asp">MUŽI</a>
          <ul class="dropdown-menu">
            <!-- #include file="menu_02.inc" -->
          </ul>
        </li>
        <li>
          <img class="menu-kladivo" src="./img/kladivo2.PNG">
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" href="zapas.asp?sezona=<% =left(akt_sezona_mladez,4) %>B" title="Team "B"">MLÁDEŽ</a>
          <ul class="dropdown-menu">
            <!-- #include file="menu_03.inc" -->
          </ul>
        </li>
        <li>
          <img class="menu-kladivo" src="./img/kladivo2.PNG">
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" href="zapas.asp?sezona=2011PVP">POHÁRY</a>
          <ul class="dropdown-menu">
            <!-- #include file="menu_04.inc" -->
          </ul>
        </li>

Přidal jsem CSS na daném breakpontu takto:

.navbar-default .container-fluid .navbar-collapse {
    max-height: initial;
    background-color: #008f3e;
.navbar-default .container-fluid {
    z-index: 100;
    position: absolute;

A potom už je vždycky <div class="row"> a v něm ještě další divy col-md-xx a zase vnořené divy, ale na tom už nesejde..

Potřebuji nějak obsah stránky posunout o výšku menu níž ale jen když je menu rozvinuté, logicky

Odpovědět

15.11.2015 18:37

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:15.11.2015 19:38

A nedal jsi tomu menu absolutní, nebo fixní pozici (position: fixed)?

Nahoru Odpovědět

15.11.2015 19:38

Neaktivní uživatelský účet

Michal Kuba

Tvůrce

Michal Kuba:15.11.2015 20:19

No když tam mám absolutní jako teď tak to menu překryje část a potom když scrolluju tak se zbytek ukáže.. když dám fixní tak se ukáže jen část menu a navíc když scrolluju, tak se to vubec nehne, jen občas vidím, jak něco za tím menu projede..

Nahoru Odpovědět

15.11.2015 20:19

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:16.11.2015 14:52

Já to myslel tak, že to position odstraníš úplně, popřípadě nastavíš defaultní hodnotu static...

Nahoru Odpovědět

16.11.2015 14:52

Neaktivní uživatelský účet

Michal Kuba

Tvůrce

Michal Kuba:16.11.2015 16:32

no on se ten problém táhl už s tím, že v jiných breakpointech měním atributy.. nejde nějak v CSS říct, že od tohoto breakpointu chci použít defaultní nastavení Bootstrapu a ne to z předchozího breakpointu? Díky

Nahoru Odpovědět

16.11.2015 16:32

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.

Nejčastěji vyhledáváné

Diskuze: Bootstrap nav