Sticky Before Header Widget Area

[Gina]

Added a before header widget area to the site via code in functions.php. Client now wants it to be sticky but I'm not having success figuring out how to make that happen. Any help would be greatly appreciated!

http://azarues.com/

[Doug Edgington]

I assume you are trying to create some type of sticky message that hangs at the top once the user scrolls down. Brian Gardner has a great tutorial on how to set this up: http://briangardner.com/genesis-sticky-message/

---

Doug Edgington
http://www.dougedgington.com

[Gina]

Thank you for responding. I'm sorry but no that's not what I am trying to do. If you take a look at my link I provided the Before Header Widget Area has a bunch of stuff...social icons, request an appointment button, and a custom menu. I need to make that whole widget area sticky. So yes I need that area to stick to the top of the screen even as the user scrolls down but I'm not sure I can tie that particular tutorial to my need.

I have the following functions in place to create the Before Header Widget Area:

//* Register before header widget area
genesis_register_sidebar( array(
	'id'          => 'before-header',
	'name'        => __( 'Before Header', 'digital' ),
	'description' => __( 'This is the before header widget area.', 'digital' ),
) );

//* Hook before header widget area before site header
add_action( 'genesis_before_header', 'bg_before_header_widget_area' );
function bg_before_header_widget_area() {

	genesis_widget_area( 'before-header', array(
		'before' => '<div class="before-header widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );

}

[Doug Edgington]

So you are wanting it to stay posited at the top like a fixed header. You will have to position the below-header section fixed at the top of the page. See example below.

.before-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}

Some items will now be hidden by the below-header section, since it is now using fixed positioning. So you would need to push items down - a height equivalent to the height of the below-header section. You can do this by applying a margin or padding to the site-header or below-header sections. Or you can set some type of bumper after the below header section.

You will also have to do something to compensate for the admin bar for logged in users. Something like the following:

.admin-bar .below-header {
	top: 32px;
}

---

Doug Edgington
http://www.dougedgington.com

[Gina]

z-index! For some reason I didn't think of the z-index. I had been trying fixed position, top and left 0 with width 100% but the z-index made all of the difference 🙂 Of course I used .before-header rather than .below-header but otherwise this worked like a charm! Thanks so much!!!

[Doug Edgington]

No problem. Yes, I accidentally put below-header in the admin bar example.

Have a good weekend.

---

Doug Edgington
http://www.dougedgington.com

[Author]

Posts