{"id":17653,"date":"2021-01-19T15:20:06","date_gmt":"2021-01-19T08:20:06","guid":{"rendered":"https:\/\/www.makewebeasy.com\/en\/blog\/?post_type=manual&#038;p=17653"},"modified":"2021-01-19T15:43:16","modified_gmt":"2021-01-19T08:43:16","slug":"customizing-set-menu-logo-and-widget","status":"publish","type":"manual","link":"https:\/\/www.devmakewebeasy.com\/en\/blog\/manual\/customizing-set-menu-logo-and-widget\/","title":{"rendered":"Customizing Set Menu, Logo, and Widget"},"content":{"rendered":"<p><strong>Header<\/strong> is the consistent area at the top of the website that usually includes navigation menu, logo, widgets, contact, as well as social media account. This article will elaborate on how to customize each component on the header.<\/p>\n<ul>\n<li>Header menu<\/li>\n<li>Logo<\/li>\n<li>Widget<\/li>\n<li>Background<\/li>\n<li>Layout<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>1. Managing header menu<\/strong><\/p>\n<p style=\"padding-left: 40px;\">1. Navigate to Design<\/p>\n<p style=\"padding-left: 40px;\">2. Select Header &gt; Header Menu<\/p>\n<p style=\"padding-left: 40px;\">3. Click Add menu button<\/p>\n<p style=\"padding-left: 40px;\"><span style=\"text-decoration: underline;\">Note<\/span>: the existing menu is included in the selected template. To use the template just click and edit it. If you want to reconstruct the menu, we suggest removing them all first and add new menus (home menus can not be removed)<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17654 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-1-EN-620x388.png\" alt=\"\" width=\"620\" height=\"388\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-1-EN-620x388.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-1-EN-920x575.png 920w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-1-EN.png 923w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p style=\"padding-left: 40px;\">4. Name the Header Menu<\/p>\n<p style=\"padding-left: 40px;\">5. Select the link type, for example: Page<\/p>\n<p style=\"padding-left: 80px;\">5.1 URL: if the link is an internal menu, use this type. Just click and the menu will pop up<\/p>\n<p style=\"padding-left: 80px;\">5.2 Page: if the menu contains text, images, or custom designs, this link type must be applied for your menu. You need to create a new menu on the first page. After it&#8217;s been created, there will be several options<\/p>\n<p style=\"padding-left: 80px;\">5.3 Anchor: used when the website is a single page. Select the menu and scroll down to the section (on the same page). We need to create a new page menu and the section first<\/p>\n<p style=\"padding-left: 80px;\">5.4 No link: used when the new menu is the main menu with a sub-menu You do not need to link it anywhere<\/p>\n<p style=\"padding-left: 40px;\">6. Click the Save button<\/p>\n<p style=\"padding-left: 40px;\"><span style=\"text-decoration: underline;\">Additional instructions<\/span>: tick Open in new window when the menu leads to an external website. If it is still under the same website, you do not need to tick<img loading=\"lazy\" class=\"size-medium wp-image-17655 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-2-EN-620x488.png\" alt=\"\" width=\"620\" height=\"488\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-2-EN-620x488.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-2-EN.png 733w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p style=\"padding-left: 40px;\">7. The new menu that we have created will be displayed on the header menu<\/p>\n<p style=\"padding-left: 40px;\"><span style=\"text-decoration: underline;\">Additional instructions<\/span>: when creating a page and you want this page to be a menu as well, select Menu on Page link type, so your content page will appear withput creating a new menu later<\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-17656 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-3-EN.png\" alt=\"\" width=\"620\" height=\"249\" \/><\/p>\n<p style=\"text-align: center;\"><em>The new menu will appear at the top of website<\/em><\/p>\n<hr \/>\n<p><strong>2. Set up your logo<\/strong><\/p>\n<p style=\"padding-left: 40px;\">1. Navigate to Design<\/p>\n<p style=\"padding-left: 40px;\">2. Select Header &gt; Logo<\/p>\n<p style=\"padding-left: 40px;\">3. Select Image for logo type or Text if you do not have any logo picture<\/p>\n<p style=\"padding-left: 40px;\">4. Select Desktop<\/p>\n<p style=\"padding-left: 40px;\">5. Upload your own logo<\/p>\n<p style=\"padding-left: 40px;\"><span style=\"text-decoration: underline;\">Additional instructions<\/span>: you can type letters for your logo if you do not have any picture. Besides, if the logo does not work for Mobile display, untick the sharing option, select Mobile tab, and re-upload your logo<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-17670 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-4-EN.png\" alt=\"\" width=\"587\" height=\"577\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-4-EN.png 587w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-4-EN-53x53.png 53w\" sizes=\"(max-width: 587px) 100vw, 587px\" \/><\/p>\n<p style=\"padding-left: 40px;\">6. Click Upload button and the File Manager box will pop up. Click Browse to upload your file<\/p>\n<p style=\"padding-left: 40px;\">7. Click Add Image button<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17657 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-5-EN-620x275.png\" alt=\"\" width=\"620\" height=\"275\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-5-EN-620x275.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-5-EN-920x408.png 920w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-5-EN.png 1121w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p style=\"padding-left: 40px;\">8. The original logo has been replaced with your own logo. Click Save button to complete this step<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17658 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-6-EN.png\" alt=\"\" width=\"587\" height=\"577\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-6-EN.png 587w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-6-EN-53x53.png 53w\" sizes=\"(max-width: 587px) 100vw, 587px\" \/><\/p>\n<p style=\"text-align: center;\"><em><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17659 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-7-EN-620x249.png\" alt=\"\" width=\"620\" height=\"249\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-7-EN-620x249.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-7-EN.png 920w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>The new logo has been applied<\/em><\/p>\n<hr \/>\n<p><strong>3. Set up the widget<\/strong><\/p>\n<p style=\"padding-left: 40px;\">1. Navigate to Design<\/p>\n<p style=\"padding-left: 40px;\">2. Select Header &gt; Widget<\/p>\n<p style=\"padding-left: 40px;\">3. Swipe On\/Off for your required widgets<\/p>\n<p style=\"padding-left: 40px;\"><span style=\"text-decoration: underline;\">Note<\/span>: if you want to adjust widget design, click Style and customize your widgets<\/p>\n<p><img loading=\"lazy\" class=\"size-medium wp-image-17671 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-8-EN-1-620x433.png\" alt=\"\" width=\"620\" height=\"433\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-8-EN-1-620x433.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-8-EN-1.png 704w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17667 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-15-EN.png\" alt=\"\" width=\"620\" height=\"103\" \/><\/p>\n<p style=\"text-align: center;\"><em>The active widgets will be shown on the page<\/em><\/p>\n<hr \/>\n<p><strong>4. Customize background<\/strong><\/p>\n<p style=\"padding-left: 40px;\">1. Navigate to Design<\/p>\n<p style=\"padding-left: 40px;\">2. Select Header &gt; Background<\/p>\n<p style=\"padding-left: 40px;\">3. Select Header Background tab<\/p>\n<p style=\"padding-left: 40px;\">4. Choose a background color or make it transparent<\/p>\n<p style=\"padding-left: 40px;\">5. Click Save button<\/p>\n<p style=\"padding-left: 40px;\">6. Switch to Top Bar tab<\/p>\n<p style=\"padding-left: 40px;\">7. Choose a color and click Save button<\/p>\n<p style=\"padding-left: 40px;\"><span style=\"text-decoration: underline;\">Note<\/span>: while customizing the header background, do not put vivid color and too many pictures as it will make your header menu difficult to read<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17662 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-10-EN-620x353.png\" alt=\"\" width=\"620\" height=\"353\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-10-EN-620x353.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-10-EN.png 765w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17663 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-11-EN-620x395.png\" alt=\"\" width=\"620\" height=\"395\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-11-EN-620x395.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-11-EN.png 683w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/p>\n<p style=\"text-align: center;\"><em><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17664 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-12-EN.png\" alt=\"\" width=\"620\" height=\"249\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>The result if we choose transparent header background and black color for top bar<\/em><\/p>\n<hr \/>\n<p><strong>5. Format setting<\/strong><\/p>\n<p style=\"padding-left: 40px;\">1. Navigate to Design<\/p>\n<p style=\"padding-left: 40px;\">2. Select Header &gt; Layout<\/p>\n<p style=\"padding-left: 40px;\">3. Select Desktop tab &gt; choose your header layout<\/p>\n<p style=\"padding-left: 40px;\">4. Click Save button<\/p>\n<p style=\"padding-left: 40px;\"><span style=\"text-decoration: underline;\">Additional tips<\/span>: When a menu is in a mobile format, it will show as a three-line icon or so-called hamburger menu. You can choose the layout from the Mobile tab<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17665 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-13-EN.png\" alt=\"\" width=\"557\" height=\"574\" \/><\/p>\n<p><em><img loading=\"lazy\" class=\"alignnone size-medium wp-image-17661 aligncenter\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-9-EN-620x103.png\" alt=\"\" width=\"620\" height=\"103\" srcset=\"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-9-EN-620x103.png 620w, https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-9-EN.png 920w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>The result of the layout setting when we widen the screen display<\/em><\/p>\n<p style=\"text-align: center;\"><em><img loading=\"lazy\" class=\"alignnone size-full wp-image-17672\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-15-EN-1.png\" alt=\"\" width=\"620\" height=\"103\" \/><\/em><\/p>\n<p style=\"text-align: center;\"><em>The result when we turn on the logo display on the header menu<\/em><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-17668\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-16-EN.png\" alt=\"\" width=\"620\" height=\"146\" \/><\/p>\n<p style=\"text-align: center;\"><em>Thre result of header menu when turn off the logo display on fixed navigation menu<\/em><\/p>\n<p style=\"text-align: center;\"><em>(Scroll down to the bottom page)<\/em><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-17669\" src=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-17-EN.png\" alt=\"\" width=\"620\" height=\"142\" \/><\/p>\n<p style=\"text-align: center;\"><em>The result when we turn off the logo display on the header menu<\/em><\/p>\n<p style=\"text-align: center;\"><em>(Scroll down to the bottom page)<\/em><\/p>\n","protected":false},"featured_media":0,"template":"","manual_category":[1782],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v14.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Customizing Set Menu, Logo, and Widget - MakeWebaEasy Blog<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.makewebeasy.com\/en\/blog\/manual\/customizing-set-menu-logo-and-widget\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Customizing Set Menu, Logo, and Widget - MakeWebaEasy Blog\" \/>\n<meta name=\"twitter:description\" content=\"Header is the consistent area at the top of the website that usually includes navigation menu, logo, widgets, contact, as well as social media account. This article will elaborate on how to customize each component on the header. Header menu Logo Widget Background Layout &nbsp; 1. Managing header menu 1. Navigate to Design 2. Select [&hellip;]\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.makewebeasy.com\/en\/blog\/wp-content\/uploads\/2021\/01\/2.3-\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19-\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e21\u0e19\u0e39\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c-\u0e42\u0e25\u0e42\u0e01\u0e49-\u0e41\u0e25\u0e30\u0e27\u0e34\u0e15\u0e40\u0e08\u0e47\u0e15-1-EN-620x388.png\" \/>\n<meta name=\"twitter:creator\" content=\"@makewebeasy\" \/>\n<meta name=\"twitter:site\" content=\"@makewebeasy\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual\/17653"}],"collection":[{"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual"}],"about":[{"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/types\/manual"}],"wp:attachment":[{"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/media?parent=17653"}],"wp:term":[{"taxonomy":"manual_category","embeddable":true,"href":"https:\/\/www.devmakewebeasy.com\/en\/blog\/wp-json\/wp\/v2\/manual_category?post=17653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}