Ciao a tutti,
sto creando un sito in locale usando il gantry framework ed il gantry default template.
Volevo editare manualmente (modificando il CSS) il mio menu orizzontale che si trova nella posizione "navigation". Vorrei in particolare modificare lo sfondo delle voci di menu nei 3 casi:
- voce di menu selezionata
- voce di menu non selezionata ma mouse sopra la voce stessa
- voce di menu non selezionata e mouse non sopra la voce stessa
Ho provato ad installare qualche estensione ma niente che faccia al caso mio.
Penso di aver trovato la parte da editare che mi interessa nel file style1.css. Riesco a modificare il colore del font per il menu ma non capisco esattamente dove inserire lo sfondo.
Potete aiutarmi?
Vi incollo il codice:
/* Navigation - Core */
#rt-menu ul.menu li a, .menutop li.root > .item, .menu-type-splitmenu .menutop li .item {color: #fff;}
.menutop li.parent.root > .item span, .menu-type-splitmenu .menutop li.parent .item span {background: url(../images/menus/menutop-daddy.png) 100% 50% no-repeat;}*/
/* Navigation - Hovers */
#rt-menu ul.menu li a:hover, .menutop li.root > .item:hover, .menutop li.active.root.f-mainparent-itemfocus > .item, .menutop li.root.f-mainparent-itemfocus > .item, .menu-type-splitmenu .menutop li:hover > .item {background: #444;color: #fff;}
/* Navigation - Active */
#rt-menu ul.menu li.active a, #rt-menu ul.menu li.active a:hover, .menutop li.root.active > .item, .menutop li.root.active > .item:hover, .menu-type-splitmenu .menutop li.active .item {background: #fff;color: #000;}
/* Navigation - Dropdowns */
.menutop .fusion-submenu-wrapper {background: #444;}
.menutop .fusion-submenu-wrapper.level3, .menutop .fusion-submenu-wrapper.level4, .menutop .fusion-submenu-wrapper.level5, .menutop .fusion-submenu-wrapper.level6 {background: #515151;}
.menutop ul li > .item {color: #fff;}
.menutop ul li > .item:hover, .menutop ul li.f-menuparent-itemfocus > .item {background: #333;color: #ccc;}
.menutop ul li > .daddy span {background: url(../images/menus/dropdown-daddy.png) 100% 50% no-repeat;}
.menutop .fusion-grouped ol li > .item {background: url(../images/menus/menu-arrow.png) 5px 50% no-repeat;}
