Designing your website’s header.

Designing your site header is an important step as it plays such a big role in how visitors navigate and interact with your content. It looks the same throughout your site and typically includes your navigation and title or logo display. It can also include social or shopping cart icons, or even a call-to-action button! 

With style options like Gradient, the ability to use a custom color for the background, adding borders and drop shadows, you can create a unique design that fits your brand and makes your website stand out. You can read more about styling options in our Building a site header guide.

How did you choose your header’s design? Have you played around with the new options? Share the results and your experiences in the comments below!

Hi - I love these new options and I would like to use the gradient on a new site I am building. However I'd like to increase the depth of the gradient. There doesn't seem to be a tweak for this so can anyone suggest some code for me? thanks so much 🙂

Hi, I would like to try those new options. Unfortunately I am in version 7.0. Is there a way to upgrade to version 7.1 without changing all the design settings?

6 hours ago, Sabine said:

Hi, I would like to try those new options. Unfortunately I am in version 7.0. Is there a way to upgrade to version 7.1 without changing all the design settings?

No there is not, no built in migration path from a 7.0 template to 7.1 which is actually only 1 template with different named design starting points. However it may be possible to style your header using custom css if your template does not have a built in style tweak for the effect you want to have, such as a gradient header. 

Hi, I am having issues with editing my website header. It allows me to edit it with no error messages but when I click save it reverts back to the same header layout. Does anyone else have this issue or know a solution? 

The new art backgrounds on 7.1 inspired me to throw some pops of color to my website. Trying out all the new header options, the gradient made the most sense. 

It's now off-white gradient with a lot of blur, and extra drop shadow; using the built-in drop shadow along with a ghost plugins header drop shadow combined. I really like the look, and it fits well with any color theme I throw on the page!

https://www.pocketwriter.biz/ 

On 4/28/2022 at 12:45 AM, RyanCaldarone said:

The new art backgrounds on 7.1 inspired me to throw some pops of color to my website. Trying out all the new header options, the gradient made the most sense. 

It's now off-white gradient with a lot of blur, and extra drop shadow; using the built-in drop shadow along with a ghost plugins header drop shadow combined. I really like the look, and it fits well with any color theme I throw on the page!

 

https://www.pocketwriter.biz/ 

Good afternoon, since I started studying design a long time ago, I ran into a lot of questions along the way and choosing the right color scheme for me was most often one of the most difficult. I see your work is done very well, I really like it, I can only tell you to try to take different color schemes on https://create.vista.com/colors/palettes/vintage-color-palette/ and try to do it with their help, I think it should turn out super, there is a huge choice, you will definitely find the right option for yourself.

13 minutes ago, Artimithe said:

Good afternoon, since I started studying design a long time ago, I ran into a lot of questions along the way and choosing the right color scheme for me was most often one of the most difficult. I see your work is done very well, I really like it, I can only tell you to try to take different color schemes on https://create.vista.com/colors/palettes/vintage-color-palette/ and try to do it with their help, I think it should turn out super, there is a huge choice, you will definitely find the right option for yourself.

Thanks for the link! I LOVE resources like that. There’s a couple of Instagram accounts I follow that pair color patterns that are most often used for different mediums and styles.

I’m colorblind, so color pairings don’t always look the same to me as they do others. So I typically rely 100% on technical resources like those.

In my latest redesign, I’ve gotten most of all the elements to play nicely over any color combos so I can switch often to try things out :-)

Hi, I would like to modify the header text (links to my website pages). At the moment are not so much evident and I would like to make them bold or similar (because with the gradient the result is quite a mess).

In addition I am wondering if is it possible to change the position of the links and instead of having them on the side move them below the logo. I attached the "as is" and the "to be" situation.

Thank you in advance for helping me somehow

🙂

And sorry for my English

On 12/21/2021 at 3:59 AM, Sabine said:

Hi, I would like to try those new options. Unfortunately I am in version 7.0. Is there a way to upgrade to version 7.1 without changing all the design settings?

Unfortunately no. You're basically designing your site from scratch in 7.1

On 10/15/2022 at 2:51 AM, genakia said:

 My current version is 7.0. Am I able to upgrade to version 7.1 without having to modify all the design settings?
 

There is no built in design path from 7.0 to 7.1. You would basically start a 7.1 site from scratch. You can however use copy and paste for text, which can help "move" blog posts and text blocks. 

On 12/15/2021 at 11:06 PM, Jo_SQSP said:

Designing your site header is an important step as it plays such a big role in how visitors navigate and interact with your content. It looks the same throughout your site and typically includes your navigation and title or logo display. It can also include social or shopping cart icons, or even a call-to-action button! 

With style options like Gradient, the ability to use a custom color for the background, adding borders and drop shadows, you can create a unique design that fits your brand and makes your website stand out. You can read more about styling options in our Building a site header guide.

How did you choose your header’s design? Have you played around with the new options? Share the results and your experiences in the comments below!

 

Well, as for me, new version is very fun, and most importantly it became more intuitive and easy, thanks to new options!

One of the most seen items on mobile header is your hamburger icon, so you may find this interesting:

hamburgers icon animation

This snippet is free to use and contains 31 animations for your icon, there is a live editor where you can try all the animations before adding to your site!