Header the same as FIXED header?

tommychi

Hello, first of all thank you so much for the wonderful support i really appreciate it. I have another question. How would i make the FIXED header (the one that appears when you start scrolling) the same thing as the regular header. Right now, they are different and i would like them to be the same. I have attached some images below to show you what i mean.

The first image shows how the header looks normally. The 2nd image shows the FIXED header that appears when you start scrolling down. I want the FIXED header to just remain the same as the normal header. I hope that makes sense. Thank you!

Air

Hello:-)

Yes it is clear, but this is not possible. I requires many changes in code, that you will lose on updates. Mainly changes in JS code.

However you could try to force it by CSS to make display: none !important; on this header that shows when scrolling, and add position: fixed; on normal header. They are two different elements, so it could be possible, however I am not sure will it work flawless just like that.

Do you need help, or you are familiar with using firebug?

With regards.

tommychi

thank you very much that worked perfectly. however, is there any way to change the opacity of the header when you are scrolling and not have the opacity when you are at the top?

Air

You would have to add some custom JavaScript to get that, cause with CSS alone this is not possible. If this critical for your site, I can try to combine some JS, but you would need custom Javascript plugin for this.

With regards.

tommychi

thank you so much for your reply. my client says that it is pretty critical to have it opacity when scrolling. which custom javascript plugin would i need to install?

tommychi

or if it's possible to edit the FIXED header so that i could add a logo on the left and maybe some social icons on the right side, that would be a good alternate solution as well. something similar to this: http://pinkpeonies.com/

Air

Well, about plugin you will have to search for some that works for you.

Why don't you just setup background color in rgba? This way you will have opacity, and if you need solid background under header you can push down content with padding or something and page background would give ilusion of full color.

Or even better set your header in rgba, and add same size div with solid color, but positioned absolute right below header.

This will give you your effect.

tommychi said: or if it's possible to edit the FIXED header so that i could add a logo on the left and maybe some social icons on the right side

Lot of JS work.

With regards.