Pri použití bellows menu narážame na problém, že to proste vyzerá škaredo. Aby to bolo jednoduchšie, pri tvorbe napr. product archive použijeme tento jednoduchý CSS snippet v custom CSS na danom elemente.
selector .bellows {
margin-top: 0;
}
selector .bellows .bellows-nav .bellows-target>.bellows-target-description {
display: none;
}
selector ul#menu-kategorie-produktov li.bellows-item-level-0 > a {
background: var(--e-global-color-primary);
color: #fff;
border-bottom: 1px solid rgba(28,9,40,0.25);
padding-right: 60px;
}
selector ul#menu-kategorie-produktov li.bellows-item-level-0:hover > a {
background: var(--e-global-color-secondary);
}
selector .bellows .bellows-nav .bellows-subtoggle, selector .bellows .bellows-nav .bellows-subtoggle:hover {
background: transparent;
}
selector ul#menu-kategorie-produktov li.bellows-item-level-1 a {
background: transparent;
color: var(--e-global-color-text);
}
selector ul#menu-kategorie-produktov li.bellows-item-level-1:hover > a, selector ul#menu-kategorie-produktov li.bellows-item-level-2:hover > a,
selector ul#menu-kategorie-produktov li.bellows-item-level-3:hover > a {
color:var(--e-global-color-primary);
}
selector ul#menu-kategorie-produktov li.bellows-item-level-1 a {
padding-top: 10px;
padding-bottom: 10px;
}
selector ul#menu-kategorie-produktov li.bellows-item-level-2 a {
padding-top: 5px;
padding-bottom: 5px;
}
Menu, ktoré tu ideme použiť, sa musí volať „Kategórie produktov“ – inak vygeneruje nesprávne CSS ID a nebude to fungovať.
V nastaveniach Bellows menu vyberieme Skin -> None (Disable).
Rýchle a efektívne riešenie.
