Header opacity and change opacity on scroll – Themeco Community

Header opacity and change opacity on scroll

Aaronanonymous — Sat, 15 Nov 2014 23:45:18 +0000

I would like to create an opaque header when at the top of the page. When scrolling down I would like to have the header resize and change to a more solid, or completely solid color. I’m using integrity right now and I’ve only been able to achieve a transparent header. Also the drop-down menu when hovering over a menu icon would need to match the header color. Right now the dropdown is white but my text is white so the text cant be seen unless hovering over the text.
The site that I found that has this type of header is http://razorfrog.com/
Thank you for your time.

Reply To: Header opacity and change opacity on scroll

Rad — Sun, 16 Nov 2014 21:57:00 +0000

Hi Aaron,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Reply To: Header opacity and change opacity on scroll

hjaffer — Tue, 25 Nov 2014 13:24:53 +0000

Aaron

Did you find out how to achieve this resizing header thing yet?

Using Integrity too.

Thanks

Reply To: Header opacity and change opacity on scroll

Darshana — Tue, 25 Nov 2014 15:58:02 +0000

Hi there,

Could you please provide us with the URL to your site? So that we can inspect your current setup and assist you with the necessary CSS/ JavaScript workaround to adjust your header.

Thanks!

Reply To: Header opacity and change opacity on scroll

hjaffer — Tue, 25 Nov 2014 16:53:34 +0000

Thanks for your reply. I’ve not gone live yet so all you’ll see is a coming soon page. What would you suggest?

Reply To: Header opacity and change opacity on scroll

Nabeel A — Tue, 25 Nov 2014 20:50:46 +0000

Hi there,

To achieve the header scroll effect, Please add the following jQuery script via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 0) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent");
		}
	});
});

Let us know how this goes!

Reply To: Header opacity and change opacity on scroll

hjaffer — Wed, 26 Nov 2014 12:13:21 +0000

Thanks for this. But, isn’t this already there in the theme? I mean I already have it this way. The question was to have the header resize (smaller) while scrolling down, so the logo and menu become smaller. See the site that Aaron shared above please.

Appreciate your support guys.

Reply To: Header opacity and change opacity on scroll

Zeshan — Wed, 26 Nov 2014 17:35:24 +0000

Hi Hjaffer,

Thank you for writing in!

We would love to assist you with this, but we need to see the site firsthand to provide you a tailored answer. If you could upload the site so we can see it, we can get a better idea of what’s happening.

Thanks!

Reply To: Header opacity and change opacity on scroll

Aaronanonymous — Sun, 18 Jan 2015 07:34:08 +0000

Sorry for the late response, I’ve been out for a while.
I’m glad to know other people have an interest in achieving the same header style 😉
I will post my site below and mark it as private.

While I’m here though, I’m currently having another issue that I hope I can get help with.
If you scroll down on some of my pages half the screen goes black. I’m not really sure what is happening but it is frustrating not to be able to see more than 80% of my page content.

Reply To: Header opacity and change opacity on scroll

Aaronanonymous — Sun, 18 Jan 2015 07:34:24 +0000

This reply has been marked as private.