Ambiance: Want to have the header area fixed

[Dag-Erling]

Hello

I'm working on this page

http://www.dagerlingjensen.no/montasje

The client would like too have a "measuring band" under the header area. Basically a border but the border needs to be an image that repeats itself.

In order to make this as clean as possible I would also like to remove the shrinking effect from the header. (You see that when you scroll down)

http://www.dagerlingjensen.no/montasje

[JanHoek]

Ok let's give it a try 🙂

Put this in your functions.php

function after_header_content() {
    echo '<div class="after-header"></div>';
};
add_action('genesis_after_header', 'after_header_content', 10 );

Than add something like this to your CSS

.after-header {
	background: url(your-image.jpg) repeat-x;
	height: 20px;
	margin-top:100px; (relative to the height of your header)
	position: fixed;
	width: 100%;
}

And

@media only screen and (max-width: 1023px) {

.after-header {
        display: none;
}

Lets see if it works

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[Dag-Erling]

Hey Jan

That did the trick, thank you so much :D. Kinda wish I new php when I do this.

Now I just need to work with the CSS to make it fit on the screen. A bit of a hassle with the responsive system but I will work.

[JanHoek]

Super. Glad I could help.

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[Dag-Erling]

In case someone else wants to do the same thing you need to add this into the effects.js to make sure the image also gets the shrink effect.

	$(document).on("scroll", function(){

		if($(document).scrollTop() > 100){

			$(".after-header").addClass("shrink");			

		} else {

			$(".after-header").removeClass("shrink");			

		}

[Author]

Posts