BlueOwlCreative » Topic: Menu color doesn't stay the color selected in Transparent Header Settin

Menu color doesn't stay the color selected in Transparent Header Settin

AlexNavas — Tue, 29 Sep 2015 17:48:54 +0000

I have set the transparent floating menu color to white on http://fladvisors.wpengine.com/, however, where I scroll down, it changes to black even though it’s set to #ffffff under Transparent Header Main Navigation Text Color. How do I make sure the menu remains white at all times?

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

BlueOwl — Wed, 30 Sep 2015 07:49:39 +0000

Hi Alex,

What Main Navigation Text Color do you have set under Main Navigation tab?

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

AlexNavas — Wed, 30 Sep 2015 22:52:37 +0000

White (#ffffff) for both Main Navigation Text Color and Main Navigation Hover Text Color

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

BlueOwl — Thu, 01 Oct 2015 09:17:58 +0000

Hi again Alex,

You are totally right, there’s a bug that prevent this color from kicking in!
Please find this line in your includes/boc_framework.php file:

background: '.boc_HexToRGB(esc_attr($sticky_header_color), esc_attr($sticky_header_opacity)).';}

and remove the last character or replace with:

background: '.boc_HexToRGB(esc_attr($sticky_header_color), esc_attr($sticky_header_opacity)).';

Please, let me know if that fixes the issue and thanks for your heads up!
This will also be in the upcoming theme update. Cheers!

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

BlueOwl — Thu, 01 Oct 2015 09:28:49 +0000

One more thing, if you are keeping your “Main Navigation Hover Text Color” white as it currently is your button won’t look neat on hover, so you can add this to your Theme Options->Custom Styles:

#menu > ul > li.boc_nav_button a:hover {
    color: #333!important;
}

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

AlexNavas — Thu, 01 Oct 2015 13:31:37 +0000

Thanks for your reply. I made the change to the php file and now the white stays. I also added the css to the custom css area in the settings, but the button hover now remains completely white. Is there something I missed?

I would like the button to turn green upon hover just as it is within the normal (non-floating) menu.

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

BlueOwl — Thu, 01 Oct 2015 19:46:01 +0000

The code didn’t paste right… If you check your Source Code you will see the “greater than” chars got HTML encoded and switched to & gt; instead of >, replace those with simple “>” chars.

http://i.imgur.com/Eb6kBYW.jpg

Currently your hover color for the sticky menu is white, can u set it to green so they green on hover just like they do on the transparent menu? Let me know once you do and I will give you the code for the button.

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

AlexNavas — Thu, 01 Oct 2015 20:57:14 +0000

I updated the css using > but still not showing up right. Here’s my settings.

http://www.screencast.com/t/e8HCUEhAV

Where do I change the hover color to green?
I tried:

#menu > ul > li.boc_nav_button a:hover {
    color: #ffffff!important;
    background-color: #b9d974!important;
}

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

BlueOwl — Thu, 01 Oct 2015 21:09:15 +0000

It’s still not the “>” chars… it’s the HTML encode version of them, I think the encoded happened when you copied it from here (the forum).
Please paste this instead:

#menu > ul > li.boc_nav_button a:hover {
color: #ffffff!important;
background-color: #b9d974!important;
}

This is what you currently have:

http://i.imgur.com/Eb6kBYW.jpg

Reply To: Menu color doesn't stay the color selected in Transparent Header Settin

BlueOwl — Thu, 01 Oct 2015 21:10:07 +0000

If it still gets HTML encoded just do this instead:

#menu ul li.boc_nav_button a:hover {
color: #ffffff!important;
background-color: #b9d974!important;
}