What's it called and How do you create it?

[crissy76]

I was surfing around the internet and found this great garden blog. Not only is it packed with info, the design is very neat.

It's looks like the Eleven40 theme. Here's the site: A Way to Garden

I love how the frog and newsletter sign up flip from top to bottom ... it totally fits the site.

The menu at the top flips over so the logo area disappears. In the design world, is there a name for that technique? Code wise, how would I set a menu and header up like that?

[Graham]

Scroll triggered box for the sign up form at bottom

Scroll then fix - for the site header and nav-wrap

e.g. https://wordpress.org/plugins/scroll-triggered-boxes/

There's is done with a bit of jQuery combined with some css

jQuery( function($) {
	$navs = $( '.nav-wrap, .site-header' );
	$newsletterPopup = $( '.newsletter-signup-footer' );
	$( window ).scroll( function() {
		if ( $( window ).scrollTop() > 105 ) {
			$navs.addClass( 'fixed' );
			$newsletterPopup.addClass( 'popup' );
		} else {
			$navs.removeClass( 'fixed' );
			$newsletterPopup.removeClass( 'popup' );
		}
	});
} );

---

My JustGiving page: https://www.justgiving.com/helping-graham-give

[Graham]

Theirs*

---

My JustGiving page: https://www.justgiving.com/helping-graham-give

[Author]

Posts