Discover the best header websites created by professional designers. Get inspired and start planning your perfect header web design today!

I created a YouTube tutorial here (german): 
https://youtu.be/C1k6bm8ybBY

Nav Mega Dropdown

Navigation Mega Dropdown (+ custom animation)

Hi Everyone! Here is an Architecture Magazine layout I built in Webflow to showcase Grid 2.0 and Flexbox. 

The design is by Juraj Masar. Here is his Dribbble page: https://dribbble.com/masar_official

Here is the video tutorial on how I created this layout in Webflow: https://www.youtube.com/watch?v=Oc4HHJ--KHo

WebDev For You - Architecture Magazine Website

I created this effect to help someone out on the Webflow Discord, and I thought I'd make it cloneable in case anyone else wants to use it! I also decided to spice it up a little with some lovely animations from Lottieflow :)

The basic effect is achieved just by setting the header as fixed at a lower z-index than the (relative positioned) content below.

Overlapped Header Effect

You need help with fancy Webflow effects?

contact me:
hey@goalhunter.agency

show some love:
https://www.buymeacoffee.com/nettelbeck

Fancy Header

fancy-header

Welcome to daily interaction #100!

Thank you for checking out, cloning, or commenting on my daily interactions! They are really fun to do!

This demo showcases a parallax hero image on page scroll. There is more information as you scroll down as well :).

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #100

WebDev For You - Daily Interaction #100

Webflow implementation of https://codepen.io/tmrDevelops/pen/vOPZBv by https://twitter.com/tmrDevelops - slightly altered but essentially just dropped in an embed, beautiful stuff!

Colour

Colourful Bullerful

Hello All!

Here is a landing page from our shade project. Follow us to get 7 more landing pages in a couple of weeks.


================================

Relevant links:
   + Uiflow.co
   + https://shade.uxtheme.net/
   + https://twitter.com/moshfequrR
   + https://twitter.com/uiflow_co
   
===============================

Shade App Landing

(Clone-able) Shade App Landing

This demo showcases an animal conservation header in Webflow. It is for a video tutorial that I created on my YouTube Channel. 

This demo incorporates the following:

-An intro with a logo animation created in After Effects and added with Lottie
-A Slider
-Animated headings when the slides change
-A Lightbox link with the background color of the site
-Elements added with Grid and Flexbox

You can watch the video tutorial here:
https://www.youtube.com/watch?v=VFBVh9FqDdA

WebDev For You - Animal Conservation UI

FlowRocket

Experimenting with clipping text and then moving the text and updating the background as it moves with the mouse.

The issue: Clipped text that is moved by default does not get its background position updated if it is clipped. When moved the background stays the same based on the original position.

This solution uses Webflow text clip and some Javascript to update the clipped background image position when the mouse moves.

Also see this alternative with clipped text and instead of moving the text, the text stays still but the background updates.

https://webflow.com/website/Clipped-Text-with-Moving-background

Clipped Text Moving with Background

Moving text with clipped Background

Refresh your website footer with one of our 3 free website footers Webflow cloneable templates.

Clone it, copy it to your Webflow project, and that is all!

- - - - - - - - - -

Interested in this free Webflow Cloneable?

• Check out a live preview on: https://footers-cloneable-brixtemplates.webflow.io/

• Click 'Clone project' to get a clone on your Webflow account

• Get the cloneable Figma file to customize the styling and graphics: https://www.figma.com/community/file/1098310976643134956

- - - - - - - - - -

• BRIX Templates - Looking for more Webflow templates? Take a look at our collection of premium & free Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

36. Website Footers Webflow Cloneable Template - BRIX Templates

3 Website Footers Webflow Template | BRIX Templates

Hey this is a very nice Background animation with a really small file size 👌🏻

Github:
https://github.com/crnacura/AmbientCanvasBackgrounds
(I bundled the Js Files)

Change Background Color:
1) download the .txt fill
2) search for „backgroundColor“
3) change the hsla code
4) upload the new file
5) link the new script in the script tag

Pipeline Background Animation

Pipeline Animation

Linear.app site is beautifully designed. I created a similar hero header inspired by their careers page. It was done using only Webflow animations.

Sign up for the lesson: https://www.webflowtips.com/b/how-to-create-appearing-circles

If you have any questions feel free to comment.

P.S 🙂  🙌  - Like or follow if this was useful for you.

17 of 50

Webflowtips - Circles Appearing

Circles Appearing

Here you go. We have a new Landing page freebie for a CRM landing page.

The design credit goes to https://redq.io/.

Follow us for more landing pages in the next weeks.

CRM Software Landing

Its a nice interactive Header Animation :)


Source:
https://github.com/Jeremboo/animated-mesh-lines

Animated Mesh Lines

Experimenting with clipping text and then moving the Background when the mouse moves.

The effect is you can see the background move through the text with the mouse

Clipped Text with moving background

Clipped Text with Moving background

Refresh your website header with one of our 3 free website headers Webflow cloneable template.

Clone it, copy it to your Webflow project, and that is all!

- - - - - - - - - -

Interested in this free Webflow Cloneable?

• Check out a live preview on: https://headers-cloneable-brixtemplates.webflow.io/

• Click 'Clone project' to get a clone on your Webflow account

• Get the cloneable Figma file to customize the styling and graphics: https://www.figma.com/community/file/1098309435482703339

- - - - - - - - - -

• BRIX Templates - Looking for more Webflow templates? Take a look at our collection of premium & free Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

35. Website Headers Webflow Cloneable Template - BRIX Templates

3 Website Headers Webflow Template | BRIX Templates

Hey Webflow Friends 

Once again we have created a delicious header for you to clone.

We hope you like the effect.
We look forward to feedback, whether positive or negative ;-)

Do you need support with your project? Feel free to contact us, we are ready for you to help.

hey@goalhunter.agency

[Cloneable] Social Media Header

Hey! 👋

Here is a Header component clonable from an upcoming full website template. 

socials:
Instagram: instagram.com/tombuizer
Twitter: twitter.com/tombuizer
Webflow: https://webflow.com/tombuizer

tombuizer.nl

⦿ Images available under CC0 (Unsplash

Discover header websites built by the Webflow community

Discover header websites built by the Webflow community