Menu options – hover color

photodolphin
(@photodolphin)

10 years, 7 months ago

In
http://www.kadencethemes.com/building-displaying-menus/

this tutorial you mention how to change hover color in Main primary menu as well as secondary. This tutorial doesnt mention that this is premium feature however it is not available in a free Pinnacle version or possibly hidden. If it is can you please help to uncover it or possibly how to edit custom CSS so that it is enabled ? I would also like a padding with round corners to chnage color on hover as well.

Viewing 5 replies - 1 through 5 (of 5 total)

Bojan Radonic – WPMU DEV Support
(@wpmudev-support4)

10 years, 7 months ago

Hey there photodolphin,

How are you doing today?

I’m not sure if this is a premium feature or not as I don’t represent theme authors, but this should be possible with some custom CSS.

Can you please post link to your site so I can take a look?

Cheers,
Bojan

Thread Starter photodolphin
(@photodolphin)

10 years, 7 months ago

http://www.photodolphin.com/
I would like menu items About, Booking etc. display a round corner frame and change color on mouse hover
Ben Ritner – Kadence WP
(@britner)

10 years, 7 months ago
Hey,
I updated the post to note that it’s a premium option.

With the free theme you can use css:
```
.kad-header-style-basic #nav-main ul.sf-menu>li>a {
    background-color: #f2f2f2;
    border-radius: 10px;
    line-height: 40px;
    margin-left: 4px;
}
.kad-header-style-basic #nav-main ul.sf-menu>li>a:hover {
    background-color: #444;
    color:white;
}

.kad-primary-nav ul.sf-menu {
    margin-top: 40px;
}
```
Just add that in your theme options > custom css box.

Hope that helps,

Kadence Themes
Thread Starter photodolphin
(@photodolphin)

10 years, 7 months ago

Great, thanks for you prompt help!
if i want to do th same for site title, which block of CSS would that be?
hannah
(@hannahritner)

10 years, 7 months ago
Hey,
Do you mean for the logo? Try using this css:
```
.kad-header-style-basic #logo {
    border-radius: 10px;
    line-height: 40px;
    margin-left: 4px;
}
.kad-header-style-basic #logo:hover {
    background-color: #444;
    padding-left: 30px;
}
.trans-header #logo a.brand:hover {
    color: #fff;
}
```
Hope that helps!

Hannah