Header Logo is a logo element for the Breakdance Header Builder. When the header becomes sticky, the logo can shrink to a smaller width or swap to a different image. The change is animated with a transition time you set.
Three mock websites, each with a real Header Logo element in its header. Scroll inside a frame, or press Show sticky state, and watch the logo shrink, swap to an icon or change from light to dark.
One logo image. Width: 220px, Sticky Width: 140px, Transition Time: 0.4s. Scroll inside the frame and the logo shrinks as the header sticks.
A Victorian mill turned into three family homes, with the original beams kept on show.
A timber garden studio with a sedum roof and one wall of glass.
A rear extension that doubles the kitchen and lets light into the whole ground floor.
Twelve flats on a narrow plot, each with its own balcony over the water.
Use Alternate Sticky Logo on. Logo: the full wordmark at 250px. Sticky Logo: the round icon at 46px, so the sticky bar stays slim.
Single origins and house blends, posted the day after roasting.
Chocolate, cherry and a long caramel finish. £9.50 for 250g.
Bright and floral with jasmine and lemon. £11.50 for 250g.
Sugar-cane processed, sweet and round. £10.00 for 250g.
Use Alternate Sticky Logo on. Logo: white version at 190px over the hero photo. Sticky Logo: dark version at 150px on the white sticky bar.
Mon to Fri, 7am. A 45-minute yoga class to start the day.
Tue and Thu, 6pm. Learn to climb with a coach, shoes included.
Sat, 9am. Barbell technique in small groups of six.
A short walkthrough of adding Header Logo to a sticky Breakdance header and choosing the sticky settings.
Set it up once in your header template.
In the Breakdance Header Builder, turn on the sticky header option.
Place Header Logo in the header, choose your logo image and set the link.
Set a smaller sticky width, or turn on Use Alternate Sticky Logo and pick a second image.
Two ways to change the logo, with a smooth transition.
Set a normal width and a sticky width. The logo resizes when the header sticks.
Show a different image in the sticky header, such as a smaller icon or a light version for a dark bar.
Set how long the width change takes, in seconds.
Choose the WordPress image size for each logo.
Add separate alt text for the default and sticky images.
Link the logo to your home page or any URL, and open it in a new tab if you like.
Any site with a sticky header.
Shrink a large logo so the sticky bar takes up less space.
Swap a full wordmark for a small icon once visitors scroll.
Use a white logo over a hero image and a dark one on a solid sticky bar.
Keep the logo small on phones when the header sticks.
Show a different version of the logo once the page scrolls.
Keep the logo visible but compact next to menu and cart icons.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Logo | The default logo image. | — |
| Image Size | WordPress size for the default logo. | Full |
| Alt (Default Image) | Alt text for the default logo. | — |
| Transition Time | How long the width change takes, in seconds. | 0.3 |
| Use Alternate Sticky Logo | Show a different image when the header is sticky. | Off |
| Sticky Logo | The image shown in the sticky header. | — |
| Sticky Image Size | WordPress size for the sticky logo. | Full |
| Alt (Sticky Image) | Alt text for the sticky logo. | — |
| Logo Link | Where the logo links to. With no link set it goes to your home page. | Home page |
| Open In New Tab | Open the link in a new tab. | Off |
| Design | ||
| Width | Width of the logo in the normal header. | 200px |
| Sticky Width | Width of the logo in the sticky header. | 100px |
It is made for the Breakdance Header Builder. It reacts when the header gets its sticky styles class (bde-header-builder--sticky-styles), so turn on the sticky option in your header. The demos above add that class with a few lines of script, because they sit inside the page rather than in a real header.
Yes. Leave Use Alternate Sticky Logo off and set a smaller Sticky Width. The same image shrinks when the header sticks.
Yes. Turn on Use Alternate Sticky Logo and choose a Sticky Logo. The default logo hides and the sticky one shows in its place.
Yes. Width and Sticky Width can be set for each breakpoint.
The sticky width and swap rules are written as shared CSS, so the last Header Logo on the page sets them for all. One header logo per page, as on a normal site, works as expected. For more than one, add a class to each and set the sticky widths with a little custom CSS, as the demos above do.
Header Logo is included with Phox Elements, along with 140+ other premium elements for Breakdance.