stacking primary navigation over header image

[CindyLeighDesign]

Hoping someone can help me! I've used Lifestyle Pro as a base, but have really completely customized it for a client. They want the header to resemble this (a theme they had purchased and started working on) http://stxenvironmental.org/wp/ ... I need for the header to be full width with the navigation bar stacked ON TOP of it. I've tried quite a few things but am at a loss. First, I tried just using the css code and telling the header to sit at the top, but it still appeared below the Primary Navigation { sandbox site http://sea.cindyleighdesign.com/news/ }

.header-image .site-title a {
top: 0px;
z-index: 2222;
min-height: 400px;
width: 100%;
}

also as an aside I can't figure out why I can't get the header centered, it keeps floating left ...

.site-title a, .site-title a:hover {
color: #fff;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}

Then I found what I though was the solution here: http://wpsites.net/web-design/lifestyle-pro-full-size-header-image-spanning-entire-width-of-screen/#

but when I add the code to my functions.php, it brings my header up where I need it at the top, but pushes the Primary Navigation below the header. Here is what I currently have:

//* Reposition the primary navigation
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

/** Reposition header */
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 );

I've tried removing the primary navigation add_action, but then I lose the Primary nav altogether.

Anyone have any ideas??? (p.s. my z-index's all seem to be fine, when the Primary Nav sits above the header, it displays over top, so I don't think that is the issue)

http://sea.cindyleighdesign.com/news/

[CindyLeighDesign]

anyone have any ideas? I'm going to revert back to the nav bar above the header at least so that I can present to the client. Ultimately, I need the nav bar to float over the header and the header to have no space at the top. HELP! 🙂

[CindyLeighDesign]

also as an aside I can’t figure out why I can’t get the header centered, it keeps floating left …

.site-title a, .site-title a:hover {
color: #fff;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}

I figured that part out! Sometimes walking away and coming back makes all the difference 🙂

In case this can help anyone out... I added background-position: center !important; as below and it did the trick... now to figure out the nav bar!

.header-image .site-title a {
background-position: center !important;
position: relative;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: 2222;
min-height: 400px;
width: 100%;

[Author]

Posts