Contact us
Submit TicketLive ChatReport Abuse
Your Cart
Subtotal
$0.00
View Cart
$USD
$ U.S. Dollar€ Euro£ British PoundC$ Canadian DollarsA$ Australian DollarsRs Indian Rupees¥ China Yuan RMBMore Info
 
{"/api/v1/guruguides-api/post/read:\"{\\\"slug\\\":\\\"website-header-basics\\\"}\"":{"body":{"title":"Website header: Learn the basics and why it matters","slug":"website-header-basics","publicationDate":"April 06, 2026","postInfo":{"readTime":8},"excerpt":"Reel in new customers by making a great first impression with a well-designed header for your business website.","hero":{"title":"01 – Website Headers hero","alt":"","caption":"","description":"","sizes":[{"name":"full","url":"https://guru-guides.production.cloudplatform.tech/wp-content/uploads/2021/12/01-Website-Headers-hero.svg","width":1,"height":1}]},"heroMobile":{"title":"02 – Website Headers mobile","alt":"","caption":"","description":"","sizes":[{"name":"full","url":"https://guru-guides.production.cloudplatform.tech/wp-content/uploads/2021/12/02-Website-Headers-mobile.svg","width":1,"height":1}]},"categories":[{"slug":"web-design","title":"Web Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"authors":[{"fullName":"Nick A.","slug":"nickallen","firstName":"Nick","lastName":"Allen","bio":"Nick Allen is a writer, photographer, and content marketer. He’s also the founder of BrainBoost Media, a boutique content and operations studio. With a wide range of interests, he enjoys reading and writing about sports, entrepreneurship, and start-ups.","avatar":"https://secure.gravatar.com/avatar/6f287a9028fb459865bd89420e769685?s=132&d=mm&r=g"}],"related":{"title":"Web Design & Branding","slug":"web-design-branding","subtitle":"Get creative with our expert design and branding guides","description":"From voice to visuals, here’s how to create branding that everyone will recognize.","humanizeTitle":"For standing out online","posts":[{"title":"FAQ design: What is it, why you need it, and 15 great examples","slug":"faq-design","publicationMonth":"May 2026","postInfo":{"readTime":12},"excerpt":"Make important information easy for customers to find and build trust with your audience by creating a detailed FAQ page on your website.","cardImage":{"title":"2022_GURU_57 – FAQ design What is it, why you need it, and 15 great examples_Thumbnail – 288×310 – CC#E4D8FF","alt":"","caption":"","description":"","sizes":[{"name":"placeholder","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/2022_GURU_57-FAQ-design-What-is-it-why-you-need-it-and-15-great-examples_Thumbnail-288x310-CCE4D8FF.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/2022_GURU_57-FAQ-design-What-is-it-why-you-need-it-and-15-great-examples_Thumbnail-288x310-CCE4D8FF.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/2022_GURU_57-FAQ-design-What-is-it-why-you-need-it-and-15-great-examples_Thumbnail-288x310-CCE4D8FF.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/2022_GURU_57-FAQ-design-What-is-it-why-you-need-it-and-15-great-examples_Thumbnail-288x310-CCE4D8FF.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/2022_GURU_57-FAQ-design-What-is-it-why-you-need-it-and-15-great-examples_Thumbnail-288x310-CCE4D8FF.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/2022_GURU_57-FAQ-design-What-is-it-why-you-need-it-and-15-great-examples_Thumbnail-288x310-CCE4D8FF.svg","width":1,"height":1}]},"categories":[{"slug":"web-design","title":"Web Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"How to start a food blog: 11 steps for quality content","slug":"how-to-start-a-food-blog","publicationMonth":"May 2026","postInfo":{"readTime":11},"excerpt":"Share your love of all things food with the world using these tips for choosing a food blog niche and publishing quality content.","cardImage":{"title":"How to start a food blog- 11 steps for quality content","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/How-to-start-a-food-blog-11-steps-for-quality-content.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/How-to-start-a-food-blog-11-steps-for-quality-content.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/How-to-start-a-food-blog-11-steps-for-quality-content.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/How-to-start-a-food-blog-11-steps-for-quality-content.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/How-to-start-a-food-blog-11-steps-for-quality-content.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/How-to-start-a-food-blog-11-steps-for-quality-content.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/How-to-start-a-food-blog-11-steps-for-quality-content.svg","width":1,"height":1}]},"categories":[{"slug":"getting-started-online","title":"Getting Started Online","type":"category"},{"slug":"getting-started","title":"Starting a Business","parentSlug":"getting-started-online","type":"category"},{"slug":"web-design","title":"Web Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"How to find logo design inspiration for your brand","slug":"find-logo-design-inspiration","publicationMonth":"May 2026","postInfo":{"readTime":9},"excerpt":"Discover great ideas for a new logo by compiling details about your brand, learning some design basics, and finding inspiration online.","cardImage":{"title":"03 – How to Find Logo Design Inspiration for Your Brand create images_Article Image","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-How-to-Find-Logo-Design-Inspiration-for-Your-Brand-create-images_Article-Image.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-How-to-Find-Logo-Design-Inspiration-for-Your-Brand-create-images_Article-Image.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-How-to-Find-Logo-Design-Inspiration-for-Your-Brand-create-images_Article-Image.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-How-to-Find-Logo-Design-Inspiration-for-Your-Brand-create-images_Article-Image.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-How-to-Find-Logo-Design-Inspiration-for-Your-Brand-create-images_Article-Image.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-How-to-Find-Logo-Design-Inspiration-for-Your-Brand-create-images_Article-Image.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-How-to-Find-Logo-Design-Inspiration-for-Your-Brand-create-images_Article-Image.svg","width":1,"height":1}]},"categories":[{"slug":"logo-design","title":"Logo Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"How to trademark a logo","slug":"how-to-trademark-a-logo","publicationMonth":"May 2026","postInfo":{"readTime":9},"excerpt":"Guide of what is logo trademark, why trademarking a logo is important and what's the difference between logo trademarks and copyrights?","cardImage":{"title":"How to trademark a logo","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/06/How-to-trademark-a-logo.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/06/How-to-trademark-a-logo.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/06/How-to-trademark-a-logo.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/06/How-to-trademark-a-logo.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/06/How-to-trademark-a-logo.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/06/How-to-trademark-a-logo.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/06/How-to-trademark-a-logo.svg","width":1,"height":1}]},"categories":[{"slug":"logo-design","title":"Logo Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"Resume website: What these sites need, and 17 inspiring examples","slug":"resume-website-examples","publicationMonth":"May 2026","postInfo":{"readTime":12},"excerpt":"Resume websites let you showcase your skills in a whole new light. Find out how to create one and check out examples for inspiration.","cardImage":{"title":"The 10 best portfolio websites to showcase your best work","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/11/The-10-best-portfolio-websites-to-showcase-your-best-work.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/11/The-10-best-portfolio-websites-to-showcase-your-best-work.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/11/The-10-best-portfolio-websites-to-showcase-your-best-work.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/11/The-10-best-portfolio-websites-to-showcase-your-best-work.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/11/The-10-best-portfolio-websites-to-showcase-your-best-work.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/11/The-10-best-portfolio-websites-to-showcase-your-best-work.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/11/The-10-best-portfolio-websites-to-showcase-your-best-work.svg","width":1,"height":1}]},"categories":[{"slug":"website-bulding","title":"Building a Website","parentSlug":"getting-started-online","type":"category"},{"slug":"getting-started-online","title":"Getting Started Online","type":"category"},{"slug":"web-design","title":"Web Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"11 best event website designs: What makes them great","slug":"event-website-design","publicationMonth":"May 2026","postInfo":{"readTime":11},"excerpt":"Get ready for your next event with a showstopping website that features everything your visitors need to know before they buy tickets.","cardImage":{"title":"11 best event website designs- What makes them great","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/12/11-best-event-website-designs-What-makes-them-great.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/12/11-best-event-website-designs-What-makes-them-great.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/12/11-best-event-website-designs-What-makes-them-great.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/12/11-best-event-website-designs-What-makes-them-great.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/12/11-best-event-website-designs-What-makes-them-great.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/12/11-best-event-website-designs-What-makes-them-great.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2022/12/11-best-event-website-designs-What-makes-them-great.svg","width":1,"height":1}]},"categories":[{"slug":"web-design","title":"Web Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"What is a microsite? Learn what they are and how to use them","slug":"what-is-a-microsite","publicationMonth":"May 2026","postInfo":{"readTime":10},"excerpt":"Discover how to use microsites to create a dedicated place where you can share important details about your brand, products, or services.","cardImage":{"title":"What is a microsite? Learn what they are and how to use them","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/What-is-a-microsite-Learn-what-they-are-and-how-to-use-them.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/What-is-a-microsite-Learn-what-they-are-and-how-to-use-them.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/What-is-a-microsite-Learn-what-they-are-and-how-to-use-them.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/What-is-a-microsite-Learn-what-they-are-and-how-to-use-them.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/What-is-a-microsite-Learn-what-they-are-and-how-to-use-them.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/What-is-a-microsite-Learn-what-they-are-and-how-to-use-them.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/01/Cnw5bHIO-What-is-a-microsite-Learn-what-they-are-and-how-to-use-them.svg","width":1,"height":1}]},"categories":[{"slug":"website-bulding","title":"Building a Website","parentSlug":"getting-started-online","type":"category"},{"slug":"getting-started-online","title":"Getting Started Online","type":"category"},{"slug":"web-design","title":"Web Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"How to make a logo: The simple steps you need","slug":"how-to-make-a-logo","publicationMonth":"May 2026","postInfo":{"readTime":12},"excerpt":"Read the simple steps you need to make an attractive logo for you or your business.","cardImage":{"title":"simple steps to make logo","alt":"simple steps to make a logo","caption":"","description":"","sizes":[{"name":"full","url":"https://guru-guides.production.cloudplatform.tech/wp-content/uploads/2021/04/Hero_1252x310_px_How_to_make_a_logo.svg","width":1,"height":1}]},"categories":[{"slug":"logo-design","title":"Logo Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"Personal logo design: Tips for building your brand","slug":"personal-logo-graphic-design","publicationMonth":"May 2026","postInfo":{"readTime":11},"excerpt":"Define your personal brand with a unique logo. Learn about the design process for creating a personal logo for resumes, hobbies, and more.","cardImage":{"title":"03 – Personal logo design Tips for building your brand_Article Image – artboard","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-Personal-logo-design-Tips-for-building-your-brand_Article-Image-artboard.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-Personal-logo-design-Tips-for-building-your-brand_Article-Image-artboard.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-Personal-logo-design-Tips-for-building-your-brand_Article-Image-artboard.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-Personal-logo-design-Tips-for-building-your-brand_Article-Image-artboard.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-Personal-logo-design-Tips-for-building-your-brand_Article-Image-artboard.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-Personal-logo-design-Tips-for-building-your-brand_Article-Image-artboard.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/07/03-Personal-logo-design-Tips-for-building-your-brand_Article-Image-artboard.svg","width":1,"height":1}]},"categories":[{"slug":"logo-design","title":"Logo Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"How to find the best color combination for your logo design","slug":"color-combination-for-logo","publicationMonth":"May 2026","postInfo":{"readTime":12},"excerpt":"Pick the perfect colors for your logo with this guide featuring tips and tricks based on color psychology as well as real-world examples.","cardImage":{"title":"03 – How To Find The Best Color Combination For Your Logo Design copy_Article Image – artboard","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/08/03-How-To-Find-The-Best-Color-Combination-For-Your-Logo-Design-copy_Article-Image-artboard.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/08/03-How-To-Find-The-Best-Color-Combination-For-Your-Logo-Design-copy_Article-Image-artboard.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/08/03-How-To-Find-The-Best-Color-Combination-For-Your-Logo-Design-copy_Article-Image-artboard.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/08/03-How-To-Find-The-Best-Color-Combination-For-Your-Logo-Design-copy_Article-Image-artboard.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/08/03-How-To-Find-The-Best-Color-Combination-For-Your-Logo-Design-copy_Article-Image-artboard.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/08/03-How-To-Find-The-Best-Color-Combination-For-Your-Logo-Design-copy_Article-Image-artboard.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/08/03-How-To-Find-The-Best-Color-Combination-For-Your-Logo-Design-copy_Article-Image-artboard.svg","width":1,"height":1}]},"categories":[{"slug":"logo-design","title":"Logo Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"How to start a fashion blog: Define your niche, then follow these 8 steps","slug":"how-to-start-a-fashion-blog","publicationMonth":"May 2026","postInfo":{"readTime":10},"excerpt":"Put your style in the spotlight with a fashion blog. Get inspiration for your blog niche and learn how to get your site up and running.","cardImage":{"title":"03 – Hero Thumbnail Colour code #A483FF Retail branding – How can it improve your e-commerce business_-05","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/03-Hero-Thumbnail-Colour-code-A483FF-Retail-branding-How-can-it-improve-your-e-commerce-business_-05.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/03-Hero-Thumbnail-Colour-code-A483FF-Retail-branding-How-can-it-improve-your-e-commerce-business_-05.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/03-Hero-Thumbnail-Colour-code-A483FF-Retail-branding-How-can-it-improve-your-e-commerce-business_-05.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/03-Hero-Thumbnail-Colour-code-A483FF-Retail-branding-How-can-it-improve-your-e-commerce-business_-05.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/03-Hero-Thumbnail-Colour-code-A483FF-Retail-branding-How-can-it-improve-your-e-commerce-business_-05.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/03-Hero-Thumbnail-Colour-code-A483FF-Retail-branding-How-can-it-improve-your-e-commerce-business_-05.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2023/03/03-Hero-Thumbnail-Colour-code-A483FF-Retail-branding-How-can-it-improve-your-e-commerce-business_-05.svg","width":1,"height":1}]},"categories":[{"slug":"getting-started-online","title":"Getting Started Online","type":"category"},{"slug":"getting-started","title":"Starting a Business","parentSlug":"getting-started-online","type":"category"},{"slug":"web-design","title":"Web Design","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"},{"title":"13 best cool fonts for websites","slug":"best-fonts-for-websites","publicationMonth":"May 2026","postInfo":{"readTime":12},"excerpt":"Give your online home a fresh look with the best cool fonts for websites. Discover free fonts in a range of unique and modern styles.","cardImage":{"title":"03 – Article image","alt":"","caption":"","description":"","sizes":[{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2024/01/03-Article-image.svg","width":1,"height":1},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2024/01/03-Article-image.svg","width":1,"height":1},{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2024/01/03-Article-image.svg","width":150,"height":150},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2024/01/03-Article-image.svg","width":300,"height":300},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2024/01/03-Article-image.svg","width":768,"height":1},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2024/01/03-Article-image.svg","width":1024,"height":1024},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2024/01/03-Article-image.svg","width":1,"height":1}]},"categories":[{"slug":"general-branding","title":"General Branding","parentSlug":"web-design-branding","type":"category"},{"slug":"web-design-branding","title":"Web Design & Branding","type":"category"}],"type":"guide"}]},"type":"guide","seo":{"title":"Website Headers: Their Importance for Your Site | Namecheap","canonical":"https://www.namecheap.com/guru-guides/website-header-basics/","breadcrumbs":[{"text":"Guru Guides","url":"/"},{"text":"Web Design & Branding","url":"/category/web-design-branding/"},{"text":"Website header: Learn the basics and why it matters","url":"/website-header-basics/"}],"schema":{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://www.namecheap.com/guru-guides/website-header-basics/","url":"https://www.namecheap.com/guru-guides/website-header-basics/","name":"Website Headers: Their Importance for Your Site | Namecheap","isPartOf":{"@id":"https://www.namecheap.com/guru-guides/#website"},"primaryImageOfPage":{"@id":"https://www.namecheap.com/guru-guides/website-header-basics/#primaryimage"},"image":{"@id":"https://www.namecheap.com/guru-guides/website-header-basics/#primaryimage"},"thumbnailUrl":"https://guru-guides.production.cloudplatform.tech/wp-content/uploads/2021/12/01-Website-Headers-hero.svg","datePublished":"2026-04-06T10:50:21+00:00","dateModified":"2026-04-09T11:06:42+00:00","author":{"@id":"https://www.namecheap.com/guru-guides/#/schema/person/4cdfbf12496d5683e81c7d7ae14c0ea6"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.namecheap.com/guru-guides/website-header-basics/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.namecheap.com/guru-guides/website-header-basics/#primaryimage","url":"https://guru-guides.production.cloudplatform.tech/wp-content/uploads/2021/12/01-Website-Headers-hero.svg","contentUrl":"https://guru-guides.production.cloudplatform.tech/wp-content/uploads/2021/12/01-Website-Headers-hero.svg"},{"@type":"WebSite","@id":"https://www.namecheap.com/guru-guides/#website","url":"https://www.namecheap.com/guru-guides/","name":"Guru Guides - Namecheap","description":"Just another Namecheap site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.namecheap.com/guru-guides/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https://www.namecheap.com/guru-guides/#/schema/person/4cdfbf12496d5683e81c7d7ae14c0ea6","name":"Nick Allen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.namecheap.com/guru-guides/#/schema/person/image/2f9aa86bc1616ddda77c15f2467b7cd2","url":"https://secure.gravatar.com/avatar/6f287a9028fb459865bd89420e769685?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/6f287a9028fb459865bd89420e769685?s=96&d=mm&r=g","caption":"Nick Allen"},"description":"Nick Allen is a writer, photographer, and content marketer. He’s also the founder of BrainBoost Media, a boutique content and operations studio. With a wide range of interests, he enjoys reading and writing about sports, entrepreneurship, and start-ups.","url":"https://www.namecheap.com/guru-guides/author/nickallen/"}]},"meta":{"description":{"content":"","name":"description"},"siteName":{"content":"Guru Guides - Namecheap","name":"site_name"},"siteUrl":{"content":"https://www.namecheap.com/guru-guides/","name":"site_url"},"metaDescription":{"content":"","name":"meta_description"},"robots":{"content":"index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1","name":"robots"},"ogDescription":{"content":"Reel in new customers by making a great first impression with a well-designed header for your business website.","attributes":{"property":"og:description"}},"ogEnabled":{"content":"1","attributes":{"property":"og:enabled"}},"ogArticleModifiedTime":{"content":"2026-04-09T11:06:42+00:00","attributes":{"property":"og:article:modified_time"}},"ogArticlePublishedTime":{"content":"2026-04-06T10:50:21+00:00","attributes":{"property":"og:article:published_time"}},"ogImages":{"content":"5001,2626,https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-Website-Headers-facebook.png,https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-Website-Headers-facebook.png,full,5138,,13132626,image/png","attributes":{"property":"og:image"}},"ogSiteName":{"content":"Guru Guides - Namecheap","attributes":{"property":"og:site_name"}},"ogTitle":{"content":"Website Headers: Their Importance for Your Site | Namecheap","attributes":{"property":"og:title"}},"ogType":{"content":"article","attributes":{"property":"og:type"}},"ogUrl":{"content":"https://www.namecheap.com/guru-guides/website-header-basics/","attributes":{"property":"og:url"}},"twitterTitle":{"content":"Website Headers: Their Importance for Your Site | Namecheap","name":"twitter:title"},"twitterDescription":{"content":"Reel in new customers by making a great first impression with a well-designed header for your business website.","name":"twitter:description"},"twitterImage":{"content":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02-Website-Headers-Twitter.png","name":"twitter:image"},"twitterCreator":{"content":"","name":"twitter:creator"},"twitterSite":{"content":"","name":"twitter:site"},"twitterCard":{"content":"summary_large_image","name":"twitter:card"}}},"faqs":[{"question":"What is a sticky header on a website?","answer":"\u003cp>A \u003ca href=\"https://www.namecheap.com/blog/wordpress-menus/\">sticky header on a website\u003c/a> is a style of header that remains fixed at the top of the page as you scroll down. This can make it easier for site visitors to find what they need because they don’t have to scroll all the way back up to the top to navigate to a new page. \u003c/p>"},{"question":"What should I know about website header design?","answer":"\u003cp>It’s important to know that website header design affects the user experience (UX) on a site. It plays an essential role in navigation, which helps visitors find the information they need, and can include a call to action that turns visitors into customers. It also provides a place to showcase your branding.\u003c/p>"},{"question":"What size is a website header?","answer":"\u003cp>The size of a website header varies depending on the website’s design and what device it’s being viewed on. The header should stretch the full width of the screen. The height can vary to accommodate text, buttons, and logos, and may fluctuate if drop-down menus are included.\u003c/p>"},{"question":"How do I edit a website header in WordPress?","answer":"\u003cp>\u003ca href=\"https://www.namecheap.com/blog/wordpress-menus/\">To edit a website header in WordPress\u003c/a>, navigate to your dashboard and click on Appearance > Editor. Then, click on Patterns > Template Parts > Header and make any edits as needed.\u003c/p>"},{"question":"What makes a good website header?","answer":"\u003cp>A good website header has the following features:\u003c/p>\r\n\u003cul>\r\n\u003cli>A clear, easy-to-read font and simple section headers\u003c/li>\r\n\u003cli>A color palette that aligns with your branding and helps with readability\u003c/li>\r\n\u003cli>Drop-down menus that assist with navigation\u003c/li>\r\n\u003cli>A mobile-friendly design\u003c/li>\r\n\u003c/ul>"}],"content":[{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>\u003ca href=\"https://www.namecheap.com/visual/site-maker/\" target=\"_blank\" rel=\"noreferrer noopener\">You have just a few seconds\u003c/a> to impress a potential customer that visits your website, so what they see first is an important way to bring them into the fold. That’s where your website header comes into play. This prime real estate, the first thing a customer sees when they come to your website, should capture your visitor’s eye and entice them to keep reading while delivering key information. Whether you know how to code or if you use Namecheap’s \u003ca href=\"https://www.namecheap.com/visual/site-maker/\" target=\"_blank\" rel=\"noreferrer noopener\">free website builder\u003c/a>, creating an enticing header is among the most important aspects of web design. Here’s what you need to know as you get started.\u003c/p>\n","innerContent":["\n\u003cp>\u003ca href=\"https://www.namecheap.com/visual/site-maker/\" target=\"_blank\" rel=\"noreferrer noopener\">You have just a few seconds\u003c/a> to impress a potential customer that visits your website, so what they see first is an important way to bring them into the fold. That’s where your website header comes into play. This prime real estate, the first thing a customer sees when they come to your website, should capture your visitor’s eye and entice them to keep reading while delivering key information. Whether you know how to code or if you use Namecheap’s \u003ca href=\"https://www.namecheap.com/visual/site-maker/\" target=\"_blank\" rel=\"noreferrer noopener\">free website builder\u003c/a>, creating an enticing header is among the most important aspects of web design. Here’s what you need to know as you get started.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"label":"What is a website header?","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch2 class=\"wp-block-heading\" id=\"what-is-a-website-header\">What is a website header?\u003c/h2>\n","innerContent":["\n\u003ch2 class=\"wp-block-heading\" id=\"what-is-a-website-header\">What is a website header?\u003c/h2>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>At its most basic, a website header is the top section of a website that your customers see first when they visit your site. When talking about a header, you can be referring to the navigation bar that contains your logo and your website menu, the first “section” of the page that appears when your website loads, or both together. Either way, the website header emphasizes the most important elements of your site while setting the tone for the look and feel of your site as a whole.\u003c/p>\n","innerContent":["\n\u003cp>At its most basic, a website header is the top section of a website that your customers see first when they visit your site. When talking about a header, you can be referring to the navigation bar that contains your logo and your website menu, the first “section” of the page that appears when your website loads, or both together. Either way, the website header emphasizes the most important elements of your site while setting the tone for the look and feel of your site as a whole.\u003c/p>\n"]},{"blockName":"core/image","attrs":{"caption":"Photo by \u003ca href=\"https://unsplash.com/@igormiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Igor Miske\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Unsplash\u003c/a>","id":5128,"sizeSlug":"full","linkDestination":"none","align":"center","title":"06","description":"","alt":"grey macbook","sizes":[{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06-320x216.png","width":320,"height":216},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06-600x406.png","width":600,"height":406},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06.png","width":670,"height":453},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06.png","width":670,"height":453},{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06.png","width":670,"height":453},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06.png","width":670,"height":453},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06.png","width":670,"height":453}]},"innerBlocks":[],"innerHTML":"\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06.png\" alt=\"grey macbook \" class=\"wp-image-5128\"/>\u003cfigcaption class=\"wp-element-caption\">Photo by \u003ca href=\"https://unsplash.com/@igormiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Igor Miske\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Unsplash\u003c/a>\u003c/figcaption>\u003c/figure>\n","innerContent":["\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/06.png\" alt=\"grey macbook \" class=\"wp-image-5128\"/>\u003cfigcaption class=\"wp-element-caption\">Photo by \u003ca href=\"https://unsplash.com/@igormiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Igor Miske\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Unsplash\u003c/a>\u003c/figcaption>\u003c/figure>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>What you put in the header depends on your business. If you’re selling a product online, you may want to use the website header space to showcase your newest products and quickly encourage people to buy. For example, the home page of a furniture store may feature a well-designed room in that first section of the site to showcase its wares along with a call to action to buy something. Those who sell services may use the website header to capture their audience with good copy and a complementary image that entices them to learn more or act.\u003c/p>\n","innerContent":["\n\u003cp>What you put in the header depends on your business. If you’re selling a product online, you may want to use the website header space to showcase your newest products and quickly encourage people to buy. For example, the home page of a furniture store may feature a well-designed room in that first section of the site to showcase its wares along with a call to action to buy something. Those who sell services may use the website header to capture their audience with good copy and a complementary image that entices them to learn more or act.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"label":"Why is a website header important for a website?","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch2 class=\"wp-block-heading\" id=\"why-is-a-website-header-important-for-a-website\">Why is a website header important for a website?\u003c/h2>\n","innerContent":["\n\u003ch2 class=\"wp-block-heading\" id=\"why-is-a-website-header-important-for-a-website\">Why is a website header important for a website?\u003c/h2>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>Good web design means that your website is functional \u003cem>and\u003c/em> aesthetically pleasing. Though there are many schools of thought when it comes to website design, headers are almost always considered the keystone that ties a site together. Here are some additional reasons why your website’s header is an important part of the design.\u003c/p>\n","innerContent":["\n\u003cp>Good web design means that your website is functional \u003cem>and\u003c/em> aesthetically pleasing. Though there are many schools of thought when it comes to website design, headers are almost always considered the keystone that ties a site together. Here are some additional reasons why your website’s header is an important part of the design.\u003c/p>\n"]},{"blockName":"core/list","attrs":{"className":"gb-list"},"innerBlocks":[{"blockName":"core/list-item","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cli>\u003cstrong>It displays key information about the site.\u003c/strong> Important information like navigation links, your company branding, or copy about your company quickly delivers the information that may entice someone to stay on your site.\u003c/li>\n","innerContent":["\n\u003cli>\u003cstrong>It displays key information about the site.\u003c/strong> Important information like navigation links, your company branding, or copy about your company quickly delivers the information that may entice someone to stay on your site.\u003c/li>\n"]},{"blockName":"core/list-item","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cli>\u003cstrong>Headers showcase your branding.\u003c/strong> The navigation bar will appear on every page of your site, while that first section underneath it will likely change depending on the page’s purpose. The consistent navigation bar is the perfect place to put your logo (and your tagline, if you have one) as this will further reinforce your branding. A good \u003ca href=\"https://www.namecheap.com/logo-maker/\" target=\"_blank\" rel=\"noreferrer noopener\">logo creator\u003c/a> can help you design a logo that makes your header even more memorable.\u003c/li>\n","innerContent":["\n\u003cli>\u003cstrong>Headers showcase your branding.\u003c/strong> The navigation bar will appear on every page of your site, while that first section underneath it will likely change depending on the page’s purpose. The consistent navigation bar is the perfect place to put your logo (and your tagline, if you have one) as this will further reinforce your branding. A good \u003ca href=\"https://www.namecheap.com/logo-maker/\" target=\"_blank\" rel=\"noreferrer noopener\">logo creator\u003c/a> can help you design a logo that makes your header even more memorable.\u003c/li>\n"]},{"blockName":"core/list-item","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cli>\u003cstrong>It drives people to action.\u003c/strong> You’ll want website visitors to do something when they visit your site, whether it’s to download a demo of your software, make a purchase, or share the article they’re reading. Having a call to action on your header, such as “sign up” or “download free demo,” reminds the user to engage with the content you’re dishing out.\u003c/li>\n","innerContent":["\n\u003cli>\u003cstrong>It drives people to action.\u003c/strong> You’ll want website visitors to do something when they visit your site, whether it’s to download a demo of your software, make a purchase, or share the article they’re reading. Having a call to action on your header, such as “sign up” or “download free demo,” reminds the user to engage with the content you’re dishing out.\u003c/li>\n"]}],"innerHTML":"\n\u003cul class=\"gb-list\">\n\n\n\n\u003c/ul>\n","innerContent":["\n\u003cul class=\"gb-list\">",null,"\n\n",null,"\n\n",null,"\u003c/ul>\n"]},{"blockName":"core/heading","attrs":{"label":"5 tips for creating a good website header","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch2 class=\"wp-block-heading\" id=\"n-5-tips-for-creating-a-good-website-header\">5 tips for creating a good website header\u003c/h2>\n","innerContent":["\n\u003ch2 class=\"wp-block-heading\" id=\"n-5-tips-for-creating-a-good-website-header\">5 tips for creating a good website header\u003c/h2>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>As you sift through your choices and select the designs that work best for your website, keep these five tips for your navigation bar and main header image in mind\u003c/p>\n","innerContent":["\n\u003cp>As you sift through your choices and select the designs that work best for your website, keep these five tips for your navigation bar and main header image in mind\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"1. Use fonts and colors strategically to improve readability","parent":"50511d6a-1268-4920-8e04-0de126bed02a","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"n-1-use-fonts-and-colors-strategically-to-improve-readability\">1. Use fonts and colors strategically to improve readability\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"n-1-use-fonts-and-colors-strategically-to-improve-readability\">1. Use fonts and colors strategically to improve readability\u003c/h3>\n"]},{"blockName":"core/image","attrs":{"caption":" Photo by \u003ca href=\"https://unsplash.com/@benkolde?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Ben Kolde\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> ","id":5129,"sizeSlug":"full","linkDestination":"none","align":"center","title":"01-1","description":"","alt":"black and white website header","sizes":[{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1-320x216.png","width":320,"height":216},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1-600x406.png","width":600,"height":406},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1.png","width":670,"height":453},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1.png","width":670,"height":453},{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1.png","width":670,"height":453},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1.png","width":670,"height":453},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1.png","width":670,"height":453}]},"innerBlocks":[],"innerHTML":"\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1.png\" alt=\"black and white website header\" class=\"wp-image-5129\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://unsplash.com/@benkolde?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Ben Kolde\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> \u003c/figcaption>\u003c/figure>\n","innerContent":["\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/01-1.png\" alt=\"black and white website header\" class=\"wp-image-5129\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://unsplash.com/@benkolde?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Ben Kolde\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> \u003c/figcaption>\u003c/figure>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>Your website is an extension of your brand, so it naturally makes sense to use your brand fonts and \u003ca href=\"https://www.namecheap.com/business-cards/choose-brand-colors/\" target=\"_blank\" rel=\"noreferrer noopener\">colors as part of the design\u003c/a>. While you make your selections, double-check that the text is easy to read while staying true to your brand. Consider using darker font colors against lighter colors in your color palette to ensure that visitors can see your content without issue.\u003c/p>\n","innerContent":["\n\u003cp>Your website is an extension of your brand, so it naturally makes sense to use your brand fonts and \u003ca href=\"https://www.namecheap.com/business-cards/choose-brand-colors/\" target=\"_blank\" rel=\"noreferrer noopener\">colors as part of the design\u003c/a>. While you make your selections, double-check that the text is easy to read while staying true to your brand. Consider using darker font colors against lighter colors in your color palette to ensure that visitors can see your content without issue.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"2. Keep it clean","parent":"50511d6a-1268-4920-8e04-0de126bed02a","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"n-2-keep-it-clean\">2. Keep it clean\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"n-2-keep-it-clean\">2. Keep it clean\u003c/h3>\n"]},{"blockName":"core/image","attrs":{"caption":" Photo by \u003ca href=\"https://unsplash.com/@le_buzz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Le Buzz\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> ","id":5130,"sizeSlug":"full","linkDestination":"none","align":"center","title":"03","description":"","alt":"simple website header","sizes":[{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03-320x216.png","width":320,"height":216},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03-600x406.png","width":600,"height":406},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03.png","width":670,"height":453},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03.png","width":670,"height":453},{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03.png","width":670,"height":453},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03.png","width":670,"height":453},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03.png","width":670,"height":453}]},"innerBlocks":[],"innerHTML":"\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03.png\" alt=\"simple website header\" class=\"wp-image-5130\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://unsplash.com/@le_buzz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Le Buzz\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> \u003c/figcaption>\u003c/figure>\n","innerContent":["\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/03.png\" alt=\"simple website header\" class=\"wp-image-5130\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://unsplash.com/@le_buzz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Le Buzz\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> \u003c/figcaption>\u003c/figure>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp> Since your header is going to convey some of the most important information on your page, you want it to be readable. To that end, keep your header simple, clear, and concise. Get to the point quickly by using brief text and simple images that immediately drive home what you’re all about. You may choose to \u003ca href=\"https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203\" target=\"_blank\" rel=\"noreferrer noopener\">make use of white space\u003c/a>, also called negative space, to make it even clearer. \u003c/p>\n","innerContent":["\n\u003cp> Since your header is going to convey some of the most important information on your page, you want it to be readable. To that end, keep your header simple, clear, and concise. Get to the point quickly by using brief text and simple images that immediately drive home what you’re all about. You may choose to \u003ca href=\"https://uxplanet.org/https-medium-com-viktorija-bachvarova-the-power-of-empty-space-in-uidesign-14f14f8b203\" target=\"_blank\" rel=\"noreferrer noopener\">make use of white space\u003c/a>, also called negative space, to make it even clearer. \u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"3. Create intuitive navigation tools","parent":"50511d6a-1268-4920-8e04-0de126bed02a","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"n-3-create-intuitive-navigation-tools\">3. Create intuitive navigation tools\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"n-3-create-intuitive-navigation-tools\">3. Create intuitive navigation tools\u003c/h3>\n"]},{"blockName":"core/image","attrs":{"caption":" Photo by \u003ca href=\"https://www.pexels.com/@john-jackson-52736?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">John Jackson\u003c/a> from \u003ca href=\"https://www.pexels.com/photo/macbook-pro-190364/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">Pexels\u003c/a> ","id":5131,"sizeSlug":"full","linkDestination":"none","align":"center","title":"04","description":"","alt":"website navigation menu example","sizes":[{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04-320x216.png","width":320,"height":216},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04-600x406.png","width":600,"height":406},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04.png","width":670,"height":453},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04.png","width":670,"height":453},{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04.png","width":670,"height":453},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04.png","width":670,"height":453},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04.png","width":670,"height":453}]},"innerBlocks":[],"innerHTML":"\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04.png\" alt=\"website navigation menu example\" class=\"wp-image-5131\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://www.pexels.com/@john-jackson-52736?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">John Jackson\u003c/a> from \u003ca href=\"https://www.pexels.com/photo/macbook-pro-190364/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">Pexels\u003c/a> \u003c/figcaption>\u003c/figure>\n","innerContent":["\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/04.png\" alt=\"website navigation menu example\" class=\"wp-image-5131\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://www.pexels.com/@john-jackson-52736?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">John Jackson\u003c/a> from \u003ca href=\"https://www.pexels.com/photo/macbook-pro-190364/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">Pexels\u003c/a> \u003c/figcaption>\u003c/figure>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>As a consistent part of your site, navigation should be an ever-present feature that helps your web visitors find the next page to visit. Whether you implement a drop-down menu, use a “burger” menu, or opt for the classic category-based toolbar, your header should facilitate a person’s journey through the page.\u003c/p>\n","innerContent":["\n\u003cp>As a consistent part of your site, navigation should be an ever-present feature that helps your web visitors find the next page to visit. Whether you implement a drop-down menu, use a “burger” menu, or opt for the classic category-based toolbar, your header should facilitate a person’s journey through the page.\u003c/p>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>Similarly, there are some aspects of your navigation that your customers expect off the bat, such as contact or customer service information, shopping pages, or information about your company. Keep these labels clear and easy to find to deliver this content to your visitors that much faster.\u003c/p>\n","innerContent":["\n\u003cp>Similarly, there are some aspects of your navigation that your customers expect off the bat, such as contact or customer service information, shopping pages, or information about your company. Keep these labels clear and easy to find to deliver this content to your visitors that much faster.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"4. Make the navigation bar shrink on scroll","parent":"50511d6a-1268-4920-8e04-0de126bed02a","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"n-4-make-the-navigation-bar-shrink-on-scroll\">4. Make the navigation bar shrink on scroll\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"n-4-make-the-navigation-bar-shrink-on-scroll\">4. Make the navigation bar shrink on scroll\u003c/h3>\n"]},{"blockName":"core/image","attrs":{"caption":" Photo by \u003ca href=\"https://unsplash.com/@igormiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Igor Miske\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> ","id":5132,"sizeSlug":"full","linkDestination":"none","align":"center","title":"02","description":"","alt":"navigation bar shrink on scroll","sizes":[{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02-320x216.png","width":320,"height":216},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02-600x406.png","width":600,"height":406},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02.png","width":670,"height":453},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02.png","width":670,"height":453},{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02.png","width":670,"height":453},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02.png","width":670,"height":453},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02.png","width":670,"height":453}]},"innerBlocks":[],"innerHTML":"\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02.png\" alt=\"navigation bar shrink on scroll\" class=\"wp-image-5132\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://unsplash.com/@igormiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Igor Miske\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> \u003c/figcaption>\u003c/figure>\n","innerContent":["\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/02.png\" alt=\"navigation bar shrink on scroll\" class=\"wp-image-5132\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://unsplash.com/@igormiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Igor Miske\u003c/a> on \u003ca href=\"https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash\u003c/a> \u003c/figcaption>\u003c/figure>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp> As people explore your site and move along with your content, you’re going to want that header to minimize and let the information on the page take center stage. If that’s the case, you can always set your header to shrink to only the most important bits of information while a visitor scrolls down a page. That way, more real estate on the screen can be used for the content itself. \u003c/p>\n","innerContent":["\n\u003cp> As people explore your site and move along with your content, you’re going to want that header to minimize and let the information on the page take center stage. If that’s the case, you can always set your header to shrink to only the most important bits of information while a visitor scrolls down a page. That way, more real estate on the screen can be used for the content itself. \u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"5. Make sure it fits on smartphones","parent":"50511d6a-1268-4920-8e04-0de126bed02a","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"n-5-make-sure-it-fits-on-smartphones\">5. Make sure it fits on smartphones\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"n-5-make-sure-it-fits-on-smartphones\">5. Make sure it fits on smartphones\u003c/h3>\n"]},{"blockName":"core/image","attrs":{"caption":" Photo by \u003ca href=\"https://www.pexels.com/@wdnet?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">PhotoMIX Company\u003c/a> from \u003ca href=\"https://www.pexels.com/photo/person-using-black-and-white-smartphone-and-holding-blue-card-230544/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">Pexels\u003c/a> ","id":5133,"sizeSlug":"full","linkDestination":"none","align":"center","title":"05","description":"","alt":"website header on smartphone","sizes":[{"name":"thumbnail","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05-320x216.png","width":320,"height":216},{"name":"medium","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05-600x406.png","width":600,"height":406},{"name":"medium_large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05.png","width":670,"height":453},{"name":"large","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05.png","width":670,"height":453},{"name":"1536x1536","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05.png","width":670,"height":453},{"name":"2048x2048","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05.png","width":670,"height":453},{"name":"full","url":"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05.png","width":670,"height":453}]},"innerBlocks":[],"innerHTML":"\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05.png\" alt=\"website header on smartphone\" class=\"wp-image-5133\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://www.pexels.com/@wdnet?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">PhotoMIX Company\u003c/a> from \u003ca href=\"https://www.pexels.com/photo/person-using-black-and-white-smartphone-and-holding-blue-card-230544/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">Pexels\u003c/a> \u003c/figcaption>\u003c/figure>\n","innerContent":["\n\u003cfigure class=\"wp-block-image aligncenter size-full\">\u003cimg src=\"https://minio.production.cloudplatform.tech/wp-guru-guides-uploads/2021/12/05.png\" alt=\"website header on smartphone\" class=\"wp-image-5133\"/>\u003cfigcaption class=\"wp-element-caption\"> Photo by \u003ca href=\"https://www.pexels.com/@wdnet?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">PhotoMIX Company\u003c/a> from \u003ca href=\"https://www.pexels.com/photo/person-using-black-and-white-smartphone-and-holding-blue-card-230544/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels\" target=\"_blank\" rel=\"noreferrer noopener\">Pexels\u003c/a> \u003c/figcaption>\u003c/figure>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp> Your design should be “responsive,” which means that it automatically adapts to any screen your visitor is using to view the website. This ensures a positive user experience in an increasingly mobile world. While you’re designing, double-check that your navigation bar and main image shrink, expand, and adapt as needed so your visitors are getting the full intended experience. \u003c/p>\n","innerContent":["\n\u003cp> Your design should be “responsive,” which means that it automatically adapts to any screen your visitor is using to view the website. This ensures a positive user experience in an increasingly mobile world. While you’re designing, double-check that your navigation bar and main image shrink, expand, and adapt as needed so your visitors are getting the full intended experience. \u003c/p>\n"]},{"blockName":"nc-hc/product-block","attrs":{"buttonLabel":"Create your website","buttonUrl":"https://www.namecheap.com/visual/site-maker/","buttonTarget":"_blank","buttonRel":"noreferrer noopener"},"innerBlocks":[],"innerHTML":"\n\u003cdiv class=\"wp-block-nc-hc-product-block gb-product-card\">\u003cdiv class=\"gb-product-card__text\">\u003c/div>\u003ca href=\"https://www.namecheap.com/visual/site-maker/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"gb-btn gb-btn--primary\">Create your website\u003c/a>\u003c/div>\n","innerContent":["\n\u003cdiv class=\"wp-block-nc-hc-product-block gb-product-card\">\u003cdiv class=\"gb-product-card__text\">\u003c/div>\u003ca href=\"https://www.namecheap.com/visual/site-maker/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"gb-btn gb-btn--primary\">Create your website\u003c/a>\u003c/div>\n"]},{"blockName":"core/heading","attrs":{"label":"5 website header examples","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch2 class=\"wp-block-heading\" id=\"n-5-website-header-examples\">5 website header examples\u003c/h2>\n","innerContent":["\n\u003ch2 class=\"wp-block-heading\" id=\"n-5-website-header-examples\">5 website header examples\u003c/h2>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>If you’re looking for inspiration on how you could design your header, check out these examples that can show you some of this guide’s tips in action:\u003c/p>\n","innerContent":["\n\u003cp>If you’re looking for inspiration on how you could design your header, check out these examples that can show you some of this guide’s tips in action:\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"AirPods Pro","parent":"e50a97f3-fef5-4b4b-8e03-1afa28e27af4","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"airpods-pro\">AirPods Pro\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"airpods-pro\">AirPods Pro\u003c/h3>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>The \u003ca href=\"https://www.apple.com/airpods-pro/\" target=\"_blank\" rel=\"noreferrer noopener\">AirPods Pro\u003c/a> website is sleek, simple, and easy to use — not unlike their products. This header fits their brand by delivering the streamlined experience Apple products are known for, letting the product take center stage. As you scroll, the navigation bar minimizes and highlights a “Buy” button as the page doubles down on product features.\u003c/p>\n","innerContent":["\n\u003cp>The \u003ca href=\"https://www.apple.com/airpods-pro/\" target=\"_blank\" rel=\"noreferrer noopener\">AirPods Pro\u003c/a> website is sleek, simple, and easy to use — not unlike their products. This header fits their brand by delivering the streamlined experience Apple products are known for, letting the product take center stage. As you scroll, the navigation bar minimizes and highlights a “Buy” button as the page doubles down on product features.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"Paster Properties","parent":"e50a97f3-fef5-4b4b-8e03-1afa28e27af4","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"paster-properties\">Paster Properties\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"paster-properties\">Paster Properties\u003c/h3>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>This Minnesota-based real estate company, \u003ca href=\"https://pasterprop.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Paster Properties\u003c/a>, designed a transparent header that allows high-resolution photos of some of their properties to take center stage. When dealing with the header, it has the burger menu on the left for general navigation options, while the header itself focuses on the company, its partnerships, and its mission.\u003c/p>\n","innerContent":["\n\u003cp>This Minnesota-based real estate company, \u003ca href=\"https://pasterprop.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Paster Properties\u003c/a>, designed a transparent header that allows high-resolution photos of some of their properties to take center stage. When dealing with the header, it has the burger menu on the left for general navigation options, while the header itself focuses on the company, its partnerships, and its mission.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"Louis Vuitton","parent":"e50a97f3-fef5-4b4b-8e03-1afa28e27af4","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"louis-vuitton\">Louis Vuitton\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"louis-vuitton\">Louis Vuitton\u003c/h3>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>The internationally acclaimed designer brand prioritizes the user experience and harnesses its design to direct people where they want them to go. White space focuses the visitor’s attention on the simple header, which directs visitors to a search bar to easily find products and promotes recent products in that all-important first section of the website. When you visit the website on your phone, you’ll see the menu move off to the side while reorienting the main image, so focus says on the product without compromising ease of navigation.\u003c/p>\n","innerContent":["\n\u003cp>The internationally acclaimed designer brand prioritizes the user experience and harnesses its design to direct people where they want them to go. White space focuses the visitor’s attention on the simple header, which directs visitors to a search bar to easily find products and promotes recent products in that all-important first section of the website. When you visit the website on your phone, you’ll see the menu move off to the side while reorienting the main image, so focus says on the product without compromising ease of navigation.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"Digital Horizon","parent":"e50a97f3-fef5-4b4b-8e03-1afa28e27af4","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"digital-horizon\">Digital Horizon\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"digital-horizon\">Digital Horizon\u003c/h3>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>Investment firm \u003ca href=\"https://digitalhorizon.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Digital Horizon\u003c/a> features a simple header up top. What really makes this stand out is a captivating image of a boat on the water coupled with simple copy that immediately tells the visitor what the firm is about. Calming visuals paired with the white text on the crystal blue water are designed to stand out.\u003c/p>\n","innerContent":["\n\u003cp>Investment firm \u003ca href=\"https://digitalhorizon.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Digital Horizon\u003c/a> features a simple header up top. What really makes this stand out is a captivating image of a boat on the water coupled with simple copy that immediately tells the visitor what the firm is about. Calming visuals paired with the white text on the crystal blue water are designed to stand out.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"level":3,"label":"Tiffany & Co.","parent":"e50a97f3-fef5-4b4b-8e03-1afa28e27af4","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch3 class=\"wp-block-heading\" id=\"tiffany-co\">Tiffany & Co.\u003c/h3>\n","innerContent":["\n\u003ch3 class=\"wp-block-heading\" id=\"tiffany-co\">Tiffany & Co.\u003c/h3>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>World-renowned jewelry retailer \u003ca href=\"https://www.tiffany.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Tiffany & Co.\u003c/a> uses a very simple and easy-to-read header. Tiffany’s signature blue instantly reinforces this iconic brand, serving as an excellent example of using brand colors while prioritizing ease of navigation. The header showcases links to find products and get in touch with customer service.\u003c/p>\n","innerContent":["\n\u003cp>World-renowned jewelry retailer \u003ca href=\"https://www.tiffany.com/\" target=\"_blank\" rel=\"noreferrer noopener\">Tiffany & Co.\u003c/a> uses a very simple and easy-to-read header. Tiffany’s signature blue instantly reinforces this iconic brand, serving as an excellent example of using brand colors while prioritizing ease of navigation. The header showcases links to find products and get in touch with customer service.\u003c/p>\n"]},{"blockName":"core/heading","attrs":{"label":"Get ahead of the competition with Namecheap","checked":true,"isBlocked":false},"innerBlocks":[],"innerHTML":"\n\u003ch2 class=\"wp-block-heading\" id=\"get-ahead-of-the-competition-with-namecheap\">Get ahead of the competition with Namecheap\u003c/h2>\n","innerContent":["\n\u003ch2 class=\"wp-block-heading\" id=\"get-ahead-of-the-competition-with-namecheap\">Get ahead of the competition with Namecheap\u003c/h2>\n"]},{"blockName":"core/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n\u003cp>Whether you’re creating a new online shop or unveiling your latest venture to the world, your header can make or break your website’s visibility. Namecheap’s \u003ca href=\"https://www.namecheap.com/visual/site-maker/\" target=\"_blank\" rel=\"noreferrer noopener\">free website builder\u003c/a> makes it easy to design your own user-friendly website without learning how to code. Simply drag and drop designs, color choices, font selection, and much more as you put together just the right look to hook new customers. It’s time to get creating: Visit the \u003ca href=\"https://www.namecheap.com/visual/\" target=\"_blank\" rel=\"noreferrer noopener\">Namecheap Visual Maker\u003c/a> suite of branding tools to get started!\u003c/p>\n","innerContent":["\n\u003cp>Whether you’re creating a new online shop or unveiling your latest venture to the world, your header can make or break your website’s visibility. Namecheap’s \u003ca href=\"https://www.namecheap.com/visual/site-maker/\" target=\"_blank\" rel=\"noreferrer noopener\">free website builder\u003c/a> makes it easy to design your own user-friendly website without learning how to code. Simply drag and drop designs, color choices, font selection, and much more as you put together just the right look to hook new customers. It’s time to get creating: Visit the \u003ca href=\"https://www.namecheap.com/visual/\" target=\"_blank\" rel=\"noreferrer noopener\">Namecheap Visual Maker\u003c/a> suite of branding tools to get started!\u003c/p>\n"]}],"stickyMenu":[{"label":"What is a website header?","labelEdited":"What is a website header?","level":2,"anchor":"what-is-a-website-header"},{"label":"Why is a website header important for a website?","labelEdited":"Why is a website header important for a website?","level":2,"anchor":"why-is-a-website-header-important-for-a-website"},{"label":"5 tips for creating a good website header","labelEdited":"5 tips for creating a good website header","level":2,"anchor":"n-5-tips-for-creating-a-good-website-header","children":[{"label":"1. Use fonts and colors strategically to improve readability","labelEdited":"1. Use fonts and colors strategically to improve readability","level":3,"anchor":"n-1-use-fonts-and-colors-strategically-to-improve-readability"},{"label":"2. Keep it clean","labelEdited":"2. Keep it clean","level":3,"anchor":"n-2-keep-it-clean"},{"label":"3. Create intuitive navigation tools","labelEdited":"3. Create intuitive navigation tools","level":3,"anchor":"n-3-create-intuitive-navigation-tools"},{"label":"4. Make the navigation bar shrink on scroll","labelEdited":"4. Make the navigation bar shrink on scroll","level":3,"anchor":"n-4-make-the-navigation-bar-shrink-on-scroll"},{"label":"5. Make sure it fits on smartphones","labelEdited":"5. Make sure it fits on smartphones","level":3,"anchor":"n-5-make-sure-it-fits-on-smartphones"}]},{"label":"5 website header examples","labelEdited":"5 website header examples","level":2,"anchor":"n-5-website-header-examples","children":[{"label":"AirPods Pro","labelEdited":"AirPods Pro","level":3,"anchor":"airpods-pro"},{"label":"Paster Properties","labelEdited":"Paster Properties","level":3,"anchor":"paster-properties"},{"label":"Louis Vuitton","labelEdited":"Louis Vuitton","level":3,"anchor":"louis-vuitton"},{"label":"Digital Horizon","labelEdited":"Digital Horizon","level":3,"anchor":"digital-horizon"},{"label":"Tiffany & Co.","labelEdited":"Tiffany & Co.","level":3,"anchor":"tiffany-co"}]},{"label":"Get ahead of the competition with Namecheap","labelEdited":"Get ahead of the competition with Namecheap","level":2,"anchor":"get-ahead-of-the-competition-with-namecheap"}]},"status":200,"statusText":"OK"}}

Website header: Learn the basics and why it matters

Nick A. | April 06, 2026
8 mins

You have just a few seconds to impress a potential customer that visits your website, so what they see first is an important way to bring them into the fold. That’s where your website header comes into play. This prime real estate, the first thing a customer sees when they come to your website, should capture your visitor’s eye and entice them to keep reading while delivering key information. Whether you know how to code or if you use Namecheap’s free website builder, creating an enticing header is among the most important aspects of web design. Here’s what you need to know as you get started.

What is a website header?

At its most basic, a website header is the top section of a website that your customers see first when they visit your site. When talking about a header, you can be referring to the navigation bar that contains your logo and your website menu, the first “section” of the page that appears when your website loads, or both together. Either way, the website header emphasizes the most important elements of your site while setting the tone for the look and feel of your site as a whole.

grey macbook
Photo by Igor Miske on Unsplash

What you put in the header depends on your business. If you’re selling a product online, you may want to use the website header space to showcase your newest products and quickly encourage people to buy. For example, the home page of a furniture store may feature a well-designed room in that first section of the site to showcase its wares along with a call to action to buy something. Those who sell services may use the website header to capture their audience with good copy and a complementary image that entices them to learn more or act.

Why is a website header important for a website?

Good web design means that your website is functional and aesthetically pleasing. Though there are many schools of thought when it comes to website design, headers are almost always considered the keystone that ties a site together. Here are some additional reasons why your website’s header is an important part of the design.

  • It displays key information about the site. Important information like navigation links, your company branding, or copy about your company quickly delivers the information that may entice someone to stay on your site.
  • Headers showcase your branding. The navigation bar will appear on every page of your site, while that first section underneath it will likely change depending on the page’s purpose. The consistent navigation bar is the perfect place to put your logo (and your tagline, if you have one) as this will further reinforce your branding. A good logo creator can help you design a logo that makes your header even more memorable.
  • It drives people to action. You’ll want website visitors to do something when they visit your site, whether it’s to download a demo of your software, make a purchase, or share the article they’re reading. Having a call to action on your header, such as “sign up” or “download free demo,” reminds the user to engage with the content you’re dishing out.

5 tips for creating a good website header

As you sift through your choices and select the designs that work best for your website, keep these five tips for your navigation bar and main header image in mind

1. Use fonts and colors strategically to improve readability

black and white website header
Photo by Ben Kolde on Unsplash

Your website is an extension of your brand, so it naturally makes sense to use your brand fonts and colors as part of the design. While you make your selections, double-check that the text is easy to read while staying true to your brand. Consider using darker font colors against lighter colors in your color palette to ensure that visitors can see your content without issue.

2. Keep it clean

simple website header
Photo by Le Buzz on Unsplash

Since your header is going to convey some of the most important information on your page, you want it to be readable. To that end, keep your header simple, clear, and concise. Get to the point quickly by using brief text and simple images that immediately drive home what you’re all about. You may choose to make use of white space, also called negative space, to make it even clearer.

3. Create intuitive navigation tools

website navigation menu example
Photo by John Jackson from Pexels

As a consistent part of your site, navigation should be an ever-present feature that helps your web visitors find the next page to visit. Whether you implement a drop-down menu, use a “burger” menu, or opt for the classic category-based toolbar, your header should facilitate a person’s journey through the page.

Similarly, there are some aspects of your navigation that your customers expect off the bat, such as contact or customer service information, shopping pages, or information about your company. Keep these labels clear and easy to find to deliver this content to your visitors that much faster.

4. Make the navigation bar shrink on scroll

navigation bar shrink on scroll
Photo by Igor Miske on Unsplash

As people explore your site and move along with your content, you’re going to want that header to minimize and let the information on the page take center stage. If that’s the case, you can always set your header to shrink to only the most important bits of information while a visitor scrolls down a page. That way, more real estate on the screen can be used for the content itself.

5. Make sure it fits on smartphones

website header on smartphone
Photo by PhotoMIX Company from Pexels

Your design should be “responsive,” which means that it automatically adapts to any screen your visitor is using to view the website. This ensures a positive user experience in an increasingly mobile world. While you’re designing, double-check that your navigation bar and main image shrink, expand, and adapt as needed so your visitors are getting the full intended experience.

Create your website

5 website header examples

If you’re looking for inspiration on how you could design your header, check out these examples that can show you some of this guide’s tips in action:

AirPods Pro

The AirPods Pro website is sleek, simple, and easy to use — not unlike their products. This header fits their brand by delivering the streamlined experience Apple products are known for, letting the product take center stage. As you scroll, the navigation bar minimizes and highlights a “Buy” button as the page doubles down on product features.

Paster Properties

This Minnesota-based real estate company, Paster Properties, designed a transparent header that allows high-resolution photos of some of their properties to take center stage. When dealing with the header, it has the burger menu on the left for general navigation options, while the header itself focuses on the company, its partnerships, and its mission.

Louis Vuitton

The internationally acclaimed designer brand prioritizes the user experience and harnesses its design to direct people where they want them to go. White space focuses the visitor’s attention on the simple header, which directs visitors to a search bar to easily find products and promotes recent products in that all-important first section of the website. When you visit the website on your phone, you’ll see the menu move off to the side while reorienting the main image, so focus says on the product without compromising ease of navigation.

Digital Horizon

Investment firm Digital Horizon features a simple header up top. What really makes this stand out is a captivating image of a boat on the water coupled with simple copy that immediately tells the visitor what the firm is about. Calming visuals paired with the white text on the crystal blue water are designed to stand out.

Tiffany & Co.

World-renowned jewelry retailer Tiffany & Co. uses a very simple and easy-to-read header. Tiffany’s signature blue instantly reinforces this iconic brand, serving as an excellent example of using brand colors while prioritizing ease of navigation. The header showcases links to find products and get in touch with customer service.

Get ahead of the competition with Namecheap

Whether you’re creating a new online shop or unveiling your latest venture to the world, your header can make or break your website’s visibility. Namecheap’s free website builder makes it easy to design your own user-friendly website without learning how to code. Simply drag and drop designs, color choices, font selection, and much more as you put together just the right look to hook new customers. It’s time to get creating: Visit the Namecheap Visual Maker suite of branding tools to get started!

Frequently asked questions

A sticky header on a website is a style of header that remains fixed at the top of the page as you scroll down. This can make it easier for site visitors to find what they need because they don’t have to scroll all the way back up to the top to navigate to a new page. 

It’s important to know that website header design affects the user experience (UX) on a site. It plays an essential role in navigation, which helps visitors find the information they need, and can include a call to action that turns visitors into customers. It also provides a place to showcase your branding.

The size of a website header varies depending on the website’s design and what device it’s being viewed on. The header should stretch the full width of the screen. The height can vary to accommodate text, buttons, and logos, and may fluctuate if drop-down menus are included.

To edit a website header in WordPress, navigate to your dashboard and click on Appearance > Editor. Then, click on Patterns > Template Parts > Header and make any edits as needed.

A good website header has the following features:

  • A clear, easy-to-read font and simple section headers
  • A color palette that aligns with your branding and helps with readability
  • Drop-down menus that assist with navigation
  • A mobile-friendly design

Biography

Picture of Nick A.

Nick A.

Nick Allen is a writer, photographer, and content marketer. He’s also the founder of BrainBoost Media, a boutique content and operations studio. With a wide range of interests, he enjoys reading and writing about sports, entrepreneurship, and start-ups.

More content by Nick A.

Web Design & Branding

For standing out online

From voice to visuals, here’s how to create branding that everyone will recognize.

See more
Join Our Newsletter

Stay inspired

Get all the latest offers, articles, and industry news straight to your mailbox every month.

Need help? We're always here for you.

Go to Live Chat page
notmyip