Docs

[pablo]

Hi there!
my site is http://www.pablotest.com
I would like to reduce the opacity of the header background color (black) to 0.8, and without a border line at the bottom.
Then, when scrolling down the page, i would like to show the header at 100% black.
How can i achieve this and where should i paste the code?
Thanks a lot!!
Pablo

[Jade]

Hi Pablo,

Please add this in the custom Javascript:

jQuery(function($){

	$(window).scroll(function(){

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

	});
  
});

Then add this in the custom CSS:

.x-navbar {
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    width: 100%;
}

.x-navbar.x-navbar-fixed-top {
    background-color: #000;
}

Hope this helps.

[pablo]

Thank you very much Jade!
However:
1) I still have a black thin line at the bottom of the header. I need to remove it.
2) When i scroll down, all the header dissappears. I need it to be fixed and 100% black.

Can you help me with this?

Thanks a lot!!

[Nico]

Hi There,

1. Add this in your Customizer > Custom > CSS:

.x-navbar{
border-bottom: 0px solid #000;
}

2. remove the position: absolute; in your code above for .x-navbar class.

Hope it helps.

Let us know how it goes.

Thanks.

[pablo]

Hi Nico thanks a lot!
It worked perfectly! That´s exactly what i was looking for!
Two of my pages (directors, contact) have white background color, so i prefer to have the original 100% black header.
To achieve this, i must put the entire code you provided me only in the pages that i want them to show? Through cornerstone? Or the header global style applies to all the pages?

Sorry for my english!

Thank you!

[Thai]

Hey There,

Your website is under construction.

Would you mind providing us with your admin account so we can take a closer look?

Thanks.

[pablo]

Thanks Thai!
Now its avaliable!

[Jade]

Hi Pablo,

Please add this code in the global customizer:

.page-id-21 .x-navbar,
.page-id-15 .x-navbar {
    background-color: #000;
}

Hope this helps.

[pablo]

Thanks Jade, but it isn´t working for me.
Attached is the entire code.
Thanks!

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[pablo]

This reply has been marked as private.

[Joao]

Hi There,

There was a missing } I have fixed for you.

Thanks

[pablo]

THANK YOU VERY MUCH JOAO!!!

[Rahul]

You’re most welcome!

Feel free to ask us again.

Thanks for choosing the X-theme.

[Author]

Posts