Red colour on drop-down and tags hover

Sparkling
1

Hello Aigars. Is it possible to change the red colour when hovering (and when selected) on drop-down and tags? And also on the call to action button?

2

This can be done via Theme Options - Main - “Element color on hover”

The same color picker will change color for both of your mentioned elements.

3

Thank you. It’s so easy when you know where to look! What about the background colour on the dropdown when selected, which is currently red? And also for the background on call to action button when hovered, which is red too at present?

4

Thanks for pointing this out!

I decided to recreate how menu item color works on hover. Drop down menu item color will be under “Top nav item hover color” for better consistency.

And Call for action button on hover will work together with “Element color on hover” but this will be available only on the next update (1.5).

Let me know if you have found some other things that are not working like they should, so I can fix them in upcoming version as well.

5

What about the colour of top nav item when selected? I’d like mine to turn white, as it does on the dropdown. Also, I’d like the size of type on the dropdown to be the same size as on the top nav - it’s bigger at present.

Another thing I wanted was the facility to change the font used on the header (instead of an image/logo), from Open Sans to Roboto Slab, so it matched the headings style. Instead I cajoled my son into making an image for me! Maybe this is something you could look at in the next version, as it would be useful to have the option of changing the font used there, or maybe there’s already an easy way around this using CSS and I should have asked you?!

6

These are very specific changes and would be a bit tricky to get done via Theme Options.

You can add his code to Jetpack plugin Custom CSS field or some other plugins for Custom CSS. Due to specific of this code, it will not work via CS field which is inside Theme Options.

.navbar-default .navbar-nav > .active > a {
    color: #fff;
}
.dropdown-menu > li > a {
    font-size: 12px;
}
.navbar > .container .navbar-brand {
  font-family: 'Roboto Slab', serif;
}
7

Done, and works perfectly - thanks so much, Aigars! I had already given Sparkling a 5* review on WordPress but now I’d give you 10* if only I could!!!

8

Thank you!

Probably the next update will break some of color options for header navigation since I will add 2 more color pickers. But from there you will get much better flexibility and customization options.

All custom CSS implementation I provided above (except font size) will be possible via Theme Options and no coding will be needed. With current version there are some limitation with color options but not for long.