{"id":25842,"date":"2018-05-21T05:21:44","date_gmt":"2018-05-21T09:21:44","guid":{"rendered":"https:\/\/feastdesignco.com\/?p=25842"},"modified":"2020-04-24T05:30:43","modified_gmt":"2020-04-24T09:30:43","slug":"rethinking-the-header","status":"publish","type":"post","link":"https:\/\/feastdesignco.com\/rethinking-the-header\/","title":{"rendered":"Rethinking the Header"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Update 2019\/05\/14: we'll be taking this another step further in 2019 with <a href=\"https:\/\/feastdesignco.com\/rethinking-the-nav-menu\/\">rethinking the nav menu<\/a>.<\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Update 2019\/12\/01: this has been completed and released as the <a href=\"https:\/\/feastdesignco.com\/modern-mobile-menu\/\">Modern Mobile Menu<\/a><\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Update 2019\/12\/06: you should <a href=\"https:\/\/feastdesignco.com\/add-an-h1-tag-to-your-homepage\/\">add an h1 tag to your homepage<\/a>.<\/p><\/blockquote>\n\n\n\n<p>A very common question we get from customers is how to edit the header image, what's the best practices for sizing, and why is it so complicated. The truth is, it shouldn't be. This isn't a bashing of how Genesis is set up and they likely had good reasons for doing things their way, but the way it's set up causes an unnecessary amount of support requests.<\/p>\n\n\n\n<p>We'll go over the issues we're looking to solve, and present a solution. The issues the header image before 3.1.6 are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/support.google.com\/webmasters\/answer\/114016\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"improper use of a background image according to Google's guidelines (opens in a new tab)\">improper use of a background image according to Google's guidelines<\/a>, rather than foreground image<\/li><li>improper use of h1 header tag for site-wide header (this is reserved for the&nbsp;<strong>post title<\/strong>)<\/li><li>improper use of negative margins to hide the header text, <a rel=\"noreferrer noopener\" aria-label=\"which is explicitly against Google's guidelines\u2028 (opens in a new tab)\" href=\"https:\/\/support.google.com\/webmasters\/answer\/66353?hl=en\" target=\"_blank\">which is explicitly against Google's guidelines<\/a><\/li><li>header sizes being too large, reducing above-the-fold content and slowing pagespeed loading times<\/li><\/ul>\n\n\n\n<p>All themes version 3.1.6 have the modernized header implementation.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Update 2019\/09\/19: we've released the updated, optimized <a href=\"https:\/\/feastdesignco.com\/modern-mobile-menu\/\">Modern Mobile Menu<\/a> in the Feast Plugin.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Background vs. Foreground Image<\/h2>\n\n\n\n<p>Standard practice (and the behavior users expect) is to be able to click the logo to head back to the home page. Background images aren't clickable, foreground images are.<\/p>\n\n\n\n<p>Foreground images are also much more straight-forward and intuitive to customize with CSS than background images.<\/p>\n\n\n\n<p>Genesis uses a background-image, which&nbsp;has unintuitive styling properties and is difficult to modify, so we'll be changing this to a regular foreground image using the &lt;img&gt; tag.<\/p>\n\n\n\n<p>As a best practice, the header image should be no more than 100px tall, and not be statically positioned (ie. they should not scroll down the page with you). Logos and header images are&nbsp;<em>only important to the website owner, not the readers<\/em>.<\/p>\n\n\n\n<p>Update 2018\/08\/13: header images should be no more than 150px max, per best practices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Website Title Text<\/h2>\n\n\n\n<p>Skipping the history of website titles and how they've affected search engines and changed over the years, we'll jump straight to what we're seeing with modern websites:<\/p>\n\n\n\n<p>Site-wide title text is basically irrelevant and ignored - it's now a background item and largely unimportant as page-weight has surpassed domain-weight. This means that site-wide elements have little-to-no impact on the ranking of an individual page.<\/p>\n\n\n\n<p>We can drop title text and simply use an image instead, with appropriate alt text.<\/p>\n\n\n\n<p>This means that the <strong>H1 tag shouldn't be used for the website title<\/strong>, since it's purpose is to denote importance, and should instead be saved for the content for that specific page.&nbsp;Sidenote: This may not be a big issue, as search engines seem to be identifying what parts of the website are generic and unimportant (header, sidebar, footer) and applying their own down-weighing versus the actual content part of the page.<\/p>\n\n\n\n<p>This is currently handled by Genesis by adding the site-title to the header and&nbsp;<strong>hiding it off screen using CSS<\/strong>. This is an <a href=\"https:\/\/support.google.com\/webmasters\/answer\/66353?hl=en\">explicit violation of Google's Webmaster Guidelines<\/a>.<\/p>\n\n\n\n<p>Another benefit is that this will remove custom fonts people embed for just the title tag. These are problematic because:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Embedding external fonts slows website load speeds<\/li><li>Website visitors are not&nbsp;<em>really<\/em> going to notice a custom font - this is for the website owner's ego more than anything<\/li><li>They may violate GDPR - no one is really sure right now but you can Google it (how's that for irony)<\/li><\/ul>\n\n\n\n<p>The solution to using a pretty google font for your website header is to simply type it into the google font's preview page, screenshot it and upload it at whatever size you'd like to display it at. Full tutorial at: <a href=\"https:\/\/feastdesignco.com\/how-to\/foodie-pro-tutorials\/custom-fonts-foodie-pro\/\">https:\/\/feastdesignco.com\/how-to\/foodie-pro-tutorials\/custom-fonts-foodie-pro\/<\/a><\/p>\n\n\n\n<p>We recommend no more than 100px high, to preserve above-the-fold screen space for your post content.<\/p>\n\n\n\n<p><strong>Q: Isn't replacing an external google font with an image redundant?<\/strong><\/p>\n\n\n\n<p>It's an interesting question, but removing an&nbsp;<em>external<\/em> resource with an&nbsp;<em>internal<\/em> resource is a good move. External resources take longer to load because browsers need to go through a lookup process, which often takes 100-150ms, while downloading an internal image (header) rarely takes more than 20-30ms.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Header Size<\/h2>\n\n\n\n<p>One of the more frustrating aspects of customizing the theme is having to hard-code in the dimensions into the functions.php file - this not only gets overwritten in updates, but is also bad web practices. Stylistic decisions such as image sizing should be completely controlled by CSS, and not coding. This may be due in part to the above problem of using background-image instead of a regular &lt;img&gt; tag.<\/p>\n\n\n\n<p>The solution here is simple: We'll let customers upload their own image to the \"Customize\" admin screen, and <strong>display it at whatever resolution they upload it at<\/strong>. This means that the size decision is made before ever uploading, and doesn't require editing code.<\/p>\n\n\n\n<p>One thing we'll need to factor in, is mobile-sizes - setting a max-width property based on the viewport should allow graceful downsizing.<\/p>\n\n\n\n<p>As a best practice, we'll also <strong>recommend customers use as small of a logo as possible<\/strong>. Generally speaking, the website owner is the only person who cares about the website's logo, and it provides no value to the website visitor. Also, smaller images load quicker and require less bandwidth.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>All formatting should be controlled 100% in a single location by the stylesheets, no inline or embedded CSS\n<ul>\n<li>Zero reason to require editing PHP files or hard-coding for changing headers<\/li>\n<li>Do not use Google Fonts - slows page loading, visitors do not care<\/li>\n<\/ul>\n<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>We'll remove the title text from the header of the website (not to be confused with the &lt;head&gt; metadata)\n<ol>\n<li>It's no longer important to search engines, and hiding it off-screen using CSS is explicitly forbidden<\/li>\n<\/ol>\n<\/li><li>We'll use a regular &lt;img&gt; instead of a background-image, with the title in the proper \"alt\" attribute\n<ol>\n<li>As a best practice, this should be small since it provides little-to-no value to visitors<\/li>\n<\/ol>\n<\/li><li>We'll link the header to the homepage<\/li><\/ol>\n\n\n\n<p>Considering all the above, the simplest course of action is to remove the Genesis functions handling the header\/title and replace it with a simple image, able to be selected in the \"Customize\" admin panel. The image should simply display at whatever size the user uploads it at (whether that's 150x150 or 1000x150), with max-width adjustments based on viewport (mobile).<\/p>\n\n\n\n<p>This apparently has been addressed previously (in 2013 of all things) in <a href=\"https:\/\/blackhillswebworks.com\/2013\/05\/10\/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo\/\" target=\"_blank\" rel=\"noopener noreferrer\">this post by bhwebworks<\/a>. We'll use the blackhillwebworks code with a slight modification - using the header selected in the \"Customize\" panel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Image Quality &amp; Blurriness<\/h2>\n\n\n\n<p>You need to crop and save your logo image in your photo editing software (eg. photoshop, GIMP)&nbsp;<span style=\"text-decoration: underline;\">before<\/span> you upload the image. Make sure to use the \"Skip Cropping\" button when selecting the header. You may need to try a few different image quality settings to get the quality you desire.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customizing The Theme<\/h2>\n\n\n\n<p>We do not recommend customizing the theme to apply these changes because it's a waste of time - simply update your theme to the latest version.<\/p>\n\n\n\n<p>However, if it has to be done...<\/p>\n\n\n\n<p>For older versions of the theme that use the old header behavior, customers will need to customize the theme. As a customization, customers&nbsp; should use the <a href=\"https:\/\/feastdesignco.com\/codesnippets\" target=\"_blank\" rel=\"noopener noreferrer\">Code Snippets Plugin<\/a>&nbsp;to preserve the change when updating the theme, with the following code:\n<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**\n * Filter the genesis_seo_site_title function to use an image for the logo instead of a background image\n * \n * The genesis_seo_site_title function is located in genesis\/lib\/structure\/header.php\n * Original credit http:\/\/blackhillswebworks.com\/?p=4144\n * Add to feast-customizations-plugin to preserve change during updates, not functions.php\n *\n *\/\n\n\tadd_filter( 'genesis_seo_title', 'feast_filter_genesis_seo_site_title', 10, 2 );\n\n\tfunction feast_filter_genesis_seo_site_title( $title, $inside ){\n\t \n\t\t$child_inside = sprintf( '&lt;a title=\"%s\" href=\"%s\"&gt;&lt;img title=\"%s\" src=\"'. get_header_image() .'\" alt=\"%s\" \/&gt;', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ), esc_attr( get_bloginfo( 'name' ) ) );\n\t \n\t\t$title = str_replace( $inside, $child_inside, $title );\n\t \n\t\treturn $title;\n\t\t\n}<\/pre>\n\n\n\n<p>With the code portion changed, we just need to clean up the CSS. In Foodie Pro up to version 3.1.4 you'll want to remove the following from the theme's <strong>Admin &gt;&nbsp;Appearance &gt; Editor &gt; styles.css<\/strong>:\n<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/*\n.header-image .site-description,\n.header-image .site-title a {\n\tdisplay: block;\n\ttext-indent: -9999px;\n}\n*\/\n\/* Logo, hide text *\/\n\/*\n.header-image .site-title &gt; a {\n\t-webkit-background-size: contain !important;\n\tbackground-size: contain !important;\n\tdisplay: block;\n\theight: 170px;\n\tmargin: 10px auto;\n\tmax-width: 320px;\n\ttext-indent: -9999px;\n}\n*\/\n<\/pre>\n\n\n\n<p>Note: Because you're removing this form the theme's stylesheet, it will be over-ridden when you update the theme in the future. This is fine because it won't be present in future versions of the theme anyways.<\/p>\n\n\n\n<p>And finally, remove the inline CSS from that's loading the background image:\n<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**\n * Remove the genesis_custom_header_style - bad design practice to use code as styling - this should have been in the CSS\n * Foodie Pro versions after 3.1.4 include this by default, along with other changes \n *\n * The genesis_seo_site_title function is located in genesis\/lib\/structure\/header.php\n *\n *\/\n\n\tadd_action('after_setup_theme','feast_remove_theme_filter');\n\tfunction feast_remove_theme_filter(){\n\t\tremove_action( 'wp_head', 'genesis_custom_header_style');\t\t\t\n\t}\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Default Setting<\/h2>\n\n\n\n<p>This will become the default header behaviour for Feast themes, starting with:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>FoodiePro v.3.1.6<\/li><li>BrunchPro v.3.1.7<\/li><li>CookdPro v.3.1.7<\/li><li>CravingsPro v.3.1.7<\/li><li>SeasonedPro v.3.1.7<\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/feastdesignco.com\/shop\/account\/downloads\/\">Log in to your account to get the latest version of your theme<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comments and feedback are encouraged!<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Should the pin=\"nopin\" tag be added to avoid having the header inadvertently pinned?\n<ul>\n<li>Update 2018\/07\/31 - yes, following testing, pin=\"nopin\" has been added to the header<\/li>\n<\/ul>\n<\/li><li>Facebook should pull the correct image via Yoast's settings - is there a fb-thumbnail=\"nothumb\" tag?<\/li><li>Update 2018\/08\/11 - Added fall-back text option instead of forcing use of image for version 3.1.7+<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Update 2019\/05\/14: we'll be taking this another step further in 2019 with rethinking the nav menu. Update 2019\/12\/01: this has been completed and released as the Modern Mobile Menu Update 2019\/12\/06: you should add an h1 tag to your homepage. A very common question we get from customers is how to edit the header image,...<\/p>\n","protected":false},"author":1827,"featured_media":27125,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[91],"tags":[],"class_list":["post-25842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-and-appearance"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Rethinking the Header - Feast Design Co.<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/feastdesignco.com\/rethinking-the-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rethinking the Header\" \/>\n<meta property=\"og:description\" content=\"Update 2019\/05\/14: we&#039;ll be taking this another step further in 2019 with rethinking the nav menu. Update 2019\/12\/01: this has been completed and released as the Modern Mobile Menu Update 2019\/12\/06: you should add an h1 tag to your homepage. A very common question we get from customers is how to edit the header image,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/feastdesignco.com\/rethinking-the-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Feast Design Co.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/feastdesignco\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-21T09:21:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-24T09:30:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/feastdesignco.com\/wp-content\/uploads\/2018\/05\/rethinking-the-foodie-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"882\" \/>\n\t<meta property=\"og:image:height\" content=\"626\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Skylar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Skylar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/\"},\"author\":{\"name\":\"Skylar\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#\\\/schema\\\/person\\\/28edb20a81f10b62443c21ec80186098\"},\"headline\":\"Rethinking the Header\",\"datePublished\":\"2018-05-21T09:21:44+00:00\",\"dateModified\":\"2020-04-24T09:30:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/\"},\"wordCount\":1489,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/rethinking-the-foodie-header.png\",\"articleSection\":[\"Food Blog Design and Appearance\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/\",\"name\":\"Rethinking the Header - Feast Design Co.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/rethinking-the-foodie-header.png\",\"datePublished\":\"2018-05-21T09:21:44+00:00\",\"dateModified\":\"2020-04-24T09:30:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/#primaryimage\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/rethinking-the-foodie-header.png\",\"contentUrl\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/rethinking-the-foodie-header.png\",\"width\":882,\"height\":626},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/rethinking-the-header\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/feastdesignco.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Food Blog Design and Appearance\",\"item\":\"https:\\\/\\\/feastdesignco.com\\\/category\\\/design-and-appearance\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Rethinking the Header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#website\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/\",\"name\":\"Feast Design Co.\",\"description\":\"WordPress Themes for Food &amp; Lifestyle Bloggers\",\"publisher\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/feastdesignco.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#organization\",\"name\":\"Feast Design Co.\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/feast_script.jpg\",\"contentUrl\":\"https:\\\/\\\/feastdesignco.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/feast_script.jpg\",\"width\":800,\"height\":800,\"caption\":\"Feast Design Co.\"},\"image\":{\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/feastdesignco\\\/\",\"https:\\\/\\\/x.com\\\/feastdesignco\",\"https:\\\/\\\/www.instagram.com\\\/feastdesignco\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/feastdesignco.com\\\/#\\\/schema\\\/person\\\/28edb20a81f10b62443c21ec80186098\",\"name\":\"Skylar\",\"sameAs\":[\"https:\\\/\\\/feastdesignco.com\\\/about-skylar-bowker\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Rethinking the Header - Feast Design Co.","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:\/\/feastdesignco.com\/rethinking-the-header\/","og_locale":"en_US","og_type":"article","og_title":"Rethinking the Header","og_description":"Update 2019\/05\/14: we'll be taking this another step further in 2019 with rethinking the nav menu. Update 2019\/12\/01: this has been completed and released as the Modern Mobile Menu Update 2019\/12\/06: you should add an h1 tag to your homepage. A very common question we get from customers is how to edit the header image,...","og_url":"https:\/\/feastdesignco.com\/rethinking-the-header\/","og_site_name":"Feast Design Co.","article_publisher":"https:\/\/www.facebook.com\/feastdesignco\/","article_published_time":"2018-05-21T09:21:44+00:00","article_modified_time":"2020-04-24T09:30:43+00:00","og_image":[{"width":882,"height":626,"url":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2018\/05\/rethinking-the-foodie-header.png","type":"image\/png"}],"author":"Skylar","twitter_misc":{"Written by":"Skylar","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/#article","isPartOf":{"@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/"},"author":{"name":"Skylar","@id":"https:\/\/feastdesignco.com\/#\/schema\/person\/28edb20a81f10b62443c21ec80186098"},"headline":"Rethinking the Header","datePublished":"2018-05-21T09:21:44+00:00","dateModified":"2020-04-24T09:30:43+00:00","mainEntityOfPage":{"@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/"},"wordCount":1489,"commentCount":0,"publisher":{"@id":"https:\/\/feastdesignco.com\/#organization"},"image":{"@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/#primaryimage"},"thumbnailUrl":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2018\/05\/rethinking-the-foodie-header.png","articleSection":["Food Blog Design and Appearance"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/feastdesignco.com\/rethinking-the-header\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/","url":"https:\/\/feastdesignco.com\/rethinking-the-header\/","name":"Rethinking the Header - Feast Design Co.","isPartOf":{"@id":"https:\/\/feastdesignco.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/#primaryimage"},"image":{"@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/#primaryimage"},"thumbnailUrl":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2018\/05\/rethinking-the-foodie-header.png","datePublished":"2018-05-21T09:21:44+00:00","dateModified":"2020-04-24T09:30:43+00:00","breadcrumb":{"@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/feastdesignco.com\/rethinking-the-header\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/#primaryimage","url":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2018\/05\/rethinking-the-foodie-header.png","contentUrl":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2018\/05\/rethinking-the-foodie-header.png","width":882,"height":626},{"@type":"BreadcrumbList","@id":"https:\/\/feastdesignco.com\/rethinking-the-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/feastdesignco.com\/"},{"@type":"ListItem","position":2,"name":"Food Blog Design and Appearance","item":"https:\/\/feastdesignco.com\/category\/design-and-appearance\/"},{"@type":"ListItem","position":3,"name":"Rethinking the Header"}]},{"@type":"WebSite","@id":"https:\/\/feastdesignco.com\/#website","url":"https:\/\/feastdesignco.com\/","name":"Feast Design Co.","description":"WordPress Themes for Food &amp; Lifestyle Bloggers","publisher":{"@id":"https:\/\/feastdesignco.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/feastdesignco.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/feastdesignco.com\/#organization","name":"Feast Design Co.","url":"https:\/\/feastdesignco.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/feastdesignco.com\/#\/schema\/logo\/image\/","url":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2016\/10\/feast_script.jpg","contentUrl":"https:\/\/feastdesignco.com\/wp-content\/uploads\/2016\/10\/feast_script.jpg","width":800,"height":800,"caption":"Feast Design Co."},"image":{"@id":"https:\/\/feastdesignco.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/feastdesignco\/","https:\/\/x.com\/feastdesignco","https:\/\/www.instagram.com\/feastdesignco\/"]},{"@type":"Person","@id":"https:\/\/feastdesignco.com\/#\/schema\/person\/28edb20a81f10b62443c21ec80186098","name":"Skylar","sameAs":["https:\/\/feastdesignco.com\/about-skylar-bowker"]}]}},"taxonomy_info":{"category":[{"value":91,"label":"Food Blog Design and Appearance"}]},"featured_image_src_large":["https:\/\/feastdesignco.com\/wp-content\/uploads\/2018\/05\/rethinking-the-foodie-header-720x511.png",720,511,true],"author_info":{"display_name":"Skylar","author_link":"https:\/\/feastdesignco.com\/author\/skylar\/"},"comment_info":0,"category_info":[{"term_id":91,"name":"Food Blog Design and Appearance","slug":"design-and-appearance","term_group":0,"term_taxonomy_id":91,"taxonomy":"category","description":"","parent":0,"count":51,"filter":"raw","cat_ID":91,"category_count":51,"category_description":"","cat_name":"Food Blog Design and Appearance","category_nicename":"design-and-appearance","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/posts\/25842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/users\/1827"}],"replies":[{"embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/comments?post=25842"}],"version-history":[{"count":0,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/posts\/25842\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/media\/27125"}],"wp:attachment":[{"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/media?parent=25842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/categories?post=25842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/feastdesignco.com\/wp-json\/wp\/v2\/tags?post=25842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}