Lifestyle Pro – Mobile Responsive Header – 100% Vary Breakpoints

[gadfly1974]

Hello!

I'm Dani, a designer working on customizing the Lifestyle Pro theme for A. M. Leibowitz (site is technically live, but not finished and has no incoming links since it's still in development). I've also attached here what I envisioned the site looking like with the header.

Full disclosure: I'm much more of a front-end developer, though I am ever so slightly conversational in PHP. In looking at the HTML output, it looks like I would just want to break the header block out of the site-container div and make it 100% (with varying breakpoints on the header image for tablet and mobile), but I'm not sure exactly how to go about doing that. The header.php file for Genesis contains no HTML, and I'm just...not sure where to go to make the header and navigation work the way I had it laid out in the mockup. Anyone have any ideas or able to point me in the right direction to be able to make this work out? Thanks so much!

http://amleibowitz.com

[ᴅᴀᴠɪᴅ]

So, from looking at your mockup. The best way to do this would be to move the header outside of the site-container and then move the primary nav menu to be positioned above the header.

What you need to do is add this code the to the bottom of the child themes functions.php file.. (obv make sure you backup first as this is a delicate file to be editing if your unsure)

/** Reposition header outside site-container */
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ) ;
add_action( 'genesis_before', 'genesis_header_markup_open', 5 );
add_action( 'genesis_before', 'genesis_do_header' );
add_action( 'genesis_before', 'genesis_header_markup_close', 15 );

//* Reposition the primary navigation menu
remove_action( 'genesis_before_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav', 2 );

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[gadfly1974]

This looks great on my iPhone. Thanks for your help!

[Author]

Posts