gkLogin Class for another Menu Item

Hello, I would like to use the colorful rectangle around the "Login" menu item in the demo, for another menu item, which would be "Contact us" menu item.

I tried adding the same additional class as the Login menu item "gkLogin", but it didn't work.

http://gator4199.hostgator.com/~lgt2015/contact-us

Which additional class should I use?

Thank you

Regards

Hi

Add suffix "redrec" and than add this code to override.css:

Code: Select all

#gkHeaderNav li.redrec {
    border: 1px solid rgba(250, 114, 82, 0.5);
    height: 30px;
    line-height: 30px;
    margin-left: 12px;
    transition: border 0.3s ease-out 0s;
    -webkit-transition: border 0.3s ease-out 0s;
    -moz-transition: border 0.3s ease-out 0s;
    -ms-transition: border 0.3s ease-out 0s;
    -o-transition: border 0.3s ease-out 0s;
}

#gkHeaderNav li.redrec:hover {
    border-color: #fa7252;
}


Hi Teitbite, the transition doesn't seems to work and the rectangle position is too high.

I could not changed the CSS without moving all the elements of the module, I am not able to isolate the red retangle on it's own.

Thank you

OK I got it to work. The only problem is the "height" attribute, when the proper is set to 30px as you did the rectangle position is wrong. When the height CSS attribute is removed, the rectangle position is good but the height is too big.

Code: Select all


#gkHeaderNav li.redrec {
    border: 1px solid rgba(250, 114, 82, 0.5);
   [b] height: 30px;[/b]
    line-height: 30px;
    margin-left: 12px;
    transition: border 0.3s ease-out 0s;
    -webkit-transition: border 0.3s ease-out 0s;
    -moz-transition: border 0.3s ease-out 0s;
    -ms-transition: border 0.3s ease-out 0s;
    -o-transition: border 0.3s ease-out 0s;
}

#gkHeaderNav li.redrec:hover {
    border-color: #fa7252;
}



Hi

Leave the height to 30px and add this class as well.

Code: Select all

#gkHeaderNav .gkMenu > ul > li > a {
    height: 30px;
    line-height: 30px;
}


It works! Good job!

Regards