Horní navigace (menu) na celou šířku webu

Detailní popis produktu

Horní navigace (menu) na celou šířku webu – přehled

Tento digitální produkt je hotová CSS úprava horní navigace pro Shoptet, která z původního, často „namačkaného“ menu uprostřed stránky udělá barevnou navigační lištu přes celou šířku webu. Roztahuje se pouze barevná část menu, nikoliv celá hlavička – logo, košík a další prvky zůstávají podle šablony. Výsledkem je modernější a vzdušnější vzhled, který lépe navazuje na zbytek designu e-shopu.

Proč upravit horní menu na Shoptetu

Výchozí horní menu na Shoptetu může působit stísněně a namačkaně, zvlášť pokud máte více kategorií. Texty jsou blízko u sebe, menu je opticky „useknuté“ a někdy nepůsobí jako plnohodnotná součást hlavičky. Tato úprava vytvoří z horní navigace souvislý barevný pás přes celou šířku obrazovky, který navazuje na barvy vašeho e-shopu a dodá celému hornímu pásu profesionálnější vzhled.

Co přesně úprava dělá

Horní menu na celou šířku webu

Úprava zajistí, že barevná lišta s horním menu sahá od levého po pravý okraj stránky. Texty menu nejsou namačkané uprostřed, ale opticky patří k celé šířce webu. Hlavička jako taková (logo, košík) zůstává podle původní šablony – mění se jen barevné pozadí navigace.

Barevný pruh pod hlavičkou v barvě e-shopu

Pod hlavičku se přidá barevný pruh v primární barvě vašeho e-shopu. Využije se barva, kterou máte v šabloně nastavenou jako hlavní, takže nemusíte nic ručně dolaďovat. Horní navigace díky tomu vypadá jako součást hlavního headeru a ne jako přilepený proužek.

Sjednocená výška horní lišty

Úprava sjednotí výšku horní lišty s menu na pevnou hodnotu, aby navigace vypadala stejně na všech stránkách, i když se mění počet položek v menu. Horní část e-shopu pak nepůsobí roztěkaně – menu má vždy stejnou výšku a je snadno čitelné.

Správné zarovnání rozbalovacích nabídek

Rozbalovací nabídky (podkategorie) se zarovnají tak, aby začínaly přesně pod horní lištou menu. Dropdown už „neleze“ do barevné lišty ani nezůstává posunutý nahoru či dolů. Zákazník jasně vidí, kde začínají podkategorie, a orientace v menu je jednodušší.

Chování na mobilu – standardní responzivita Shoptetu

Na mobilních zařízeních zůstává zachované standardní chování menu Shoptetu. Navigace se dál chová podle původní šablony (hamburger menu apod.). Úprava je tedy zaměřená hlavně na zlepšení vzhledu na desktopu, aniž by zasahovala do základní responzivity na mobilu.

Pro koho je úprava vhodná

• Pro e-shopy na Shoptetu, kterým vadí stísněné, namačkané horní menu.
• Pro provozovatele, kteří chtějí menu na celou šířku webu, ale nechtějí přepisovat šablonu.
• Pro značky, které chtějí, aby horní lišta lépe navazovala na barevnost e-shopu.
• Pro ty, kteří chtějí jednoduché, rychlé vizuální vylepšení bez složitého programování.

Implementace v administraci Shoptetu

Nasazení úpravy je jednoduché. Stačí vložit dodaný CSS kód do editoru vzhledu:

• V administraci přejdete do sekce Vzhled a obsah > Editor > HTML kód.
• Najdete část se styly a vložíte poskytnutý CSS kód mezi tagy <style> … </style>.
• Uložíte změny a zkontrolujete horní menu na webu.

Není potřeba zasahovat do funkce menu, nic přepisovat v šabloně ani měnit nastavení barev – úprava automaticky využije primární barvu e-shopu.

Výhody pro e-shop

• Modernější vzhled horní části webu bez zásahu do funkcí Shoptetu.
• Menu na celou šířku webu, které lépe vynikne a zapadne do designu.
• Větší vzdušnost a přehlednost oproti původnímu namačkanému řešení.
• Jednotný dojem na všech stránkách díky sjednocené výšce lišty.
• Bezpečná úprava – pracuje jen se vzhledem, nezasahuje do logiky Shoptetu.

Pokud chcete, aby váš Shoptet působil na první pohled profesionálněji a horní navigace nebyla jen úzký proužek u prostředka stránky, je tato úprava rychlý a hotový způsob, jak posunout design původního menu o úroveň výš.