Multiple Background Image Top Menu

Professional Jomal template designed to be easily adaptable to all kinds of business
GK User
Tue Apr 05, 2011 2:47 pm
Hello

My question is very simple in the ideas field but I don't know
is it is so simple in the implementation field.

What is the fundamental key to implement a menu with a different background
image for each top menu topic, like the one at this address ?

http://www.templatemonster.com/demo/31085.html


How can I distinguish each top menu item in css so I can attribute a
different background image to each one ?


Can anyone guide me through this process ?

Please note, I have some css knowledge but I'm not a programmer so,
if you can, please explain also the intermediate steps.

Really lots of thanks in advance,

Miguel Garcia
User avatar
Junior Boarder

GK User
Thu Apr 07, 2011 8:03 am
Hello

The paragraph bellow is a post of the answer I received trough a support ticket, so other
people can also see it:


" You can use menu item parameters to attach additional class to them in "Menu Params (GavickPro)".
Please edit a menu item and see Menu Params (GavickPro) "


Them I defined in tempalte.css something like bellow for each menu item, where the definedclass is replaced
by the defined class at the menu editor, derived from menu id, for example menuid100 ...

.definedclass {
background: url("../images/topmenu_red_163x52.gif") no-repeat scroll 0 0 transparent;
width: 163px !important;
text-align: center;
}



Note although I achieved part of the success in doing this, as you can see from

webdesignportugal{dot]net/temphost3

I'm still having problems dicribed in a topic named,

"menu height, hover color and active color editing"

and I'm still hoping someone could help me.
User avatar
Junior Boarder

GK User
Thu Mar 07, 2013 7:32 am
how to make multi colored menus

.gkMenu {
position: relative;
margin: 0;
z-index: 1000;
}
.gkMenu > ul {
height: 46px;
margin: 0;
padding: 0;
}
.gkMenu > ul > li {
height: 46px;
font-size: 18px;
font-weight: 500;
background: transparent;
margin: 0 20px 0 0;
}
.gkMenu > ul > li:first-child {
background: none;
}
.gkMenu > ul > li > a {
color: #6c7072;
display: block;
height: 46px;
line-height: 47px;
margin: 0;
padding: 0;
text-transform: uppercase;
text-shadow: 0 1px 0 #00000;
}
.gkMenu > ul > li:hover > a,
.gkMenu > ul > li:active > a,
.gkMenu > ul > li:focus > a,
.gkMenu > ul > li.active:hover > a,
.gkMenu > ul > li.active:active > a,
.gkMenu > ul > li.active:focus > a,
.gkMenu > ul > li.active > a {
color: #29a5fb;
text-shadow: none;
}
User avatar
Fresh Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.