Help with pro header styling: text color on hover

Support
#1

Normally I do fairly well at fixing simple CSS issues, but I am still unfamiliar with the Pro header builder code and need help with a hover interaction in my main nav.

My site is here. Here is the problem:

My custom CSS here:

.x-bar-absolute .x-anchor-text-primary { color: #fff;} <–Taken from another forum thread I want a transparent nav/white text when scroll top=0

is being overridden by this header builder css:

.hm5.x-menu > li > .x-anchor .x-anchor-text-primary {color: #999}

If I add !important to my CSS then it overrides the following CSS, even though I’ve scrolled down and .x-bar-fixed has been added by the builder:

.x-bar-fixed .x-anchor-text-primary {color:#999} <–Taken from another forum thread I want an opaque nav/grey text when scroll top>0

But then if I add !important to the line above then my hover CSS gets overridden.(I want white text/blue background on hover)

When I then add !important to my hover declaration, depending on how I do it, either the text will only change color on hover when the text itself is hovered, but not when the button area around the text is hovered, or it just doesnt work at all:

.x-bar-fixed .x-anchor-text-primary { color: #fff!important;}

I’d prefer not to use all these !important declarations in the first place. I also dont understand why, when the class .x-bar-fixed gets added why the previous css using .x-bar-absolute is still overriding it.

I also dont understand why adding !important to a :hover declaration overrides the non-hovered font color.

So after trying many different permutations I still can’t get this to work properly. Thanks for your help.

#2

Hi There,

Thank you for writing in, you can do that in Pro without using a custom CSS. For this you need two bars, the first bar serves as your static top navbar (top=0), while the second bar is the fixed top navbar (top>0).

To do this you need to turn on the second bar’s sticky bar option, and set it as initially hidden so both bars wont show up on the same time. (https://prnt.sc/gbgh3q)

From there you can style your Bars and its content differently.

Hope it helps,
Cheers!

#3

Thanks. This does work much better than what I was attempting.

Follow up question: I always thought (and read from other X users) that this method of having duplicates of elements where one is hidden based on screen size, or in my case, based on scroll position, was not a good idea because it adds bloat to your site. Is that not something to be concerned about? Perhaps the additional code is negligible.

#4

Hi there,

That is correct if you overload the website with that stuff. But Headers and Footers have the bare minimum HTML code comparing to the rest of the website and they are repeated mostly on many pages which make the browsers already cache the info and assets for them and load them quicker.

But in general yes you need to avoid that method as much as you can unless it is 100% necessary. In the Header/Footer builder case, it is the only way.

Thank you.

#5

Hello. Another follow up question to the 2-bar solution for having a transparent/non-sticky bar which transitions to an initially hidden opaque sticky bar:

When I add a Content Area Dropdown, it seems I need to add it to both bars, one an exact copy of the other. This works fine for the sticky/opaque bar, but the dropdown has odd behavior on the non-sticky/transparent version when its open/visible. Because the transparent bar is non-sticky, when the dropdown menu is opened, it overlaps the transparent header, and when the user scrolls a bit, the dropdown also scrolls up, while the opaque sticky header appears beneath it with its still-closed dropdown toggle.

Similarly, if you scroll down the page and then open the menu, and then scroll back to top with it open, the transparent bar and its toggle (closed) reappear, allowing the user to open both versions of the menu at once.

Is there a better way to do this?

thanks for your help

#6

Hi there,

It’s known issues when using multiple sticky bars, unfortunately, there is no available workaround at this moment. But our developers are already on it. Please stay tuned for further updates :slight_smile:

Thanks!