Community Forums › Forums › Archived Forums › Design Tips and Tricks › Make existing widget area full-width above header
Tagged: full width, header, swank
- This topic has 4 replies, 3 voices, and was last updated 9 years, 3 months ago by
hmistler.
-
AuthorPosts
-
December 29, 2014 at 12:39 pm #135574
hmistler
MemberHi! I've read a lot of tutorials about how to make full-width widgets, but I'm having some trouble with doing this on my website. My issue is I bought a studiopress theme, Swank, which comes with a section called "Top Bar" already above the header. I've changed the background color of it to black, and I noticed that this Top Bar area is not full-width. I need it to be! I checked it's code in my functions.php file and here is what it looks like:
//* Add Top Bar Above Header add_action( 'genesis_before_header', 'swank_top_bar' ); function swank_top_bar() { echo '<div class="top-bar"><div class="wrap">'; genesis_widget_area( 'top-bar-left', array( 'before' => '<div class="top-bar-left">', 'after' => '</div>', ) ); genesis_widget_area( 'top-bar-right', array( 'before' => '<div class="top-bar-right">', 'after' => '</div>', ) ); echo '</div></div>'; }
The style.css is this:
.top-bar { background-color:#000; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1; padding-bottom: 10px; padding-top: 15px; text-transform: uppercase; } .top-bar a { color: #bbb; font-family: 'Old Standard TT', serif; font-size: 16px; font-style: italic; letter-spacing: 0; text-transform: lowercase; }
What would be the best way to make this area full-width? When I check it in firebug, the HTML says it is within the "Wrap" div. I guess I need to get it out of the wrap? Any advice much appreciated! You can see what I'm talking about here:
http://www.haleymistler.com/blog/
http://www.haleymistler.com/blog/December 29, 2014 at 7:57 pm #135614DTHkelly
MemberHave you tried the PDC forum (for this theme?)
Move top bar above the wrap?
http://www.carriedils.com/customize-genesis-move-header/
http://wpbeaches.com/adding-full-width-wrap-content-genesis-child-theme/Another thought: What about the hook
genesis_before
Is that outside the Swank boxed wrap?December 30, 2014 at 9:03 am #135666hmistler
MemberThanks for the reply - I tried Carrie Dill's php code to move the header outside the wrap; it actually made my Top Bar segment move further down the page! Using the hook guide, I can see that genesis_before IS outside of the wrap (which in this theme is called "site-container"). I think I need to switch something in the PHP code to make it move the top bar, as the code Carrie wrote moves just the header and this is not part of the header. It is its own div ABOVE the header. Here is what Carrie wrote:
//* Reposition header outside main wrap 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 );
My thought is I need to switch 'header' to 'swank_top_bar' or something. OR change the PHP code from "genesis_before_header" to "genesis_before":
//* Add Top Bar Above Header add_action( 'genesis_before', 'swank_top_bar' ); function swank_top_bar() { echo '<div class="top-bar"><div class="wrap">'; genesis_widget_area( 'top-bar-left', array( 'before' => '<div class="top-bar-left">', 'after' => '</div>', ) ); genesis_widget_area( 'top-bar-right', array( 'before' => '<div class="top-bar-right">', 'after' => '</div>', ) ); echo '</div></div>'; }
Would ^that code work? I'm nervous to play around with the php too much.
December 30, 2014 at 9:42 am #135670Genesis Developer
MemberOk. I am trying to help. You do not need custom php code. Just modify the few CSS.
go to line 405 and replace the current code by
.site-container { background: #fff; margin: 0 auto; }
go to line 2240 and replace the current code by
.top-bar .wrap { background: #000; padding-bottom: 10px; padding-top: 15px; width: 100%; z-index: 100; }
Add this new code
.top-bar { position: fixed; width: 100%; }
December 30, 2014 at 10:44 am #135673hmistler
MemberThat worked! Thank you!
-
AuthorPosts
- The topic ‘Make existing widget area full-width above header’ is closed to new replies.