To make global block as stiky header contents

Can you someone provide how to make global content to stick to the top or maybe to the bottom for PC and mobile?

I use X theme with No container with no header with footer.

So I wish to use global block as a sticky header.

THANKS

Hi @jo3

Thanks for writing in!

You can do that by following these steps:

  • Create your global block following this guide.
  • Add this code snippet to your functions.php file in child theme directory:
function add_sticky_header() {
	echo '"<div class="sticky_header">'.do_shortcode('[cs_gb id=215]').'</div>'; 
}

add_action( 'x_before_site_begin', 'add_sticky_header', 10 );

Make sure to replace [cs_gb id=215] with your global block shortcode.

if you don’t know how to create child themes, please follow this guide:

  • Add this CSS snippet to (X > Theme Options > CSS):
.sticky_header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

Thanks.

Thanks alot.

It works and it does stick.

But I set default page as BOX style and this Global block stick for full screen. They are too wide.

How can I manage it?

and can you please also give me a chance to do this for sticky-footer for mobile device as well as stiky-top you just adovice?

Hi,

Please change the code to this.

function add_sticky_header() {
	echo '"<div class="sticky_header"><div class="x-container max width">'.do_shortcode('[cs_gb id=215]').'</div></div>'; 
}

add_action( 'x_before_site_begin', 'add_sticky_header', 10 );

Hope that helps

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.