[PRO] Header from transparent to white when hovered

[Jonathanronmoore]

My header is transparent in absolute 0. How can I make it have a white background when hovered? As well as change the text color.

http://www.jonmoorecoaching.com/

Thanks

[tristup]

Hi Jon,

Thanks for reaching out.
To change the header bar color on hover, you need to add a few custom CSS code into the Theme Options > CSS. The colors used in the code are for showing an example, please change it according to your need.

.e86-1.x-bar:hover
{
    background-color: #ff0000;
    color:#0000ff;
}
.e86-1.x-bar:hover .x-menu > li > .x-anchor:hover .x-anchor-text-primary
{ 
    color:#0000ff;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Jonathanronmoore]

I did the changes and it works great!

The problem is that the font color remains white, what has to be done to change the text color of the header when hovered?

Appreciate the help

[prakash_s]

Hello @Jonathanronmoore,

Please add this custom CSS code under X/Pro —>Theme option -->CSS.

.e86-6.x-bar-content ul.x-menu.x-menu-inline li a.x-anchor.x-anchor-menu-item .x-anchor-text-primary:hover {
color: #2196f3 !important;
}
.e86-1.x-bar:hover span.x-anchor-text-primary {
color: #000000 !important;
}

Please feel free to change the colour code as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks