IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Responzivní navigace s logem na jednom řádku - html, css

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

Aktivity
Avatar
Katka
Člen
Avatar
Katka:30.7.2020 20:07

Ahoj, poradil by někdo, jak upravit menu na stránce http://webodkatky.cz/ tak, aby responzivní menu bylo na jedné řádce s logem, při zabalení menu do hamburgeru zůstalo viditelné a po rozkliknutí hamburgeru se při šířce obrazovky 320px a míň zarovnali jednotlivé položky menu na střed vzhledem k celé šíři obrazovky?

Momentálně se mi po rozkliknutí hamburgeru perou položky menu o místo s logem a zarovnávají se moc vpravo.

Zkusil jsem: Vím, že momentální menu není ideální - bez ul, li. Je to ale jediné při čem mi fungovala responzivita a i video pod menu.

Chci docílit: Snažím se o klasické responzivní menu s hamburgerem, ideálně s křížkem po rozkliknutí. S logem na jedné straně a položkami na druhé. Tak aby zároveň fungovalo video pod tím.

 
Odpovědět
30.7.2020 20:07
Avatar
Thomasitho
Člen
Avatar
Thomasitho:31.7.2020 8:35

Ahoj, pre zarovnanie položiek menu na stred pri šírke 320px a menej, by malo stačiť do CSS pridať toto:

@media screen and (max-width: 320px)
{
    .navbar
    {
        width: 100%;
    }
    .navbar a {
        text-align: center;
    }
}
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
31.7.2020 8:35
Avatar
Katka
Člen
Avatar
Odpovídá na Thomasitho
Katka:3.8.2020 10:21

Moc Ti děkuji! (v) Jak jednoduché :)

 
Nahoru Odpovědět
3.8.2020 10:21
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 3 zpráv z 3.