Header builder - Transparent header that turns white after section

Support
#1

Hi there,

I’m building a header like this:

The goal is to have something like this:

So basically, at the top of the page it is transparent. but once I scroll down to a section with text, it becomes white.

The issue right now is that if it stays transparent, the text is invisible due to it being white… so basically I’m wondering if there are some settings for this, or if it is only available with some JS, and if you maybe have some of that magic JS code lying around somewhere :smiley:

Thanks!

Can you change header style as you scroll down page?
#2

Hi @Pbalazs89

If you want to control the menu header bar background and menu links color after scrolling, then that’s the CSS snippet you need to add in (Theme Options > CSS):

.x-bar-fixed {
    background-color: hsl(0, 0%, 100%)!important;
}
.x-bar-fixed .x-menu > li > .x-anchor .x-anchor-text-primary {
    color: hsl(0, 100%, 50%);
}

If for some reason this didn’t work for you, then please provide us with your exact page URL that you have this issue on so we can investigate this issue further.

I checked your website link but it seems to be under construction, if you want to share any login details feel free to do so in “Secure Note”.

Thanks.

#3

I was in the same need as Pbalazs89, but I applied the code in my settings and showed no results.
Can you help me Alaa?

#4

Hi @nanclar,

Would youd mind providing us with your website URL so we can take a closer look?

Thank you.

#5

Thank you for your attention to my problem. While browsing the forum I found some tips on this issue and applied the following code:

In CSS:

.masthead {
  position: absolute;
  width: 100%;  
}

.x-navbar {
  background-color: transparent; 
  border-bottom: 0;
  box-shadow: none;
}

.x-navbar-fixed-top {
  background-color:  #3c3c3c;
  opacity: 0.8;
}

in JS:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar').removeClass('x-navbar-fixed-top');
		}

	});

});

The result you can see here: marlycordeiro.com.br

#6

Hey There,

It seems that the given url is not using the X theme.
Could you please double check or give further instructions on how we can view your X theme powered site?

Thanks.

#7

I’m so sorry. Shame on me. The url is correct, but still redirecting to the old website. The new version I’m developing (using X Theme) is accessible by changing the hosts file on windows.
You can reach it by 108.179.192.222

#8

No problem.
I have checked your site already and it is working perfectly.

If you want to have a solid color, you will have to update the code and use this:

.x-navbar-fixed-top {
  background-color:  #3c3c3c;
  opacity: 1;
}

Feel free to change the opacity and the background color according to your preference.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.