[AaronanonymousParticipant]

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.

[RadModerator]

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.

[hjafferParticipant]

Aaron

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

Using Integrity too.

Thanks

[DarshanaModerator]

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!

[hjafferParticipant]

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

[Nabeel AModerator]

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!

[hjafferParticipant]

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.

[ZeshanMember]

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!

[AaronanonymousParticipant]

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.

[AaronanonymousParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Aaron,

Thanks for the url.

You need to select fixed top for your navbar.

http://screencast.com/t/NaD5Xx1JN

With regards to half screen goes black, I am sorry but I could not find the page with that issue.
Can you provide us the url of the page where we could see the issue.
Thanks

[AaronanonymousParticipant]

Actually I figured this issue was only happening when running on firefox. The problem did not present itself when on explorer.

[ChristianModerator]

Hey Aaron,

Can you give us a screenshot of the issue. There seems to be no problem in Firefox on our end.

Thanks.

[Tristan AParticipant]

Hi there,

I have stolen bits and pieces of code from various posts across the forum (I guess that is what the forum is for right 😉 …. and my site is starting to look amazing!

I also took the above Javascript code and it works wonderfully! I was just wondering… is it possible to add a bit of JS code to make the font colors of the menu in the Navbar change too??

Many thanks in advance!

Tristan

[ThaiModerator]

Hi There,
Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-navbar .desktop .x-nav > li > a {
color: red;
}

Hope it helps.

[Author]

Posts