{"id":76099,"date":"2021-08-23T04:43:07","date_gmt":"2021-08-23T04:43:07","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=76099"},"modified":"2021-08-23T04:43:07","modified_gmt":"2021-08-23T04:43:07","slug":"website-header-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/website-header-design\/","title":{"rendered":"Website Header Design in 2024: Examples &amp; Best Practices"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"76099\" class=\"elementor elementor-76099\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a11f580 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a11f580\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b7b95f7\" data-id=\"b7b95f7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e8ee5ff elementor-widget elementor-widget-text-editor\" data-id=\"e8ee5ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When you visit a website for the first, second, or even tenth time, what\u2019s the first thing you see? For many of us, it\u2019s the header.\u00a0<\/p><p>One of the reasons why is because our eyes are naturally drawn to the very top part of the page. It\u2019s like watching a movie or reading a newspaper article. You want to start at the very beginning of the story, not in the middle of it.\u00a0<\/p><p>And, let\u2019s be honest, as designers and as consumers, there\u2019s a lot you can tell about a website from its header. You\u2019ll find its branding there. You\u2019ll get a high-level overview of its content. You might also find a call-to-action and additional company info, among other things.\u00a0<\/p><p>Even though the header takes up a small amount of real estate, it\u2019s one of the most important parts of the site and, as such, is probably going to get more engagement than most content on the site.\u00a0<\/p><p>So, how do you design it to maximize that engagement?\u00a0<\/p><p>For starters, you don\u2019t want to use the basic header design provided by your <a href=\"https:\/\/elementor.com\/free-wordpress-themes\/\" target=\"_blank\" rel=\"noopener\">WordPress theme<\/a> or template. It\u2019s a good starting point, but there\u2019s so much more to think about when it comes to what to include, how to lay it out and how to design it for ultimate usability.\u00a0<\/p><p>Throughout the post, you\u2019ll find some awesome examples of website headers and tips for creating them, too. So whether you\u2019re here for design inspiration or help with building the perfect website header, you\u2019ll have plenty of visual examples to check out.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9ba97e read-more-link elementor-widget elementor-widget-heading\" data-id=\"e9ba97e\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/header-footer-builder\/\">Discover How Create Headers and Footers in WordPress<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-202e231 blog-toc elementor-widget elementor-widget-heading\" data-id=\"202e231\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table Of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a40888c blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"a40888c\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-is-a-website-header\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Is a Website Header?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#types-of-website-headers\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Types of Website Headers<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-should-a-website-header-include\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Should a Website Header Include?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#best-practices-for-website-header-design\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Best Practices for Website Header Design<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-468e634 elementor-widget elementor-widget-menu-anchor\" data-id=\"468e634\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-is-a-website-header\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a073c3 elementor-widget elementor-widget-heading\" data-id=\"6a073c3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is a Website Header?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0161516 elementor-widget elementor-widget-text-editor\" data-id=\"0161516\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The website header is the top portion of a website where the logo, navigation and sometimes other information, links and buttons are located.\u00a0<\/p><p>For example, this is the header on the <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\"   title=\"Elementor\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"1184\">Elementor<\/a> website:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29e86e8 elementor-widget elementor-widget-image\" data-id=\"29e86e8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"35\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=35\/blog\/wp-content\/uploads\/2021\/08\/1-elementor-website-header-design.png\" class=\"attachment-full size-full wp-image-76162\" alt=\"elementor-website-header-design\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/1-elementor-website-header-design.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/1-elementor-website-header-design-300x15.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a699a29 elementor-widget elementor-widget-text-editor\" data-id=\"a699a29\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The header is a valuable part of every website as it:\u00a0<\/p><ul><li>Serves as the home for the brand\u2019s logo (and might be the only place where visitors encounter it)<\/li><li>Offers visitors a first impression of the website<\/li><li>Works as a table of contents for the site<\/li><li>Makes it easy to explore the site with one click or search query<\/li><li>Includes quick-action buttons for people who are ready to take the next step<\/li><li>Offers additional info related to the company, how to contact it and more<\/li><\/ul><p>Although the header serves a similar purpose from site to site, there are different types of headers you can create. It all depends on the type of website you create, the brand\u2019s style and how much information you want to store there.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bea0cc elementor-widget elementor-widget-menu-anchor\" data-id=\"0bea0cc\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"types-of-website-headers\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fc89a1 elementor-widget elementor-widget-heading\" data-id=\"2fc89a1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Types of Website Headers<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f6027e elementor-widget elementor-widget-heading\" data-id=\"5f6027e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Single-Line Header With Left-Aligned Logo<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-270f2ca elementor-widget elementor-widget-text-editor\" data-id=\"270f2ca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This header on <a href=\"https:\/\/dogbarstpete.com\/\">The Dog Bar<\/a> website is the most common website header design:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-97e8d27 elementor-widget elementor-widget-image\" data-id=\"97e8d27\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"65\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=65\/blog\/wp-content\/uploads\/2021\/08\/2-thedogbar-header.png\" class=\"attachment-full size-full wp-image-76166\" alt=\"thedogbar-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/2-thedogbar-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/2-thedogbar-header-300x27.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a88f776 elementor-widget elementor-widget-text-editor\" data-id=\"a88f776\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The logo is on the far-left side of the screen and the navigation menu, <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/ecommerce\/\"   title=\"ecommerce\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"3504\">ecommerce<\/a> icon and CTA are on the far-right.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a26e500 elementor-widget elementor-widget-heading\" data-id=\"a26e500\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Mobile-Optimized Header With Hamburger Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f3260a elementor-widget elementor-widget-text-editor\" data-id=\"3f3260a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.hubspot.com\/\">HubSpot<\/a> shows us what the typical mobile website header looks like:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c993d8 elementor-widget elementor-widget-image\" data-id=\"1c993d8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"504\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=504\/blog\/wp-content\/uploads\/2021\/08\/3-hubspot-mobile-header-closed.jpg\" class=\"attachment-full size-full wp-image-76167\" alt=\"hubspot-mobile-header-closed\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/3-hubspot-mobile-header-closed.jpg 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/3-hubspot-mobile-header-closed-300x210.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9885f5a elementor-widget elementor-widget-text-editor\" data-id=\"9885f5a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Again, the logo is on the far-left. In this case, though, the navigation and other links are tucked beneath a hamburger icon.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ae07b6 elementor-widget elementor-widget-heading\" data-id=\"2ae07b6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Desktop\/Mobile Hybrid Header<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-990c036 elementor-widget elementor-widget-text-editor\" data-id=\"990c036\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As the lines blur between mobile and desktop, it\u2019s no surprise to see websites adopt a hybrid header design like <a href=\"https:\/\/www.yotel.com\/\">YOTEL<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb0b191 elementor-widget elementor-widget-image\" data-id=\"eb0b191\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"48\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=48\/blog\/wp-content\/uploads\/2021\/08\/4-yotel-hybrid-header.png\" class=\"attachment-full size-full wp-image-76168\" alt=\"yotel-hybrid-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/4-yotel-hybrid-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/4-yotel-hybrid-header-300x20.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-152c922 elementor-widget elementor-widget-text-editor\" data-id=\"152c922\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>It looks like the typical single-line header. However, a hamburger menu icon holds additional navigation links for desktop visitors.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49dece2 elementor-widget elementor-widget-heading\" data-id=\"49dece2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Header With Mega Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7bd7dc elementor-widget elementor-widget-text-editor\" data-id=\"e7bd7dc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Websites with a ton of content can\u2019t always afford to pick and choose which categories or pages make it to the header. That\u2019s why you get a mega menu like the one on the <a href=\"https:\/\/digitalagencynetwork.com\/\">Digital Agency Network\u2019s website<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6017ba elementor-widget elementor-widget-image\" data-id=\"c6017ba\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"386\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=386\/blog\/wp-content\/uploads\/2021\/08\/image4-1.png\" class=\"attachment-full size-full wp-image-76203\" alt=\"header-mega-menu\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/image4-1.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/image4-1-300x161.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ddfdb7 elementor-widget elementor-widget-text-editor\" data-id=\"9ddfdb7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Under the \u201cAgencies\u201d top-level menu, we see a list of agency locations organized by location and, most likely, popularity or size.<\/p><p>When you look under the \u201cFeed\u201d top-level menu, we see a similar though not identical <a href=\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\" target=\"_blank\" rel=\"noopener\">mega menu<\/a> structure:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb22b45 elementor-widget elementor-widget-image\" data-id=\"eb22b45\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"399\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=399\/blog\/wp-content\/uploads\/2021\/08\/image34.png\" class=\"attachment-large size-large wp-image-76204\" alt=\"mega-menu-feed\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/image34.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/image34-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11f4134 elementor-widget elementor-widget-text-editor\" data-id=\"11f4134\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The feed is broken up into news, case studies, and blog categories. In addition, this menu includes a couple of eye-catching \u201cFeatured Posts\u201d on the right.\u00a0<\/p><p>By the way, if you need to build one of these, you can easily do so with <a href=\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\" target=\"_blank\" rel=\"noopener\">Elementor and JetMenu<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d2cdc6 elementor-widget elementor-widget-heading\" data-id=\"8d2cdc6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Left-Aligned Vertical Header<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2175d8 elementor-widget elementor-widget-text-editor\" data-id=\"e2175d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Michelin-starred restaurant <a href=\"https:\/\/theinnatlittlewashington.com\/\">The Inn at Little Washington<\/a> uses a left-aligned sidebar to store its header:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f03138f elementor-widget elementor-widget-image\" data-id=\"f03138f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/08\/6-innatlittlewashington-header-1.png\" class=\"attachment-large size-large wp-image-76205\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/6-innatlittlewashington-header-1.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/6-innatlittlewashington-header-1-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25f0abc elementor-widget elementor-widget-text-editor\" data-id=\"25f0abc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This vertical header design tends to be a popular choice on websites for hospitality and other service-based businesses.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0439550 elementor-widget elementor-widget-heading\" data-id=\"0439550\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Header With a Utility Bar<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55fdabe elementor-widget elementor-widget-text-editor\" data-id=\"55fdabe\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Some websites may affix a utility bar to the top of the header as <a href=\"https:\/\/www.subway.com\/\">Subway<\/a> does:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3303922 elementor-widget elementor-widget-image\" data-id=\"3303922\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"59\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=59\/blog\/wp-content\/uploads\/2021\/08\/7-subway-website-header-1.png\" class=\"attachment-full size-full wp-image-76206\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/7-subway-website-header-1.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/7-subway-website-header-1-300x25.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc92691 elementor-widget elementor-widget-text-editor\" data-id=\"cc92691\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is useful for companies that want to provide location, contact, accessibility, social media and other company info or links that don\u2019t easily fit into the main menu.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2dc7c60 elementor-widget elementor-widget-heading\" data-id=\"2dc7c60\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">7. Header With a Notification Bar<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a4c3f6d elementor-widget elementor-widget-text-editor\" data-id=\"a4c3f6d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Some websites may attach a promotional or notification bar to the header. This <a href=\"https:\/\/www.urbanoutfitters.com\/\">Urban Outfitters<\/a> example shows us how to include both a promotional and utility bar:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b16d59 elementor-widget elementor-widget-image\" data-id=\"6b16d59\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"76\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=76\/blog\/wp-content\/uploads\/2021\/08\/8-urbanoutfitters-header.png\" class=\"attachment-full size-full wp-image-76172\" alt=\"urbanoutfitters-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/8-urbanoutfitters-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/8-urbanoutfitters-header-300x32.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b925e5a elementor-widget elementor-widget-text-editor\" data-id=\"b925e5a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>While promotional bars can appear below the header, it\u2019s more common to place them above and make them dismissible with an \u201cX\u201d in the right corner.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-606bb62 elementor-widget elementor-widget-heading\" data-id=\"606bb62\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">8. Header With Multi-Site Navigation<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e0c4389 elementor-widget elementor-widget-text-editor\" data-id=\"e0c4389\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Websites that are a part of a family of sites \u2014 which is common in retail \u2014 can add an additional bar above the header with quick-links to their other stores as <a href=\"https:\/\/www.gap.com\/\">Gap<\/a> does:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58a2f50 elementor-widget elementor-widget-image\" data-id=\"58a2f50\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"69\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=69\/blog\/wp-content\/uploads\/2021\/08\/9-gap-website-header.png\" class=\"attachment-large size-large wp-image-76173\" alt=\"gap-website-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/9-gap-website-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/9-gap-website-header-300x29.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6de330 elementor-widget elementor-widget-text-editor\" data-id=\"e6de330\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Rather than create a separate bar for the multi-site navigation, these links appear inside Gap\u2019s utility bar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af12ab1 elementor-widget elementor-widget-menu-anchor\" data-id=\"af12ab1\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-should-a-website-header-include\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9ff0a2 elementor-widget elementor-widget-heading\" data-id=\"a9ff0a2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Should a Website Header Include?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8feaf38 elementor-widget elementor-widget-text-editor\" data-id=\"8feaf38\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s take a look at what exactly belongs in your website header design.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b623eb2 elementor-widget elementor-widget-heading\" data-id=\"b623eb2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Logo <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f808cf8 elementor-widget elementor-widget-text-editor\" data-id=\"f808cf8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Want to build brand recognition? Then the logo should be the very first thing visitors see on a website.\u00a0<\/p><p><a href=\"https:\/\/www.cosmopolitan.com\/uk\/entertainment\/a37021448\/tiktok-reaction-videos-sexlife-shower-scene\/\">Cosmopolitan<\/a> is a good example to follow:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d6633f elementor-widget elementor-widget-image\" data-id=\"5d6633f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"31\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=31\/blog\/wp-content\/uploads\/2021\/08\/10-cosmopolitan-header.png\" class=\"attachment-full size-full wp-image-76174\" alt=\"cosmopolitan-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/10-cosmopolitan-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/10-cosmopolitan-header-300x13.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0724b6 elementor-widget elementor-widget-text-editor\" data-id=\"b0724b6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The logo design stands out beautifully from the rest of the header with its bright color and tall characters. And because the logo is properly sized for the space, it doesn\u2019t overwhelm the other elements or force the header to take on an excess of white space.<\/p><p><a href=\"https:\/\/elementor.com\/blog\/how-to-design-logo\/\" target=\"_blank\" rel=\"noopener\"><strong>Learn how to design a great-looking and memorable logo here.<\/strong><\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38e4107 elementor-widget elementor-widget-heading\" data-id=\"38e4107\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Navigation Links<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ed4158 elementor-widget elementor-widget-text-editor\" data-id=\"4ed4158\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The navigation should improve your visitors\u2019 understanding of what\u2019s on the site as well as how each page relates to one another. If they can easily get a bird\u2019s-eye view of what\u2019s going on, they\u2019ll feel more confident as they explore what\u2019s there.\u00a0<\/p><p>Depending on the size of your website, you\u2019ll have to decide how many and what types of navigations you need. There\u2019s the primary navigation, like the one you see here in <a href=\"https:\/\/www.dollarshaveclub.com\/\">Dollar Shave Club<\/a>\u2019s header:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d01900a elementor-widget elementor-widget-image\" data-id=\"d01900a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"56\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=56\/blog\/wp-content\/uploads\/2021\/08\/11-dollarshaveclub-main-navigation.png\" class=\"attachment-full size-full wp-image-76175\" alt=\"dollarshaveclub-main-navigation\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/11-dollarshaveclub-main-navigation.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/11-dollarshaveclub-main-navigation-300x23.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c01521b elementor-widget elementor-widget-text-editor\" data-id=\"c01521b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>But notice that DSC also has a hamburger menu on the left. Here\u2019s what visitors find under this secondary navigation:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-788401f elementor-widget elementor-widget-image\" data-id=\"788401f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/08\/12-dollarshaveclub-hamburger-navigation.png\" class=\"attachment-full size-full wp-image-76176\" alt=\"dollarshaveclub-hamburger-navigation\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/12-dollarshaveclub-hamburger-navigation.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/12-dollarshaveclub-hamburger-navigation-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c78514 elementor-widget elementor-widget-text-editor\" data-id=\"9c78514\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The links above the line are more or less the same as what\u2019s in the primary navigation, but this time they include second-level links.\u00a0<\/p><p>The links below the line allow DSC to make all of the other pages accessible from the navigation without cluttering it up. What\u2019s more, by placing them under the hamburger icon, users don\u2019t have to scroll to the footer to find useful pages like Contact Us, Careers and FAQ.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92ca17d elementor-widget elementor-widget-heading\" data-id=\"92ca17d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">CTA<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a42163a elementor-widget elementor-widget-text-editor\" data-id=\"a42163a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Every website has one action or goal that it\u2019s driving visitors towards. While the website will include eye-catching calls-to-action throughout its pages, it\u2019s a good idea to keep the CTA top-of-mind with visitors by putting it in the header, too.\u00a0<\/p><p><a href=\"https:\/\/www.massageenvy.com\/\">Massage Envy<\/a> does that here:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c13b755 elementor-widget elementor-widget-image\" data-id=\"c13b755\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"47\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=47\/blog\/wp-content\/uploads\/2021\/08\/13-massageenvy-header-cta.png\" class=\"attachment-large size-large wp-image-76177\" alt=\"massageenvy-header-cta\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/13-massageenvy-header-cta.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/13-massageenvy-header-cta-300x20.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c08f22 elementor-widget elementor-widget-text-editor\" data-id=\"1c08f22\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The CTA should be designed just as it is on the site. If you use <a href=\"https:\/\/elementor.com\/features\/global-settings\/\" target=\"_blank\" rel=\"noopener\">Elementor\u2019s Global Site Settings<\/a> to define your global button design, it\u2019ll apply here as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2d6dfe elementor-widget elementor-widget-image\" data-id=\"b2d6dfe\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"732\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440,h=732\/blog\/wp-content\/uploads\/2021\/08\/14-elementor-global-button-settings.png\" class=\"attachment-full size-full wp-image-76178\" alt=\"elementor-global-button-settings\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/08\/14-elementor-global-button-settings.png 1440w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/14-elementor-global-button-settings-300x153.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/08\/14-elementor-global-button-settings-1024x521.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/08\/14-elementor-global-button-settings-768x390.png 768w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ed5816 elementor-widget elementor-widget-text-editor\" data-id=\"5ed5816\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Your CTA should also be placed on the right end of the header. Not only will this eye-catching link bring visual balance to the header, it works as a helpful shortcut to conversion.\u00a0<\/p><p>This is explained by the Serial Position Effect <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noopener\">design principle<\/a>, which says that people remember the first and last items in a series more than the others. So, when they\u2019re ready to convert, they won\u2019t have to hunt down the CTA within the content of the site. They\u2019ll know they can go directly to the header to do so.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cfb1d84 elementor-widget elementor-widget-heading\" data-id=\"cfb1d84\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Search Bar<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9e422c9 elementor-widget elementor-widget-text-editor\" data-id=\"9e422c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Websites with massive archives of content or inventories of products would greatly benefit from having a <a href=\"https:\/\/elementor.com\/widgets\/search-widget\/\" target=\"_blank\" rel=\"noopener\">search bar<\/a> in the header.\u00a0<\/p><p><a href=\"https:\/\/mashable.com\/\">Mashable<\/a> is one such digital publication that does this:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c649fb elementor-widget elementor-widget-video\" data-id=\"9c649fb\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/08\/15-mashable-header-search.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d6bf9f elementor-widget elementor-widget-text-editor\" data-id=\"3d6bf9f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are a couple of things to note here.\u00a0<\/p><p>The first is that the search bar isn\u2019t just represented by a magnifying glass. It\u2019s paired with the word \u201cSearch\u201d. While it might be a recognizable enough icon for many, it\u2019s best not to assume that everyone knows what it is. It may also be too small on its own for people to easily find it.<\/p><p>Also, notice how Mashable doesn\u2019t push users over to a new page to do their search. The search bar auto-populates results based on the query, which can lead to a better user experience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c79113 elementor-widget elementor-widget-heading\" data-id=\"6c79113\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Ecommerce<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3dfdad3 elementor-widget elementor-widget-text-editor\" data-id=\"3dfdad3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Websites with ecommerce functionality should always have ecommerce elements in either the main header or its utility bar. Here\u2019s how <a href=\"https:\/\/www.sephora.com\/\">Sephora<\/a> does it:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66dabe1 elementor-widget elementor-widget-image\" data-id=\"66dabe1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"68\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=68\/blog\/wp-content\/uploads\/2021\/08\/16-sephora-ecommerce-header.png\" class=\"attachment-full size-full wp-image-76180\" alt=\"sephora-ecommerce-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/16-sephora-ecommerce-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/16-sephora-ecommerce-header-300x28.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f9576f elementor-widget elementor-widget-text-editor\" data-id=\"4f9576f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are three ecommerce elements in the far-right corner:\u00a0<\/p><ol><li>Sign in\/Account (persona icon)<\/li><li>Wishlist (heart icon)<\/li><li>Cart (shopping bag icon)<\/li><\/ol><p>Many times, these ecommerce links are represented only by icons. However, if you\u2019re unsure if the icons you\u2019ve designed are easily recognizable or if they\u2019d benefit from being paired with a label, <a href=\"https:\/\/elementor.com\/blog\/a-b-testing\/\" target=\"_blank\" rel=\"noopener\">A\/B test them<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f16ea2 elementor-widget elementor-widget-menu-anchor\" data-id=\"2f16ea2\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"best-practices-for-website-header-design\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b12d0e elementor-widget elementor-widget-heading\" data-id=\"5b12d0e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Best Practices for Website Header Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce1c17b elementor-widget elementor-widget-text-editor\" data-id=\"ce1c17b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The header is a trusted piece of a website. While you want to give it a custom spin, you don\u2019t want to deviate too far from the established norms.\u00a0<\/p><p>Here are some tips for striking the right balance:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1241410 elementor-widget elementor-widget-heading\" data-id=\"1241410\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Use White Space Wisely<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d67ac52 elementor-widget elementor-widget-text-editor\" data-id=\"d67ac52\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We often focus on <a href=\"https:\/\/elementor.com\/blog\/white-space-web-design\/\" target=\"_blank\" rel=\"noopener\">how to use white space<\/a> to improve the design and content on the page. But white space is also a valuable asset in website header design.\u00a0<\/p><p>Let\u2019s look at how white space has impacted the <a href=\"https:\/\/www.bbc.com\/\">BBC<\/a> header:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2951ab2 elementor-widget elementor-widget-image\" data-id=\"2951ab2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"20\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=20\/blog\/wp-content\/uploads\/2021\/08\/17-bbc-website-header.png\" class=\"attachment-full size-full wp-image-76181\" alt=\"bbc-website-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/17-bbc-website-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/17-bbc-website-header-300x8.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0799b2 elementor-widget elementor-widget-text-editor\" data-id=\"d0799b2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For starters, there\u2019s substantial space between the sign-in button and the navigation. This gives the logo room to shine while encouraging visitors to optimize their experience by signing in.\u00a0<\/p><p>Next, you have the navigation with nine links equally spaced out and with fine dividing lines between them. There may be a lot of categories to select from, but the spacing will help visitors focus on each one-by-one.<\/p><p>Then you have the space built into the search bar. This is useful for practical purposes. By designing a wide search bar, it\u2019s going to be easier for users to find and use it.\u00a0<\/p><p>This design choice is also a smart one as it draws visitors\u2019 attention to the big white block at the end of the black bar. In essence, the search bar plays the role of the CTA.<\/p><p>You can take control of the spacing by <a href=\"https:\/\/elementor.com\/blog\/header-footer-builder\/\" target=\"_blank\" rel=\"noopener\">building a custom header with Elementor<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-06c3d71 elementor-widget elementor-widget-image\" data-id=\"06c3d71\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/08\/18-elementor-custom-header.png\" class=\"attachment-full size-full wp-image-76182\" alt=\"elementor-custom-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/18-elementor-custom-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/18-elementor-custom-header-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9cb110 elementor-widget elementor-widget-text-editor\" data-id=\"d9cb110\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can edit the margins and padding around each of the elements in your header as well as the padding around each element within the block (like in the navigation example above).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-708d9c5 elementor-widget elementor-widget-heading\" data-id=\"708d9c5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Create a Custom Header Design for Mobile<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-365d698 elementor-widget elementor-widget-text-editor\" data-id=\"365d698\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Generally, <a href=\"https:\/\/developers.google.com\/search\/mobile-sites\/mobile-first-indexing\">Google suggests that the mobile and desktop version of a website contain the same content<\/a>. I\u2019m not arguing with that. The header on desktop should have the same logo, links and info as the one on mobile.\u00a0<\/p><p>That said, the way they\u2019re designed should be different.\u00a0<\/p><p>Let\u2019s use <a href=\"https:\/\/www.chick-fil-a.com\/\">Chick-fil-A<\/a> as our example. Here is what the desktop header looks like when the Menu sub-navigation has been opened:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9089cce elementor-widget elementor-widget-image\" data-id=\"9089cce\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"388\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=388\/blog\/wp-content\/uploads\/2021\/08\/19-chickfila-desktop-navigation.png\" class=\"attachment-full size-full wp-image-76183\" alt=\"chickfila-desktop-navigation\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/19-chickfila-desktop-navigation.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/19-chickfila-desktop-navigation-300x162.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1cced2b elementor-widget elementor-widget-text-editor\" data-id=\"1cced2b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are four top-level navigation links. When one of them is opened, a sub-navigation appears as a horizontal row beneath them.\u00a0<\/p><p>It doesn\u2019t matter if it\u2019s 4 links or 14. That navigation won\u2019t fit into the header of a mobile site. So, that\u2019s why the mobile site does this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51dc740 elementor-widget elementor-widget-video\" data-id=\"51dc740\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/08\/20-chickfila-mobile-navigation.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e3bc88a elementor-widget elementor-widget-text-editor\" data-id=\"e3bc88a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The hamburger icon in the left corner opens to reveal a full-sized vertical header. The search bar, navigation links, Chick-fil-A One member area and the CTA live here.\u00a0<\/p><p>It\u2019s all the same header content from desktop, just with a more mobile-friendly presentation.\u00a0<\/p><p>You can use the Elementor custom header builder to do this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-12f43b6 elementor-widget elementor-widget-image\" data-id=\"12f43b6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"394\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=394\/blog\/wp-content\/uploads\/2021\/08\/21-elementor-mobile-header-editing.png\" class=\"attachment-large size-large wp-image-76186\" alt=\"elementor-mobile-header-editing\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/21-elementor-mobile-header-editing.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/21-elementor-mobile-header-editing-300x164.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d62a670 elementor-widget elementor-widget-text-editor\" data-id=\"d62a670\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Just switch your <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"Responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7358\">Responsive<\/a> Mode to the smartphone or tablet view and customize the layout, alignment, animation and anything else you need to for these smaller screens.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-14fd2fa elementor-widget elementor-widget-heading\" data-id=\"14fd2fa\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Keep the Header Well-Organized and Well-Structured<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a342074 elementor-widget elementor-widget-text-editor\" data-id=\"a342074\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are a number of reasons why someone would use the header on a website. Rather than make them pause and consider their options when they do organize the header so it\u2019s easy to find exactly what they\u2019re looking for \u2014 and quickly, too.\u00a0<\/p><p>Let\u2019s take a look at how <a href=\"https:\/\/asana.com\/\">Asana<\/a> does this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0957c78 elementor-widget elementor-widget-image\" data-id=\"0957c78\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"30\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=30\/blog\/wp-content\/uploads\/2021\/08\/22-asana-website-header.png\" class=\"attachment-full size-full wp-image-76187\" alt=\"asana-website-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/22-asana-website-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/22-asana-website-header-300x13.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b9c3c1b elementor-widget elementor-widget-text-editor\" data-id=\"b9c3c1b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The Asana logo sits in the far-left corner of the header. Directly beside it is the navigation. The equidistant spacing between the logo and all of the navigation links suggests that the logo (i.e. Home link) and navigation should be considered one whole. This is based on the design principle called the law of common region.<\/p><p>Over on the right, we have the language switcher icon, \u201cContact Sales\u201d, \u201cLog In\u201d as well as the \u201cTry for free\u201d CTA. It\u2019s a hodgepodge of options, but it makes sense that they\u2019d be relegated to the other end of the header.\u00a0<\/p><p>This isn\u2019t the only way Asana does a good job of organizing its header content. This is what the \u201cWhy Asana?\u201d sub-navigation looks like:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef7b681 elementor-widget elementor-widget-image\" data-id=\"ef7b681\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/08\/23-asana-sub-navigation.png\" class=\"attachment-full size-full wp-image-76188\" alt=\"asana-sub-navigation\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/23-asana-sub-navigation.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/23-asana-sub-navigation-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3944971 elementor-widget elementor-widget-text-editor\" data-id=\"3944971\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The mega-menu is formatted much in the way you\u2019d format a web page. The structure looks like this:\u00a0<\/p><ul><li>H2 tag: Why Asana?<\/li><li>H3 tags: OVERVIEW, FEATURES, ALL PLANS<\/li><li>H4 tags: Bolded headers under the H3s<\/li><\/ul><p>The colorful icons aren\u2019t really needed here. The navigation structure and the way it\u2019s laid out in the drop-down make it incredibly easy to peruse the header content.<\/p><p>By the way, you can also apply this idea of order and hierarchy when designing additional bars to go along with the header. Here\u2019s a good example from the <a href=\"https:\/\/www.eastbayinn.com\/\">East Bay Inn<\/a> site:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9aa155e elementor-widget elementor-widget-image\" data-id=\"9aa155e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"101\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=101\/blog\/wp-content\/uploads\/2021\/08\/24-eastbayinn-header-and-bars.png\" class=\"attachment-full size-full wp-image-76189\" alt=\"eastbayinn-header-and-bars\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/24-eastbayinn-header-and-bars.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/24-eastbayinn-header-and-bars-300x42.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c34b94 elementor-widget elementor-widget-text-editor\" data-id=\"6c34b94\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The main header bar is the largest and brightest of the bunch. The fonts are also thicker and larger in size than the others. By designing it this way, the main focus will go to the header and then visitors can refer to the other banners for additional information as needed.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32af018 elementor-widget elementor-widget-heading\" data-id=\"32af018\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Pick Simple Fonts That Are Easy To Read<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-523a761 elementor-widget elementor-widget-text-editor\" data-id=\"523a761\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The header is not the place to get creative with your font choices. Except for the logo, of course.\u00a0<\/p><p>Take <a href=\"https:\/\/dribbble.com\/\">Dribbble<\/a>, for example:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d54dbae elementor-widget elementor-widget-image\" data-id=\"d54dbae\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"42\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=42\/blog\/wp-content\/uploads\/2021\/08\/25-dribbble-header-design.png\" class=\"attachment-large size-large wp-image-76190\" alt=\"dribbble-header-design\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/25-dribbble-header-design.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/25-dribbble-header-design-300x18.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39990f7 elementor-widget elementor-widget-text-editor\" data-id=\"39990f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The handwritten font is a great choice for the logo. It&#8217;s unique, memorable and tells you a lot about the handcrafted nature of the work found on the website.\u00a0<\/p><p>However, a handwritten font \u2014 or any highly stylized font, to be honest \u2014 is going to be tough to read in a space as small as the header. So, it&#8217;s best to <a href=\"https:\/\/elementor.com\/blog\/web-fonts\/\" target=\"_blank\" rel=\"noopener\">choose a serif or sans serif web font<\/a> for your text links and info.\u00a0<\/p><p>Two other things to keep in mind:\u00a0<\/p><p>When it comes to size, aim for a minimum of 16 pixels \u2014 this goes for the main header as well as any bars attached to it.\u00a0<\/p><p>As for color, be careful with color contrast. There should be a ratio of 4.5:1 at the very least between your fonts and the background. Again, this goes for the header as well as any secondary information included around it.<\/p><p>If you&#8217;re building a completely custom header, you can set these fonts under the Style editor in Elementor. If you want to simply adopt the <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5404\">typography<\/a> and colors from the rest of your site, just make sure your Global Settings have them defined exactly as you need them to be:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f48a171 elementor-widget elementor-widget-image\" data-id=\"f48a171\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"789\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440,h=789\/blog\/wp-content\/uploads\/2021\/08\/26-elementor-global-site-settings.png\" class=\"attachment-full size-full wp-image-76191\" alt=\"elementor-global-site-settings\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1440\/blog\/wp-content\/uploads\/2021\/08\/26-elementor-global-site-settings.png 1440w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/26-elementor-global-site-settings-300x164.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/08\/26-elementor-global-site-settings-1024x561.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/08\/26-elementor-global-site-settings-768x421.png 768w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb44a01 elementor-widget elementor-widget-heading\" data-id=\"bb44a01\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Use Visual Elements Sparingly<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e0cbe0 elementor-widget elementor-widget-text-editor\" data-id=\"4e0cbe0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When it comes to using visual elements like icons, images and videos in the navigation, you should have a good reason for doing so.\u00a0<\/p><p>As we\u2019ve seen in a few examples above, icons can be useful for website header elements like the search bar, shopping cart, location finder, language switcher and so on. Just be careful about using icons that are uncommon or have ambiguous interpretations.\u00a0<\/p><p>As for images and videos, you might be better off without these bulky elements. If you\u2019re already struggling to keep your website loading at top speed, adding image files to your header (aside from the logo, of course) probably isn\u2019t the best idea.<\/p><p>That said, there are a few use cases where images may actually improve how quickly a visitor can get what they need from the header and, specifically, from the navigation.\u00a0<\/p><p>Here\u2019s a really great example from <a href=\"https:\/\/www.miniusa.com\/\">MINI USA<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6185132 elementor-widget elementor-widget-image\" data-id=\"6185132\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"391\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=391\/blog\/wp-content\/uploads\/2021\/08\/27-miniusa-header-navigation-images.png\" class=\"attachment-full size-full wp-image-76192\" alt=\"miniusa-header-navigation-images\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/27-miniusa-header-navigation-images.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/27-miniusa-header-navigation-images-300x163.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d4b3da1 elementor-widget elementor-widget-text-editor\" data-id=\"d4b3da1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Sure, MINI could\u2019ve just listed out the names of each of its models. However, the accompanying visuals are going to make selecting one from the bunch much easier.<\/p><p>Some other good use cases for imagery in the navigation are mega-menus and blogs or news sites.\u00a0<\/p><p>The one thing to avoid would be videos. Videos are meant to be watched and the header just isn\u2019t the ideal location for lengthy engagements (even if it\u2019s only 30 seconds long).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-809d203 elementor-widget elementor-widget-heading\" data-id=\"809d203\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Add Animation to the Navigation Only<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89a2368 elementor-widget elementor-widget-text-editor\" data-id=\"89a2368\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Animations don\u2019t always have to be over-the-top to be effective. Small animations applied to the navigation, for instance, can actually improve focus and engagement if done the right way.\u00a0<\/p><p>Let\u2019s look at some examples.\u00a0<\/p><p>This is from the <a href=\"https:\/\/www.flaquarium.org\/\">Florida Aquarium<\/a> website:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d999921 elementor-widget elementor-widget-video\" data-id=\"d999921\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/08\/28-floridaaquarium-navigation-animation.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-146b4d1 elementor-widget elementor-widget-text-editor\" data-id=\"146b4d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When a visitor hovers over one of the main navigation links, the rest of them fade out. That\u2019s the first animation effect that helps users focus on the available content.\u00a0<\/p><p>Then, when they hover over the secondary or tertiary level of links, the hovered page turns a different color than the rest.<\/p><p><a href=\"https:\/\/www.target.com\/c\/college-storage-organization-back-to\/-\/N-5tf7e\">Target<\/a> is another website that uses animation to bring focus to its navigation:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6afb612 elementor-widget elementor-widget-video\" data-id=\"6afb612\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/08\/29-target-slide-down-menu.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2c9081 elementor-widget elementor-widget-text-editor\" data-id=\"f2c9081\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With this one, we get a smooth gliding animation as the second-level navigation slides open. We also get a fading effect. However, this one applies to the page and not to the navigation.<\/p><p>You can easily apply animation to your navigation whether you\u2019re designing a custom header template or <a href=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\" target=\"_blank\" rel=\"noopener\">inserting a Nav Menu into the page<\/a> from your Elementor page builder:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-819cb11 elementor-widget elementor-widget-image\" data-id=\"819cb11\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/08\/30-elementor-layout-effects.png\" class=\"attachment-full size-full wp-image-76196\" alt=\"elementor-layout-effects\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/30-elementor-layout-effects.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/30-elementor-layout-effects-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b475a99 elementor-widget elementor-widget-text-editor\" data-id=\"b475a99\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You\u2019ll find these animations under Layout. While there are Motion Effects also available under Advanced, they\u2019ll animate the entire navigation menu at once. It\u2019s best to use animation in small doses to bring the selected page to life.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01ff3a6 elementor-widget elementor-widget-heading\" data-id=\"01ff3a6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">7. Make it stick\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d39f7b elementor-widget elementor-widget-text-editor\" data-id=\"6d39f7b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Unless you\u2019re designing web pages with a very little amount of content, adding a sticky header to your website is probably a good idea. Long single-page websites, as well as websites with long feeds (like news and ecommerce sites), would definitely benefit from one. This way, visitors will always have the header within arm\u2019s reach, no matter how far down the page they go.\u00a0<\/p><p>NNG has a few useful <a href=\"https:\/\/www.nngroup.com\/articles\/sticky-headers\/\" target=\"_blank\" rel=\"noopener\">tips on how to design sticky headers<\/a> so they don\u2019t get in your visitors\u2019 way or hurt their experience:\u00a0<\/p><ol><li>Shrink them up when the visitor starts to scroll.<\/li><li>Create a strong contrast between the header and content so visitors know where one ends and the other begins.<\/li><li>Keep animation small.<\/li><\/ol><p>The <a href=\"https:\/\/www.champion.com\/\">Champion<\/a> website follows these rules and you can see how it might help improve the shopping experience:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e99f142 elementor-widget elementor-widget-video\" data-id=\"e99f142\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/08\/31-champion-website-header.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abb1ecd elementor-widget elementor-widget-text-editor\" data-id=\"abb1ecd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you want to give this sticky effect a try, you\u2019ll need to be comfortable with editing your code (just a little bit).\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5cc6c1 elementor-widget elementor-widget-video\" data-id=\"e5cc6c1\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/08\/32-elementor-sticky-header.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fd0b12 read-more-link elementor-widget elementor-widget-heading\" data-id=\"6fd0b12\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/shrinking-sticky-header\/\">This Elementor tutorial will show you the step-by-step to make your header sticky.<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-992032b elementor-widget elementor-widget-heading\" data-id=\"992032b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">8. Consider the Header-to-Content Ratio When Using a Vertical Navigation<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5952ce1 elementor-widget elementor-widget-text-editor\" data-id=\"5952ce1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.nngroup.com\/articles\/vertical-nav\/\">NNG had some really great things to say about vertical navigations<\/a>:\u00a0<\/p><ul><li>You can add as many links as you need without them crowding the header.<\/li><li>You can easily scale your website\u2019s pages and not seriously impact the website header design.<\/li><li>They\u2019re easier to scan as visitors are accustomed to looking down the left rail of the website.<\/li><li>Users are well-acquainted with vertical navigation from all the time they spend on social media and in web apps.<\/li><li>A vertical navigation will create a consistent experience between desktop and mobile.\u00a0<\/li><\/ul><p>But there\u2019s the space issue to think about.\u00a0<\/p><p>The horizontal header is usually designed to be thin. Regardless, many sticky headers will shrink as visitors scroll down the page, so they don\u2019t end up taking up much real estate.\u00a0<\/p><p>Sidebar-style navigations don\u2019t really have that luxury unless they\u2019re designed to pop into view only when someone clicks on the hamburger menu icon. Like this one for <a href=\"https:\/\/thealfondinn.com\/#\">The Alfond Inn<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c35f67 elementor-widget elementor-widget-video\" data-id=\"7c35f67\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/08\/33-alfondinn-pullout-menu.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31df045 elementor-widget elementor-widget-text-editor\" data-id=\"31df045\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>That said, if you can make your sticky sidebar menu compact enough, you can keep it from becoming a disruption to the user experience. Here\u2019s a good example of how to do that from the <a href=\"https:\/\/staydh.com\/\">Delaney Hotel<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f38ed3a elementor-widget elementor-widget-image\" data-id=\"f38ed3a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"395\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=395\/blog\/wp-content\/uploads\/2021\/08\/34-delaneyhotel-vertical-navigation.png\" class=\"attachment-full size-full wp-image-76201\" alt=\"delaneyhotel-vertical-navigation\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/08\/34-delaneyhotel-vertical-navigation.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/08\/34-delaneyhotel-vertical-navigation-300x165.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc99265 elementor-widget elementor-widget-text-editor\" data-id=\"cc99265\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The sidebar is only 250 px wide compared to the 1200 px on the site.<\/p><p><a href=\"https:\/\/elementor.com\/blog\/how-to-create-sticky-sidebar-menu\/\" target=\"_blank\" rel=\"noopener\"><strong>This tutorial will walk you through the process of creating a sticky sidebar navigation for your website.<\/strong><\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8db1d0 elementor-widget elementor-widget-heading\" data-id=\"b8db1d0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">9. Make the Header Transparent Only When It Makes Sense To<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df44135 elementor-widget elementor-widget-text-editor\" data-id=\"df44135\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Transparent headers are ones where the elements are still there \u2014 the logo, navigation, CTA and so on \u2014 but there\u2019s no solid background behind them. As you can imagine, this can be a tricky design choice to pull off with some sites.\u00a0<\/p><p>One of the big reasons why is because text can be very difficult to read if it appears in front of a busy background or one with a low color contrast. So, unless the header completely disappears from sight as the visitor scrolls, you run the risk of the navigation and other text in it becoming unreadable when they scroll over certain parts.\u00a0<\/p><p>That said, there are some websites where this design choice works.\u00a0<\/p><p>Here\u2019s how the <a href=\"https:\/\/contidisanbonifacio.com\/\">Conti di San Bonifacio<\/a> solves that problem:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18371ca elementor-widget elementor-widget-video\" data-id=\"18371ca\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/08\/35-contisanbonifacio-transparent-website-header.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0997367 elementor-widget elementor-widget-text-editor\" data-id=\"0997367\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The header only consists of a white logo in the left corner and a white hamburger menu icon in the right. At the top of every page is a video or image that\u2019s rich in color that contrasts well with the white. And since the site is so heavy in visuals, it\u2019s very rare the header\u2019s visibility is compromised.\u00a0<\/p><p>If you like this minimal website header design style and your theme doesn\u2019t automatically provide you with a transparent background, <a href=\"https:\/\/elementor.com\/help\/sticky-transparent-header\/\" target=\"_blank\" rel=\"noopener\">learn how to set one up on your own with this Elementor tutorial<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79fbc7c elementor-widget elementor-widget-heading\" data-id=\"79fbc7c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Grab Attention and Increase Engagement With Custom Header Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c45281 elementor-widget elementor-widget-text-editor\" data-id=\"1c45281\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The header is one of the most important elements of <a href=\"https:\/\/elementor.com\/blog\/create-website-with-wordpress\/\">your website<\/a>, as the ratio between the space it takes and the benefits it gives is unparalleled.<\/p><p>Headers serve several purposes. They provide an overview of the whole website and easy navigation via links, well-designed mega menus, and the search bar. They are also a great place to promote your brand with company logos and the right typography and color schemes. Lastly, they can maximize engagement via CTAs, quick access to ecommerce, and animations that highlight these elements.\u00a0<\/p><p>We\u2019ve discussed the different types of headers, and the best practices for creating a custom header and we provided examples. So, follow this guide and create your own, unique header for better engagements and brand awareness.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Headers are paramount to the success of your website. They make navigation easy, your brand visible and they maximize engagement via CTAs. Discover how to design website headers correctly to elevate your website and brand.<\/p>\n","protected":false},"author":370665,"featured_media":76158,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[167,32],"tags":[79],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-76099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-team-writes","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Website Header Design in 2024: Examples &amp; Best Practices<\/title>\n<meta name=\"description\" content=\"Headers are paramount to the success of your website. Discover how to design website headers correctly to elevate your website and brand.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/website-header-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Header Design in 2024: Examples &amp; Best Practices\" \/>\n<meta property=\"og:description\" content=\"Headers are paramount to the success of your website. Discover how to design website headers correctly to elevate your website and brand.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/website-header-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-23T04:43:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/08\/1200_628_text-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"5001\" \/>\n\t<meta property=\"og:image:height\" content=\"2617\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mark Gerkules\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Gerkules\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/\"},\"author\":{\"name\":\"Mark Gerkules\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/0ae11238cf58e3c00802db1c1606e2c5\"},\"headline\":\"Website Header Design in 2024: Examples &amp; Best Practices\",\"datePublished\":\"2021-08-23T04:43:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/\"},\"wordCount\":4040,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/08\/1200_628-1.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Elementor Team Writes\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/website-header-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/\",\"url\":\"https:\/\/elementor.com\/blog\/website-header-design\/\",\"name\":\"Website Header Design in 2024: Examples & Best Practices\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/08\/1200_628-1.png\",\"datePublished\":\"2021-08-23T04:43:07+00:00\",\"description\":\"Headers are paramount to the success of your website. Discover how to design website headers correctly to elevate your website and brand.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/website-header-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/08\/1200_628-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/08\/1200_628-1.png\",\"width\":5001,\"height\":2617},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/website-header-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Website Header Design in 2024: Examples &amp; Best Practices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/0ae11238cf58e3c00802db1c1606e2c5\",\"name\":\"Mark Gerkules\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ef084535520a902a2d2f1da4dc3498448604b996ea4a10c6ec2238865dd737db?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ef084535520a902a2d2f1da4dc3498448604b996ea4a10c6ec2238865dd737db?s=96&d=mm&r=g\",\"caption\":\"Mark Gerkules\"},\"description\":\"Mark is a Web Designer at Elementor. Apart from his love for UI\/UX, he loves football, traveling around the world, and a good schnitzel.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/user-5e1adb7e6ea5a\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Header Design in 2024: Examples & Best Practices","description":"Headers are paramount to the success of your website. Discover how to design website headers correctly to elevate your website and brand.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/website-header-design\/","og_locale":"en_US","og_type":"article","og_title":"Website Header Design in 2024: Examples & Best Practices","og_description":"Headers are paramount to the success of your website. Discover how to design website headers correctly to elevate your website and brand.","og_url":"https:\/\/elementor.com\/blog\/website-header-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-08-23T04:43:07+00:00","og_image":[{"width":5001,"height":2617,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/08\/1200_628_text-1.png","type":"image\/png"}],"author":"Mark Gerkules","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Mark Gerkules"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/website-header-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/website-header-design\/"},"author":{"name":"Mark Gerkules","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/0ae11238cf58e3c00802db1c1606e2c5"},"headline":"Website Header Design in 2024: Examples &amp; Best Practices","datePublished":"2021-08-23T04:43:07+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/website-header-design\/"},"wordCount":4040,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/website-header-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/08\/1200_628-1.png","keywords":["Build"],"articleSection":["Elementor Team Writes","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/website-header-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/website-header-design\/","url":"https:\/\/elementor.com\/blog\/website-header-design\/","name":"Website Header Design in 2024: Examples & Best Practices","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/website-header-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/website-header-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/08\/1200_628-1.png","datePublished":"2021-08-23T04:43:07+00:00","description":"Headers are paramount to the success of your website. Discover how to design website headers correctly to elevate your website and brand.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/website-header-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/website-header-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/website-header-design\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/08\/1200_628-1.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/08\/1200_628-1.png","width":5001,"height":2617},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/website-header-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"Website Header Design in 2024: Examples &amp; Best Practices"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/0ae11238cf58e3c00802db1c1606e2c5","name":"Mark Gerkules","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ef084535520a902a2d2f1da4dc3498448604b996ea4a10c6ec2238865dd737db?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ef084535520a902a2d2f1da4dc3498448604b996ea4a10c6ec2238865dd737db?s=96&d=mm&r=g","caption":"Mark Gerkules"},"description":"Mark is a Web Designer at Elementor. Apart from his love for UI\/UX, he loves football, traveling around the world, and a good schnitzel.","url":"https:\/\/elementor.com\/blog\/author\/user-5e1adb7e6ea5a\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/76099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/370665"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=76099"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/76099\/revisions"}],"predecessor-version":[{"id":93934,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/76099\/revisions\/93934"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/76158"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=76099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=76099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=76099"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=76099"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=76099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}