Menu Hover & Active Background colour

Support
#1

Hi there,

I am trying to duplicate the menu style (Not the Social media Icons) used for valleywindows-halifax.co.uk onto site hippinghygiene.co.uk
I am using integrity theme but valleywindows-halifax.co.uk uses pro, hippinghygiene uses X

Thanks in advance for your help

Cheers
Tony

#2

Hi Tony,

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options > CSS area and see if that helps.

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
    background-color: red;
}

Hope that helps.

#3

Hi
Thanks for that… nearly there… just need to sort the height of the block.
any ideas?

Thanks
Tony

#4

Hey Tony,

Please try adding this code.

.x-navbar .desktop .x-nav > li > a {
    height: 66px;
}

Hope that helps.

#5

Not quite there yet… how do I keep the text central in the box?
Thanks

Tony

#6

Hi Tony,

I’ve checked your website and I can see you have this CSS code:

.x-navbar .desktop .x-nav > li > a {
    height: 90px;
    padding-top: 30px;
}

You need to change the padding-top: 30px; to padding-top: 15px; this should fix this issue.

Thanks.

#7

Fantstic, thats sorted it

Thanks for the help

#8

You’re welcome!
We’re glad we were able to help you out.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.