připojený na konec . Kvůli tomu se objevoval dole pod obsahem. Do HTML sahat nesmíme, takže se přesouvá CSS. Jak je ukotvený: menu je zarovnané doprava, takže vzdálenost od pravého okraje k mezeře mezi „O nás" a telefonem je stálá, i když se šířka okna mění. Proto position:absolute s hodnotou right - odečteno z rozvržení (telefon začíná 334 px od pravého okraje). Kdyby se změnil text telefonního tlačítka nebo přibyla položka za „O nás", je potřeba to číslo srovnat. Je to jediné místo v CSS, kde se opírám o konkrétní rozměr, jinak by to nešlo bez zásahu do HTML. --------------------------------------------------------------*/ /* * Mezera pro přepínač. Menu je zarovnané doprava, takže tenhle odsazovací * prostor odsune položky VLEVO od telefonu, telefon a Rezervace zůstanou * na svém místě. */ #primary-menu > li.menuTel { /* * 114 px = šířka přepínače (90) + 12 px vůle na každé straně. * V Astře je přepínač 70 px široký, tady 90 - liší se vykreslením * kódu jazyka, ne nastavením. Mezeru proto počítám podle skutečnosti. */ margin-left: 114px; } .gtranslate_wrapper { position: absolute; top: 30px; /* svisle na střed hlavičky vysoké 93 px */ right: 346px; /* těsně před telefonní tlačítko */ z-index: 5; width: auto; } /* * Ukotvení dole vpravo drží VNITŘNÍ obal #gt_float_wrapper * (position:fixed; bottom:20px; right:20px; z-index:999999), ne samotný * přepínač. Napoprvé jsem sáhl na .gt_float_switcher a přesunul tím jen * prázdný vnější obal - přepínač zůstal dole. * * !important je nutné: plugin si styl načítá z cdn.gtranslate.net až po * našem souboru. */ .gtranslate_wrapper #gt_float_wrapper { position: static !important; bottom: auto !important; right: auto !important; left: auto !important; top: auto !important; } /* * Velikost podle Astry: 13px, celkem 70 × 32 px. Bez !important zůstal * přepínač na 20px (108 × 45) a překrýval položku „O nás" - velikost si * plugin nastavuje ve svém CSS z CDN, které se načítá po nás. */ .gtranslate_wrapper .gt_float_switcher, .gtranslate_wrapper .gt_float_switcher .gt-selected, .gtranslate_wrapper .gt_float_switcher .gt-current-lang { font-size: 13px !important; box-shadow: none; } /* Rozbalená nabídka jazyků musí přetéct přes hlavičku. */ .gtranslate_wrapper .gt_options { z-index: 10; } /* * Rozměry přesně podle Astry: celek 70 × 32 px. * Skládá se z odsazení vnitřního bloku a velikosti vlaječky - font-size * sám o sobě nestačil, plugin má obojí napevno ve svém CSS z CDN. */ .gtranslate_wrapper .gt_float_switcher .gt-current-lang { padding: 4px 21px 4px 4px !important; } .gtranslate_wrapper .gt_float_switcher img { width: 20px !important; height: 20px !important; } /* * Úzká okna: ukotvení do hlavičky se opírá o to, že se menu vejde na jeden * řádek. Jakmile se začne lámat, přestane sedět - v tom případě se necháme * plugin vrátit k jeho vlastnímu chování (plovoucí vpravo dole). * * Hranice 1200 px je odhad podle šířky menu, ne změřená hodnota; responzivní * chování jsme zatím neprocházeli. */ @media (max-width: 1200px) { #primary-menu > li.menuTel { margin-left: 0; } .gtranslate_wrapper { position: static; top: auto; right: auto; } /* * Na užších oknech patří přepínač VLEVO dole - vpravo dole sedí * chatovací bublina Wonderchatu a překrývaly by se. */ .gtranslate_wrapper #gt_float_wrapper { position: fixed !important; bottom: 20px !important; left: 20px !important; right: auto !important; } }