fading sticky header like the “Naked Header” example

[alikapadia]

Hi,

In the theme’s naked header demo example, the header’s background color slowly fades in when you scroll down the page. However when I try to replicate that header, and reduce the Header Opacity property down to 0, and then when I scroll down the page, the header’s background color seems to show up immediately without any fading transition that shows on the Naked Header demo.

How do I add this fading transition effect so that the header doesn’t show up so abruptly?

[alikapadia]

I was able to follow this article in the knowledge base to get the fading affect: http://support.swiftideas.net/knowledgebase/replicating-the-demo-naked-header-example/

And I used the Home (Example Eight) in the Swift Page Builder to get something close to the desired look. But it’s still not fully replicating the Naked Header Demo example. At the moment encountering 2 issues:

1. There is a big space in between the background video and the menu itself. I am not sure which setting this spacing is coming from: http://glui.me/?i=p4x39za6yb2sk0v/2013-11-27_at_5.56_PM_2x.png/

2. The CSS provided in the article requires me to upload a retina logo. Is there a way to just keep on using the default text as the site title as is? At the moment it keeps showing the title in black where as it should be in white (since the dark video will be in its background) and then it should turn black once the user scrolls. Is there a way to do this without uploading a new retina logo?

[alikapadia]

So far, I was able to reduce the extra space showing on top by selecting the 7th header in the header options. However this still leaves me with this extra space shown here: http://glui.me/?i=t6y2pawg1gt97i0/2013-11-27_at_7.58_PM_2x.png/

I am guessing I am still missing some setting here.

The item no.2 I mentioned is also still unresolved.

I can really use some help here with this

[alikapadia]

I was able to find the “Remove the spacing at the top of the page” option in the page meta options. That helped me fix the issue no.1. That still leaves me with the issue no.2 unresolved. Mentioning it again here

2. The CSS provided in the article requires me to upload a retina logo. Is there a way to just keep on using the default text as the site title as is? At the moment it keeps showing the title in black where as it should be in white (since the dark video will be in its background) and then it should turn black once the user scrolls. Is there a way to do this without uploading a new retina logo?

[Swift Ideas – Ed]

@alikapadia – glad you managed to get that far. For the text, try this:

.page-id-15 .sticky-header-resized #logo h1 {
color: #222!important;
}

If that doesn’t work, drop me a link to your page and I’ll check it out.

– Ed

[alikapadia]

Thank you!

I was able to make this work by modifying the above css a bit to this:

.page-id-2442 .sticky-header #logo h1 {
color: #fff!important;
}
.page-id-2442 .sticky-header-resized #logo h1 {
color: #222!important;
}

[Swift Ideas – Ed]

Ahh nice, good stuff. Glad you sorted it!

– Ed

[onegiantleap]

Thank you so much, alikapadia. Your solutions with page meta options did the trick for me. Most appreciated!

[Tahir – SUPPORT]

🙂