Headway Themes is turning 6! We're having a webinar and showing a sneak peek of Headway 4.0 to celebrate! Cick Here To Sign Up For Free →

Reduce the size of your sticky wrapper contents as you scroll

Reduce the size of your sticky wrapper contents as you scroll

You may be taking advantage of Headway’s built-in sticky wrapper feature and realize that you’d like your logo and/or your menu item to reduce in size once the wrapper becomes sticky as you scroll.

With just a little bit of CSS, you can do this easily.  This tutorial will go over two potential options, a header with a site title in text and a header with a logo.  Both include a navigation block.

Simply copy and paste one of the snippets into the Live CSS Editor.

Header with logo image

This will set a transition of reducing the image size in the header block and the font-size in the navigation block after the wrapper becomes sticky

Header with Site title as text

This will set a transition of reducing font-size in the header & navigation block after the wrapper becomes sticky

You may be wondering why the font for the site title is set to 150%.  You might be expecting the font-size to then be larger on scroll but the percentage is the percentage of the base font size i.e. on the body (or HTML element).
Create a sticky wrapper in your WordPress site with Headway

Create a sticky wrapper in your WordPress site with Headway

Creating a “sticky” wrapper (one that stays at the top of the screen as a user scrolls) in Headway can be done in 3 clicks!  Many people wanted this feature and typically you see the menu as sticky but that’s not a requirement, of course.

Are you ready to add a Sticky Wrapper? Let’s go!

Step One: Open the wrapper options for the wrapper you want to make sticky


sticky-wrapper-1
Step Two: Click on “Sticky Positioning Tab”

sticky-wrapper-2

Step Three: Click on “Enable Sticky Positioning” and that is it!

sticky-wrapper-3

Save, of course, and then view your site to see the sticky wrapper functionality!

Add Parallax to your WordPress site with Headway

Add Parallax to your WordPress site with Headway

Headway makes it easy to add parallax to your WordPress powered site. The written tutorial is first and at the end is a screencast that goes over creating a sample design so pick your poison! Finally, at the very end, find the layout I created as a downloadable file. Use as a reference or a starting point!

Jump to:

Part One: Grid Mode

Step One: Create desired numbers of wrappers in Grid Mode

I’m using 5 to re-create the design in this tutorial.

parallax-add-wrappers

You can also add an alias to the Wrappers to make them easily identifiable.  Please see: Wrapper Options article

Step Two:  Add text blocks in each wrapper

parallax-text-blocks

You can use the duplicate block feature to quickly duplicate a block so it keeps your set height and even content.

Make sure to add the desired text in each text block.
parallax-text-blocks-text

Step Four: Change wrappers to fluid

Right click on the wrapper and choose “Change Wrapper to Fluid”

parallax-wrapper-fluid

Part Two: Design Mode

Step Five: Add background image(s) and set to parallaxparallax-image-parallax

Select the wrappers you need to add images to, right click and choose Edit This Instance.  Then in background settings, add an image and change the following settings:

Repeat: No Tiling

Position: Center Center

Size: Cover (Only if your image is not big enough to fill or you want to make sure it fills no matter the screen size)

Parallax: Enable

Parallax Ratio: Change to desired ratio

If you notice any jumpiness when scrolling, please set the Behavior to Fixed.  In fact, you may want to do this by default.

Step Six: Style the other wrappers and the text

Wrappers:  Instead of adding an image, you can also just add a background color like in the sample design

Text:  Make sure you select “Edit this instance” unless you want all text blocks throughout the site to be styled the same.

Step Seven:  Remove default margins and (optional) box shadows on wrappers

Go into the Design Tree and click on Structure and then select Wrapper.  Then click on the Styles tab and click the Trash icon next to each of the margin and (optional) box shadow settings.

parallax-wrapper-remove-1parallax-wrapper-remove-2

Step Eight: View live site and scroll!



Download the layout
(Note: this is a zip file. You will need to unzip to use the .json layout)

Learn how to separate your titles into a separate wrapper

Learn how to separate your titles into a separate wrapper

In this tutorial, you will learn how to create something like this and it is super easy to do with Headway and requires no code!   Step one: Create your 2 content blocks First things first, on the Single layout you will need two wrappers, each with a content block. You’ll notice that I’ve given each content… Continue Reading

Rename your Shared Layout

Rename your Shared Layout

A helpful feature you may have missed is the ability to renamed Shared Layouts.  Here’s how: Step One:  Edit the Shared Layout you want to rename Step 2: Go back into the layout selector Now you will see “Rename” next to the Shared Layout you are editing instead of “Edit”.   Step 3: Click Rename… Continue Reading

Intro to Headway version 3.8

Headway version 3.8 is available now. It is available as an auto-update (with a valid license key entered and activated in your Headway Options) or in your Members Dashboard.   As always, we recommend taking a full backup of your site before upgrading.  Duplicator plugin (free) and BackupBuddy (premium) both are highly recommended to handle your… Continue Reading

Introduction to qoerz Animations

A new community block, qoerz Animations, was recently added to Extend and offers 2 blocks for the price of one to allow you to easily animate text and images.   Animate text and images Simply choose your block type and then select your animation type. Choose between over 50 animation options Many options to choose from for all… Continue Reading

Introducing Architect: A content layout plugin and block for Headway

On April 1, 2015, Chris Howard’s (of PizazzWP) latest product was added to Headway Extend. Architect A content layout plugin and block for Headway.  Use it to create dynamic, content driven layouts like: Sliders Galleries Grids Tabular   Tabbed Both vertical and horizontal tabs! Masonries    Accordions And More! As Chris has stated in this blog… Continue Reading

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

Copyright © 2015 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress