Community Forums › Forums › Archived Forums › General Discussion › stacking primary navigation over header image
Tagged: header, lifestyle, primary navigation, stack
- This topic has 2 replies, 1 voice, and was last updated 9 years, 8 months ago by CindyLeighDesign.
-
AuthorPosts
-
February 12, 2015 at 4:32 pm #140658CindyLeighDesignParticipant
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/February 19, 2015 at 9:47 am #141315CindyLeighDesignParticipantanyone 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! 🙂
February 19, 2015 at 11:05 am #141320CindyLeighDesignParticipantalso 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%; -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.