PrestaShop - Top horizontal menu - Zmenšení šířky odkazů

Dobry den,

jak, prosim, zmenim sirku odkazů v top horizontal menu ?

Problem vznikl kdy na mensim notebooku nebyly odkazy v jednom, ale ve dvou radcich a pri namireni kurzoru na jeden z odkazu v druhem radku rozbalovaci menu prekrylo cely druhy radek. Pokud je lepsi reseni sem s nim prosim..jako napriklad prikaz aby rozbalovaci menu neprekryvalo druhy radek s primarnimi odkazy.

Dekuji za odpoved

nikdo nic ?

Dobrý den,

pokud máte v horizontální menu hodně odkazů, tak při zúžení stránky na menší velikost/rozlišení se odkazy zobrazí na dalším řádku. Stejná situace samozřejmě může nastat při velkém množství (šířce) odkazů i bez zúžení stránky. Bohužel aktuální verze modulu nepočítá s tím, že odkaz může mít submenu. Submenu má natvrdo nastavené zobrazení v úrovni spodní části prvního řádku, a proto dochází k překrytí. Řešení je v tomto případě několik:

1. Do horního menu vložte méně odkazů (příp. zkraťte jejich délku), aby při zúžení nedocházelo k zobrazení na dalším řádku.
   
   
2. Nebo pokud je to možné, tak do pravé části menu umístěte jen odkazy, které nezobrazují žádné submenu. Takže při zúžení budete mít na druhém řádku jen odkazy bez submenu.
   
   
3. Další možností je úprava CSS stylů modulu Horní hlavní nabídka [Top horizontal menu], aby se submenu zobrazilo ve správné pozici. V souboru themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css najděte tuto část kódu:
   
   Kód:
   .sf-menu li ul {
     display: none;
     left: 0;
     top: 59px;
     /* match top ul list item height */
     z-index: 99;
     padding: 12px 0px 18px 0px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
     -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
     box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; }
   a změňte řádek:
   
   Kód:
   top: 59px;
   na:
   
   Kód:
   top: auto;
   Pak se bude submenu zobrazovat ve správné výšce a nebude docházet k překrývání.
   
   
4. Také můžete zmenšit vnitřní okraje (příp. font) odkazů na takovou velikost, aby nedocházelo k zobrazení na druhém řádku. Takže opět v souboru themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css najděte tuto část kódu:
   
   Kód:
     .sf-menu > li > a {
       font: 600 18px/22px "Open Sans", sans-serif;
       text-transform: uppercase;
       color: #484848;
       display: block;
       padding: 17px 20px;
       border-bottom: 3px solid #e9e9e9; }
   
   , kde si zmenšete na optimální velikost buď vnitřní okraj u vlastnosti padding (např. padding: 17px 14px;), nebo velikost fontu v px u vlastnosti font (příp. oboje).
   
   
5. A poslední možností je změna vnitřní okrajů (příp. velikosti fontu) dle aktuální šířky stránky, aby opět nedocházelo k zobrazení odkazů na dalším řádku. Takže do souboru themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css byste na konec přidal např. následující kód:
   
   Kód:
   @media (min-width: 768px) and (max-width: 991px) {
     .sf-menu > li > a {
       padding:17px 12px;
       font-size: 12px;
     }
   }
   
   @media (min-width: 992px) and (max-width: 1199px) {
     .sf-menu > li > a {
       padding:17px 16px;
       font-size: 16px;
     }
   }
   
   , který zajistí při šířce stránky od 768px do 991px zmenšení vnitřního okraje (padding) a fontu (font-size). A stejně tak dojde ke zmenšení při šířce stránky od 992px do 1199px na požadovanou velikost. Kód si samozřejmě musíte upravit na míru Vašich stránek.
   

Pokud by se Vám po úpravě CSS stylů na stránkách změna neprojevila, tak si promažte cache internetového prohlížeče.