Creating Shrink Header on GBeaver Theme

Sticky header effect is inbuilt in GBeaver Theme. Using this option you can easily add the shrink effect at your site header.

Step 1: Enabling the sticky header effect.

Login to Dashboard, navigate to GBeaver options page and expend the General Settings section. Enable the Sticky Header feature. Click on “Save  Changes” button and save the settings.

Sticky Site Header

Sticky Site Header

Step 2: Adding Some Custom CSS

Open the style.css file from gbeaver folder and add the following CSS.

Step 3: Editing the JS file

This is the last steps. Open the gbeaver-scripts.js file from assets/js folder and replace the following JS code


All done now. Refresh your site now and checkout the shrink header effect.

Reader Interactions

Leave A Reply