{"id":2579,"date":"2021-03-04T05:02:57","date_gmt":"2021-03-04T13:02:57","guid":{"rendered":"https:\/\/www.ultimatewb.com\/blog\/?p=2579"},"modified":"2021-03-04T05:03:52","modified_gmt":"2021-03-04T13:03:52","slug":"easy-way-to-display-your-menu-next-to-your-logo-on-the-header","status":"publish","type":"post","link":"https:\/\/www.ultimatewb.com\/blog\/2579\/easy-way-to-display-your-menu-next-to-your-logo-on-the-header\/","title":{"rendered":"Easy way to display your menu next to your logo on the header"},"content":{"rendered":"\n<p>Having your website menu display to the right of your logo is becoming the go-to design choice more and more, so we decided to add this setup as a header template option. Get this 1-click header logo\/menu setup with our newest UltimateWB software upgrade 6.7 &#8211; for all versions!<\/p>\n\n\n\n<p>On the Templates generator page, choose between &#8220;Run Header with Menu Below&#8221; and &#8220;Run Header with Menu to Right of Logo&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\">    <picture>\n                <img src=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/header-templates.jpg\"\n             srcset=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/header-templates.jpg 606w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/header-templates-300x145.jpg 300w\"             sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 75vw, 1200px\"\n             width=\"606\"\n             height=\"293\"\n             alt=\"header-templates\"\n             loading=\"lazy\"             decoding=\"async\"\n             class=\"wp-image-2582\" >\n    <\/picture>\n    <\/figure>\n\n\n\n<p>Here is an example of the website navigation menu below the header:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\">    <picture>\n                <img src=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/top-header-with-menu-below.jpg\"\n             srcset=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/top-header-with-menu-below.jpg 515w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/top-header-with-menu-below-300x142.jpg 300w\"             sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 75vw, 1200px\"\n             width=\"515\"\n             height=\"243\"\n             alt=\"top-header-with-menu-below\"\n             loading=\"lazy\"             decoding=\"async\"\n             class=\"wp-image-2581\" >\n    <\/picture>\n    <\/figure>\n\n\n\n<p>And here the menu is to the right of the logo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\">    <picture>\n                <img src=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/top-header-with-menu-to-right-of-logo.jpg\"\n             srcset=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/top-header-with-menu-to-right-of-logo.jpg 666w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/top-header-with-menu-to-right-of-logo-300x82.jpg 300w\"             sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 75vw, 1200px\"\n             width=\"666\"\n             height=\"183\"\n             alt=\"top-header-with-menu-to-right-of-logo\"\n             loading=\"lazy\"             decoding=\"async\"\n             class=\"wp-image-2580\" >\n    <\/picture>\n    <\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">When to display your navigation menu next to your logo?<\/h2>\n\n\n\n<p>If you don&#8217;t have many items in your menu, and you don&#8217;t have content you want to display next to your logo, the menu works great there. It fits, and it makes great use of the empty space next your logo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">When to display your navigation menu below your header?<\/h2>\n\n\n\n<p>On the other hand, if you have lots of pages in your menu, it needs a lot more space and you don&#8217;t want it to feel like it&#8217;s squished to fit. Putting your menu under the header in that case would make it more user friendly. You don&#8217;t want to try to fit all your pages under only a handful of top level links if it doesn&#8217;t make sense.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the menu displays with the responsive website:<\/h2>\n\n\n\n<p>The header is responsive in a responsive website, so the menu displays as an expandable button, and the logo and header content centered automatically when the header templates are used.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\">    <picture>\n                <img src=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/responsive-header.jpg\"\n             srcset=\"https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/responsive-header.jpg 440w, https:\/\/www.ultimatewb.com\/blog\/wp-content\/uploads\/responsive-header-300x196.jpg 300w\"             sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 75vw, 1200px\"\n             width=\"440\"\n             height=\"287\"\n             alt=\"responsive-header\"\n             loading=\"lazy\"             decoding=\"async\"\n             class=\"wp-image-2585\" >\n    <\/picture>\n    <\/figure>\n\n\n\n<p>All UltimateWB website builder software versions come with the 1-click Responsive template, and you can also configure various aspects of the built-in Responsive app via your website admin panel styles manager.<\/p>\n\n\n\n<p>Hope you enjoy it! We welcome your feedback!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Having your website menu display to the right of your logo is becoming the go-to design choice more and more, so we decided to add this setup as a header template option. Get this 1-click header logo\/menu setup with our &hellip; <a href=\"https:\/\/www.ultimatewb.com\/blog\/2579\/easy-way-to-display-your-menu-next-to-your-logo-on-the-header\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[1513,1515,1514,690,111,1264,1512],"class_list":["post-2579","post","type-post","status-publish","format-standard","hentry","category-announcements","tag-header-templates","tag-menu-location","tag-navigation-menu","tag-responsive-app","tag-software-upgrade","tag-templates-app","tag-templates-generator"],"_links":{"self":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/2579"}],"collection":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/comments?post=2579"}],"version-history":[{"count":1,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/2579\/revisions"}],"predecessor-version":[{"id":2586,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/posts\/2579\/revisions\/2586"}],"wp:attachment":[{"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/media?parent=2579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/categories?post=2579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ultimatewb.com\/blog\/wp-json\/wp\/v2\/tags?post=2579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}