Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Header – Choose the Header Style and Design
  5. Customizing the Sticky Header

Customizing the Sticky Header

The term “Sticky” refers to staying fixed over the screen as you scroll the page. It could be a sticky header, a sticky top bar or any other component. Under this panel, you will be able to configure the sticky header settings in great detail.

Businesses prefer sticky header when they want the primary navigation to be instantly accessible to users. It depends upon your target audience, but generally speaking, users have multiple alternatives these days. So if you want to grow, you need to optimize every aspect of your website specifically pertinent to your users.

Navigate to your website admin, browse to Appearance > Customize > Header > Mobile Header > Sticky Header.

Enable the Sticky Header

Just enable this sticky header option, if you want the header to stick around as it is while scrolling the page.

Simply click the checkbox next to “Enable Sticky Header” in Sticky Header panel to enable it.

Enable the Sticky Top Bar

Just like the sticky header, the top bar can be made sticky if you so choose.

Simply click the checkbox next to “Sticky Top Bar” in Sticky Header panel to enable it.

Enable the Sticky Mobile Header

You can enable it if you want your mobile header to be sticky as well. However, most businesses prefer sticky header for the laptop (larger screens). For mobile, the collapsible menu does a good job of providing quick navigation.

Just click the checkbox next to “Enable Sticky Mobile Header” in Sticky Header panel to enable it.

Enable Full-Width Header When Scrolling

The sticky header is slightly reduced in width during scroll. If you want to make it look exactly the same way while scrolling as well. You can enable this full-width header option.

Just click the checkbox next to “Enable Full Width Header When Scrolling” in Sticky Header panel to enable it.

Enable the Header Shadow When Scrolling

If you want to add a slight shadow right below the sticky header, enable this option to do so. It adds a modern feel to a website. It’s important because it’s part of the first impression for your users.

Just click the checkbox next to “Enable Header Shadow When Scrolling” in Sticky Header panel to enable it.

Sticky Header Style

The sticky header provides two styles to further fine tune the header display to your needs. They are

  • Fixed
  • Shrink

You can choose one of these two options, as you click over the respective button under the “Sticky Header Style” label in the Sticky Header panel.

Sticky Header Effect

You can choose any header effect from the following; just a word of caution that not all the header effects will work for all the header styles.

  • No Effect
    • Simple, no effect on the sticky header.
  • Slide
    • The header slides in as you scroll
    • The little animation makes it look neat
  • Show Up / Hide Down
    • As you scroll down the page, the sticky header slides up to hide.
    • Scrolling up the page slides in the sticky header to display again.
    • Pretty handy if you need an accessible sticky header but not at the cost of less screen space

Just use the dropdown under the “Sticky Header Effect” label in the Sticky Header panel to choose the desired effect.

Sticky Header Offset

It lets you choose exactly at what scroll point you want the sticky header to stick to the page. A higher offset number will make the header sticky a little later than a lower offset number.

Just use the slider under the “Sticky Header Offset” label to set the offset.

Sticky Padding

You can add padding space to the sticky header to make it look cleaner and to blend well with the design. It doesn’t necessarily mean more space is good, but the right spacing may be a minimum spacing that can have a massive effect.

The padding can be added for the Top, Right, Bottom, and Left in respective order. The inputs are provided under the “Sticky Padding (px)” label in the Sticky Header panel to add the padding.

There’s a link icon that chains the inputs together. So if you want to have the same padding throughout, just click it and add padding for any input. It would automatically duplicate (link) it to others.

Sticky Opacity

The 0 opacity makes an object completely invisible whereas 1 makes it completely opaque. As the number increases from 0 towards 1, the transparency decreases and vice versa. The 0.5 opacity would seem like an overlay effect.

Logo

Sticky Logo

If you prefer a different logo at the time of scroll, you can do so with this setting.

Just click over the “Select Image” button under the “Sticky Logo” label in the Sticky Header panel to upload an image.

Sticky Retina Logo

A retina logo is the same sticky logo, but just twice the size. It’s served when a larger medium is used to browse the site so that the logo remains razor sharp indifferent of any browsing medium.

Simply click over the “Select Image” button under the “Sticky Retina Logo” label in the Sticky Header panel to upload the retina image.

Styling

Background Color

The background color for the sticky header can be changed to fit the design.

Just click over the “Select Color” button under the “Background Color” label in the Sticky Header panel to choose the desired color.

Links Color

The color of the links within the sticky header can be changed to suit the design needs. The colors must either blend or contrast well enough to make it aesthetically appealing and accessible.

Just click over the “Select Color” button under the “Links Color” label in the Sticky Header panel to choose the desired color.

Links Color: Hover

If you want to change the color of the links (of the header section) on mouseover, you can do so using this setting.

Just click over the “Select Color” button under the “Links Color: Hover” label in the Sticky Header panel to choose the desired color.

Current Menu Item Color

The current page (active) menu link color can be changed to differentiate it from the rest of the menu items. Such a visual hint is pretty helpful for users browsing the site, it adds to the overall experience of the site.

Just click over the “Select Color” button under the “Current Menu Item Color” label in the Sticky Header panel to choose the desired color.

Links Background Color

The background color for the links in the header section can be changed as well. 

Just click over the “Select Color” button under the “Links Background Color” label in the Sticky Header panel to choose the desired color.

Links Background Color: Hover 

If you want the background color of the header menu links to change on mouseover, you can use this setting to do so.

Just click over the “Select Color” button under the “Links Background Color: Hover” label in the Sticky Header panel to choose the desired color.

Current Menu Item Background

The background for the current page menu link in the header section can be changed using this setting. You may use this to indicate the link to be current page link, so instead of changing the link color, you can alternatively change the link background. 

Just click over the “Select Color” button under the “Current Menu Item Background” label in the Sticky Header panel to choose the desired color.

Social Links Color

If you want to change the color of the social links, you can use this configuration option to change it.

Just click over the “Select Color” button under the “Social Links Color” label in the Sticky Header panel to choose the desired color.

Social Links Color: Hover

Use this setting to change the color of social links on mouse over.

Just click over the “Select Color” button under the “Social Links Color: Hover” label in the Sticky Header panel to choose the desired color.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?