{"id":696,"date":"2017-06-01T11:37:12","date_gmt":"2017-06-01T11:37:12","guid":{"rendered":"http:\/\/genesiswp.net\/?p=79"},"modified":"2019-08-17T05:16:12","modified_gmt":"2019-08-17T05:16:12","slug":"relocate-responsive-menu-genesis-sample","status":"publish","type":"post","link":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/","title":{"rendered":"How to Relocate Responsive Menu in Genesis Sample"},"content":{"rendered":"<div class=\"content-box-yellow\"><strong>Note<\/strong>: After the release of <a href=\"https:\/\/studiopress.github.io\/genesis\/changelog\/\">Genesis 3.0.0<\/a>, Genesis Sample Theme comes with the inline responsive menu baked in. However, if you are using an older version of the Genesis Sample Theme, the following tutorial may help you. Alternatively, follow <a href=\"http:\/\/leaguewp.com\/remove-word-menu-mobile-menu-genesis\/\">this guide<\/a>, if you want to <a href=\"http:\/\/leaguewp.com\/remove-word-menu-mobile-menu-genesis\/\">remove the &#8220;MENU&#8221; label<\/a> from the menu in the Genesis Sample Theme.<\/div>\n<p>If you&#8217;re a Genesis Framework user, you may have noticed that the responsive menu in the <a href=\"http:\/\/leaguewp.com\/go\/genesis\/\">Genesis Sample theme<\/a> resides below the header. But, what if you want to relocate it to the inside header so it&#8217;s aligned to the right of your site header while the site title is aligned left?<\/p>\n<figure id=\"attachment_81\" aria-describedby=\"caption-attachment-81\" style=\"width: 842px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-81\" src=\"http:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Genesis-Framework-\u2013-Supports-HTML5-Responsive-Design.jpeg\" alt=\"\" width=\"842\" height=\"402\" \/><figcaption id=\"caption-attachment-81\" class=\"wp-caption-text\">Responsive Menu Below Header in Genesis Sample.<\/figcaption><\/figure>\n<p>Sridhar Katkam&#8217;s <a href=\"https:\/\/sridharkatakam.com\/genesis-starter-child-theme\/\">Genesis Starter Child Theme<\/a> which was released in 2016, has added some cool new features. In fact, these days, I use his version of Genesis Sample theme rather than the original Genesis Sample theme available on StudioPress. If you&#8217;re not aware of the modified theme, you should check it out <a href=\"https:\/\/sridharkatakam.com\/genesis-starter-child-theme\/\">here<\/a>.<\/p>\n<p>One of the major structural changes in Sridhar&#8217;s starter theme is that it uses WordPress&#8217;s default blog template rather than the blog template offered in Genesis Sample. If you&#8217;re wondering why, then you should probably read <a href=\"http:\/\/www.billerickson.net\/dont-use-genesis-blog-template\/\">Bill&#8217;s blog post<\/a>.<\/p>\n<p>What I really like about theme is the Inline Mobile Responsive Hamburger menu. Therefore, I&#8217;d highly recommend using Sridhar&#8217;s Genesis Starter Child theme for your custom project if you want to do it right.<\/p>\n<p>First, remove or comment out the Following Line from Your Functions.php. It should be found on Line 117<\/p>\n<p><strong>add_theme_support( &#8216;genesis-menus&#8217;, array( &#8216;primary&#8217; =&gt; __( &#8216;After Header Menu&#8217;, &#8216;genesis-sample&#8217; ), &#8216;secondary&#8217; =&gt; __( &#8216;Footer Menu&#8217;, &#8216;genesis-sample&#8217; ) ) );<\/strong><\/p>\n<p>Then, add the following code snippet in your functions.php.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/topleague\/92fc12bf4ee6a97dda5ed0b490971c85.js\"><\/script><\/p>\n<p>Add the following code at the bottom of your CSS file. If you don&#8217;t want to make any changes in your CSS file, consider adding the code to WordPress&#8217; Additional CSS template.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/topleague\/e8ce3764edda99f5f3fdbbaaff3c39be.js\"><\/script><\/p>\n<p>That&#8217;s it. You should now see a hamburger responsive menu in all its glory. Want to see it in action? Resize your browser and see my blog.<\/p>\n<p>Let me know if you have any questions.<\/p>\n<p>Note: Depending on your particular theme, you may have to make a slight modification in the above code to match your theme design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Relocate Genesis Sample responsive menu to inside header so it&#8217;s aligned to the right of your site header while the site title is aligned left.<\/p>\n","protected":false},"author":2,"featured_media":967,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"inline_featured_image":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Relocate Responsive Menu in Genesis Sample - League WP<\/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:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Relocate Responsive Menu in Genesis Sample - League WP\" \/>\n<meta property=\"og:description\" content=\"Relocate Genesis Sample responsive menu to inside header so it&#039;s aligned to the right of your site header while the site title is aligned left.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/\" \/>\n<meta property=\"og:site_name\" content=\"League WP\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-01T11:37:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-17T05:16:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"950\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Susanta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@league_wp\" \/>\n<meta name=\"twitter:site\" content=\"@league_wp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Susanta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/\"},\"author\":{\"name\":\"Susanta\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/c84e33b8731dd0a38753b3b74c664b37\"},\"headline\":\"How to Relocate Responsive Menu in Genesis Sample\",\"datePublished\":\"2017-06-01T11:37:12+00:00\",\"dateModified\":\"2019-08-17T05:16:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/\"},\"wordCount\":415,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/leaguewp.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg\",\"articleSection\":[\"Guides\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/\",\"url\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/\",\"name\":\"How to Relocate Responsive Menu in Genesis Sample - League WP\",\"isPartOf\":{\"@id\":\"https:\/\/leaguewp.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg\",\"datePublished\":\"2017-06-01T11:37:12+00:00\",\"dateModified\":\"2019-08-17T05:16:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#primaryimage\",\"url\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg\",\"contentUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg\",\"width\":950,\"height\":500,\"caption\":\"How to Relocate Responsive Menu in Genesis Sample Theme\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/leaguewp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Relocate Responsive Menu in Genesis Sample\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/leaguewp.com\/#website\",\"url\":\"https:\/\/leaguewp.com\/\",\"name\":\"League WP\",\"description\":\"WordPress Development\",\"publisher\":{\"@id\":\"https:\/\/leaguewp.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/leaguewp.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/leaguewp.com\/#organization\",\"name\":\"Top League Technologies Pvt. Ltd.\",\"url\":\"https:\/\/leaguewp.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg\",\"contentUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg\",\"width\":\"1920\",\"height\":\"960\",\"caption\":\"Top League Technologies Pvt. Ltd.\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/league_wp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/c84e33b8731dd0a38753b3b74c664b37\",\"name\":\"Susanta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f363d580b703f602b2169f4beaf96d4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f363d580b703f602b2169f4beaf96d4c?s=96&d=mm&r=g\",\"caption\":\"Susanta\"},\"url\":\"https:\/\/leaguewp.com\/author\/suskanchan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Relocate Responsive Menu in Genesis Sample - League WP","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:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/","og_locale":"en_US","og_type":"article","og_title":"How to Relocate Responsive Menu in Genesis Sample - League WP","og_description":"Relocate Genesis Sample responsive menu to inside header so it's aligned to the right of your site header while the site title is aligned left.","og_url":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/","og_site_name":"League WP","article_published_time":"2017-06-01T11:37:12+00:00","article_modified_time":"2019-08-17T05:16:12+00:00","og_image":[{"width":950,"height":500,"url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg","type":"image\/jpeg"}],"author":"Susanta","twitter_card":"summary_large_image","twitter_creator":"@league_wp","twitter_site":"@league_wp","twitter_misc":{"Written by":"Susanta","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#article","isPartOf":{"@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/"},"author":{"name":"Susanta","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/c84e33b8731dd0a38753b3b74c664b37"},"headline":"How to Relocate Responsive Menu in Genesis Sample","datePublished":"2017-06-01T11:37:12+00:00","dateModified":"2019-08-17T05:16:12+00:00","mainEntityOfPage":{"@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/"},"wordCount":415,"commentCount":5,"publisher":{"@id":"https:\/\/leaguewp.com\/#organization"},"image":{"@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#primaryimage"},"thumbnailUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg","articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/","url":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/","name":"How to Relocate Responsive Menu in Genesis Sample - League WP","isPartOf":{"@id":"https:\/\/leaguewp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#primaryimage"},"image":{"@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#primaryimage"},"thumbnailUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg","datePublished":"2017-06-01T11:37:12+00:00","dateModified":"2019-08-17T05:16:12+00:00","breadcrumb":{"@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#primaryimage","url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg","contentUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Lego-Block-Genesis-Themes.jpg","width":950,"height":500,"caption":"How to Relocate Responsive Menu in Genesis Sample Theme"},{"@type":"BreadcrumbList","@id":"https:\/\/leaguewp.com\/relocate-responsive-menu-genesis-sample\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/leaguewp.com\/"},{"@type":"ListItem","position":2,"name":"How to Relocate Responsive Menu in Genesis Sample"}]},{"@type":"WebSite","@id":"https:\/\/leaguewp.com\/#website","url":"https:\/\/leaguewp.com\/","name":"League WP","description":"WordPress Development","publisher":{"@id":"https:\/\/leaguewp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/leaguewp.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/leaguewp.com\/#organization","name":"Top League Technologies Pvt. Ltd.","url":"https:\/\/leaguewp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/","url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg","contentUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg","width":"1920","height":"960","caption":"Top League Technologies Pvt. Ltd."},"image":{"@id":"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/league_wp"]},{"@type":"Person","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/c84e33b8731dd0a38753b3b74c664b37","name":"Susanta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f363d580b703f602b2169f4beaf96d4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f363d580b703f602b2169f4beaf96d4c?s=96&d=mm&r=g","caption":"Susanta"},"url":"https:\/\/leaguewp.com\/author\/suskanchan\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts\/696"}],"collection":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/comments?post=696"}],"version-history":[{"count":0,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts\/696\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/media\/967"}],"wp:attachment":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/media?parent=696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/categories?post=696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/tags?post=696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}