Transparent menu settings interfering with non-transparent pages

Hi Yigit,

Unfortunately that’s not fixing the issue. It’s not the transparent menu color that’s the issue, it’s the text color. (But I did give it another shot via transparency options and General styling header font color settings–no luck.)

On the homepage (see below), we have the glassy transparent header just right–white font for menu items, white font for acitve links. (we would like to be able to have a different color bar under the link if possible, right now I can’t change it from #666666 otherwise I’ll overwrite other font color settings, but this isn’t critical).

But when we go to an interior page (see below), we have the menu color they way we want it (white) and the menu items the way we want it (#666666) but the active links turn white–causing the text to dissapear.

Put it another way, what’s the quick CSS for separate header styling on the homepage with a fullscreen video and transparent glassy header vs interior pages without a fullscreen video and normal header?

Thanks, sorry if I’m being confusing!

Thanks Mike,

One step close-r-we have #666666 in the sticky menu, but not when it’s full size at page top.

Thanks Mike and sorry for the delay,

Got pulled on a different project until now.

So close! Now it’s just the hover that still turns white!

Hey Mike, that didn’t fix the total problem, the nav item still turns whit when hovered over and dissapears over the white background.

Any way I could get some help on this? This is a weeks running problem.

Here’s all the short code currently in use on the site. Check out the private link and mouse over any non-active menu item, you’ll see what I mean.

Thanks

——————

.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, { color: #666666;}

.header_color .main_menu ul:first-child > li.current_page_item > a { color: #666666;}

.helvetica-websave {
font-family: Ingra, “HelveticaNeue”, “Helvetica Neue”, Arial, Verdana, sans-serif !important;
}

.sort_by_cat a.active_sort span {
background: transparent;
color: #f36e21;
font-size: 16px;
}

h1, h2, h3, h4, h5, body{
font-family: Ingra !important;
}

.avia-menu-text {
font-family: Ingra !important;
}

h1, h2, h3 {
text-transform: none !important;
}

.header-scrolled .av-main-nav > li.current-menu-item a > .avia-menu-text {
color: #666666 !important;
}

.header-scrolled .av-main-nav > li:hover a > .avia-menu-text {
color: #666666 !important;
}
a.aviablank.avia-testimonial-link {
color: #666666 !important;
}

.main_menu ul:first-child > li > a { font-size: 16px; }

Hey Mike,

Thank you for your patience as well,

That solved our problem, but for anyone checking around threads for a similar solution, just a heads up that the fix does not work with Custom Link items for some reason.

I had a couple up that I was just messing with that I did not intend to keep, so I just got rid of them and the last piece of code did the trick. Not sure how you’d modify it to include custom links as well.

Thanks!

Hey Rikard,

It just didn’t work on them–still went to white at hover–but they were just placeholders for our site, so I removed them. At this point it’s not possible for me to put them back so you can get a peak (site’s under review) but if it’s helpful, here’s the full short code we got going on, perhaps we’re getting some bits and pieces that aren’t playing nice with one another.

.sort_by_cat a span {
font-size:20px!important;
}

#avia-menu li:hover a {
color: #666666;
}

.avia-no-number { opacity: 1; }

.av-menu-button-colored span.avia-menu-text {
background: #f36e21!important;
color: white !important;
}

.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, { color: #666666;}

.header_color .main_menu ul:first-child > li.current_page_item > a { color: #666666;}

.helvetica-websave {
font-family: Ingra, “HelveticaNeue”, “Helvetica Neue”, Arial, Verdana, sans-serif !important;
}

.sort_by_cat a.active_sort span {
background: transparent;
color: #f36e21;
font-size: 16px;
}

h1, h2, h3, h4, h5, body{
font-family: Ingra !important;
}

.avia-menu-text {
font-family: Ingra !important;
}

h1, h2, h3 {
text-transform: none !important;
}

.header-scrolled .av-main-nav > li.current-menu-item a > .avia-menu-text {
color: #666666 !important;
}

.header-scrolled .av-main-nav > li:hover a > .avia-menu-text {
color: #666666 !important;
}
a.aviablank.avia-testimonial-link {
color: #666666 !important;
}

.main_menu ul:first-child > li > a { font-size: 16px; }

Hey Mike,

Yeah I’m sorry I had to delete all the experimental pages and such from the site–no custom links exist up there any more for you to check out.

Hey Rikard,

We’re good to close this out and thank you very much for asking. While there may be a thing or two left to work out for special cases, the short code in this thread should work really well for most folks who need different color nav links for transparent / normal pages!

Thanks again to you and Mike for the help,

MJ