How To Create Blocksy Sticky Header For Desktop & Mobile?

Just like every modern and responsive WordPress theme, Blocksy also has the Sticky Header functionality. In fact, you can implement the Blocksy sticky header for one or more rows together.

The sticky header is a feature where the top bar, menu bar, and/or bottom bar do not move, even when you scroll through the site up or down.

Making your website look trendy, while giving an enhanced user experience to your visitors.

In this article you will learn what a sticky header is, how to create a sticky header with Blocksy for all devices, sticky state for each header row, and sticky options for Blocksy header builder elements.

As per the Changelog information provided by Creative Themes, Sticky Header feature was released on 20th of August, 2020 and got integrated into the theme customizer. Making it easier for website owners to enable this feature.

How To Create Blocksy Sticky Header?

Before we continue with our post, I would like to mention that you can create a sticky header with Blocksy free as well as premium version.

The only difficulty you face will be a limited set of header builder elements with Blocksy free theme.

That too, for an eCommerce site only. But, for the rest of the elements, an HTML element can easily display the desired output via a simple shortcode.

Blocksy Header Builder Elements Overview

Header ElementsBlocksy FreeBlocksy Pro
Account
Button
Cart
HTML
Logo
Off Canvas Logo
Menus 1 & 2
Mobile Menu 1
Search
Socials
Contacts
Divider
Language Switching
Menu 3
Mobile Menu 2
Search Box
Trigger
Widget Area
Wishlist

From the table above, we can easily create a normal single row header website with a few service pages. But, for creating company sites with lots of data or an eCommerce site, you will need Blocksy Pro.

To understand what else is packed into Blocksy Pro, have a look at

Let us begin by taking inspiration from a sample website’s header.

flatsome website header
Sample Flatsome Website Header

As you can see, the header has three rows.

  1. Top row with store information and a menu
  2. Middle row with logo, search box, wishlist, account avatar, and a shopping cart
  3. Bottom row starting with another menu and contact header elements

Now, let us look at header sticky state.

header sticky state with middle and bottom row as sticky
Header Sticky State

Scrolling down, I don’t see the top row, which means they’ve set only the middle and bottom row as sticky.

Now, this is what we will try to achieve from Blocksy’s sticky state.

Create A Blocksy Sticky Header For Desktop

Here is a three-row header created in Blocksy, from scratch.

blocksy ecommerce header
Three-row header created in Blocksy from scratch

Having Blocksy Pro at my disposal, I used the liberty of creating a proper three-row eCommerce website header, using most of the header elements from the Blocksy theme customizer.

If you’d like to learn how to create a complex three-row header like the one shown above, visit my Blocksy header builder post.

As per the sample website’s sticky header image, we need to make the middle and bottom row sticky for desktop devices.

Step 1: Go to the Blocksy Theme Customizer and click on Header. From there, again click on the Header Tab.

Open Blocksy Header Tab

The header tab shows you all the available headers. In our case, I have customized the Blocksy Global Header.

Step 2: Now click on the Global Header and toggle the switch of Sticky Functionality to enable the sticky header feature.

blocksy header sticky functionality
Enabling Blocksy Header Sticky Functionality

By default, the main row is selected in the sticky state. Blocksy offers sticky states for all the rows in the following sequence;

  • Only Main row
  • Top & Main row
  • All rows
  • Main & Bottom row
  • Only Top row
  • Only Bottom row

Step 3: To accomplish sticky state for Main and Bottom rows, click on main and bottom row option and leave the sticky animation to default.

Also verify that sticky option is enabled on desktop devices. From the Blocksy header builder, we can make sure that we perfectly positioned all the header elements on the site.

Step 4: Verify Sticky Header

Open the site front-end in another tab and scroll up and down to see Blocksy sticky header has taken effect on desktop devices.

verify blocksy sticky header
Verifying Blocksy Sticky Header on Desktop

That’s it, we have finished creating sticky header in Blocksy theme.

Customizing Sticky State

Before, we customize sticky header for tablet and mobile devices, there are two important things I want you to make a note of.

First, using sticky state row shrink in Blocksy theme. What this does is that it allows you to shrink sticky header on scroll. Giving your visitors more page view area.

Second, enabling shadow for the bottom row that helps your visitors to distinguish between header and content area.

Both these features are very useful to enable for tablet and mobile devices.

Enable Sticky State Row Shrink In Blocksy

To enable sticky state row shrink, you need to go to the Blocksy header builder. Make sure Desktop Header is selected, and click on Main Row settings.

blocksy sticky state row shrink

From there, enable Sticky State Row Shrink and adjust the percentage accordingly.

In my case, the ‘main row’ is 80 pixels tall, considering the font size of site text, search box height, and other header elements, 60% is fine for desktop view.

blocksy sticky state row shrink in effect
Enabled Sticky State Row Shrink In Blocksy

See how the main row has shrunk its size, giving more page view area to your visitors, while scrolling up and down.

Note:- At present, this setting is only available for Blocksy’s main row header. For other rows, you might need to apply additional CSS.

Enable Sticky State Shadow For Bottom Row

This feature is necessary when the background color of sticky row is very much similar to the entire site’s background color.

In most cases, it is white, and that makes it difficult for your website visitors to distinguish between the header and content area.

Making it extremely difficult for the eyes to adjust while using tablet and mobile devices.

Creative Themes have taken care of this problem by offering a feature called as sticky state shadow.

To enable sticky state shadow, go to the header builder and click on your last sticky row.

In my case, it is the bottom row on desktop and mobile devices.

blocksy sticky state shadow for desktop
Customizing Sticky State Shadow In Blocksy Header

Similarly, adjust the sticky state shadow settings for mobile header, by clicking on Tablet/Mobile Header, from the Blocksy header builder.

blocksy header mobile sticky state shadow
Blocksy Mobile Header- Default State & Sticky State

Create Sticky Header With Blocksy For Mobile

While creating mobile headers, you must understand that the space given to you is very less.

Therefore, analyze and select the most important elements that make perfect business sense to you.

For example, Trigger element for mobile menu, logo for branding, search box, account, wishlist, and cart element for eCommerce sites.

These are crucial for any eCommerce site and should not be placed anywhere else.

For this reason, I have displayed both the menus within one single Blocksy mobile menu that opens by pressing the Blocksy Trigger Header element.

blocksy mobile menu
Mobile Header With Blocksy Mobile Menu

Step 1: Go to Blocksy Theme Customizer and click on Header. This will open the Blocksy Header Builder.

Step 2: From there, click on Tablet/Mobile Header.

blocksy mobile header builder
Blocksy Mobile Header Builder

From the image above, you can see that there isn’t a single header element in the top row. If you leave a row empty, it does not show on the front end.

For the middle row and bottom row, I have customized the header elements and changed sticky state colors.

Step 3: Click on Main Row (from the header builder), and then click on the design tab to change sticky state color. Repeat the process for Bottom Row and change its color as well.

Sticky State Color Change

Step 4: Optional step

For sticky state row shrink in mobile, click on Main Row, and then on the left side, under General Tab adjust it.

Step 5: Next, apply shadow to bottom row so that users can easily distinguish between header and content area.

blocksy sticky state row shrink and sticky state shadow
Main Row Sticky State Row Shrink & Bottom Row Sticky State Shadow

Go to mobile header builder, click on Bottom Row, then from the left-hand side click on Design Tab and go all the way down to customize sticky state shadow.

Conclusion

That is all there is to Blocksy sticky header for desktop and mobile devices.

Isn’t it easy?

That is because Blocksy theme comes with a powerful header builder that supports customizing complex headers for both desktop and mobile devices.

You can customize colors, transparency, size of fonts, etc. as per your preference. This guide only helps you in achieving the desired results.

Always verify whether your sticky headers are working on all devices and multiple browsers before completing your design activities.

I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol.

Leave a Comment