{"id":3786,"date":"2022-04-27T15:19:03","date_gmt":"2022-04-27T13:19:03","guid":{"rendered":"https:\/\/www.combell.nl\/en\/help\/?post_type=ht_kb&#038;p=3786"},"modified":"2022-09-28T10:42:09","modified_gmt":"2022-09-28T08:42:09","slug":"how-to-change-the-header","status":"publish","type":"ht_kb","link":"https:\/\/www.combell.nl\/en\/help\/kb\/how-to-change-the-header\/","title":{"rendered":"How to change the header"},"content":{"rendered":"\n<p>In this article, you can find information on setting the background of the header as well as its appearance. <\/p>\n\n\n\n<p>To open the settings, click on the gear wheel icon in the upper right corner of the header.<a href=\"https:\/\/img.webnode.com\/kb-webnode-2\/en\/edit-website\/change-header\/1-gear-wheel.jpg\" rel=\"noreferrer noopener\" target=\"_blank\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887168606-1617887168606.png\" alt=\"Gear wheel\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-header-type\"><strong>Header type<\/strong><\/h3>\n\n\n\n<p>Here you can change the header type, you can choose from the options&nbsp;<strong>Navline only<\/strong>,&nbsp;<strong>Navline &amp; claims<\/strong>&nbsp;or&nbsp;<strong>Navline &amp; content<\/strong>. The header can be set directly for each page on the project.<a href=\"https:\/\/img.webnode.com\/kb-webnode-2\/en\/edit-website\/change-header\/2-type-of-header.jpg\" rel=\"noreferrer noopener\" target=\"_blank\"><\/a><\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\"><strong>INFO <\/strong>: Le type d&#8217;en-t\u00eate ne peut pas \u00eatre modifi\u00e9 pour les pages de billets de blog, qui sont un type de page diff\u00e9rent.<\/p>\n\n\n\n<div class=\"wp-block-ht-block-toc  is-style-outline htoc htoc--position-wide toc-list-style-plain\" data-htoc-state=\"expanded\"><span class=\"htoc__title\"><span class=\"ht_toc_title\">IN THIS ARTICLE<\/span><span class=\"htoc__toggle\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\"><g fill=\"#444\"><path d=\"M15 7H1c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1z\"><\/path><path d=\"M15 1H1c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1zM15 13H1c-.6 0-1 .4-1 1s.4 1 1 1h14c.6 0 1-.4 1-1s-.4-1-1-1z\"><\/path><\/g><\/svg><\/span><\/span><div class=\"htoc__itemswrap\"><ul class=\"ht_toc_list\"><li class=\"\"><a href=\"#htoc-menu-de-navigation-uniquement\">Navline only<\/a><\/li><li class=\"\"><a href=\"#htoc-ligne-de-navigation-et-rubriques\">Navline &amp; claims<\/a><\/li><li class=\"\"><a href=\"#htoc-menu-de-navigation-et-contenu\">Navline &amp; content<\/a><\/li><\/ul><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"htoc-menu-de-navigation-uniquement\"><strong>Navline only<\/strong><\/h2>\n\n\n\n<p>With this setting, only the logo and menu bar are displayed, followed by the rest of the site. You can change the background and set the properties of the navline. The navline settings affect the bar settings on all pages of the site.<\/p>\n\n\n\n<p>Within the navline, you can change the background by clicking on&nbsp;<strong>Navline Background<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887163369-1617887163369.png\" alt=\"Navline background\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/img.webnode.com\/kb-webnode-2\/en\/edit-website\/change-header\/3-navline-background.jpg\" rel=\"noreferrer noopener\" target=\"_blank\"><\/a>You can also select one of the recommended backgrounds or use the&nbsp;<strong>plus button<\/strong>&nbsp;to select another or upload your own.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887167321-1617887167321.png\" alt=\"Choose or plus\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/img.webnode.com\/kb-webnode-2\/en\/edit-website\/change-header\/4-choose-or-plus.jpg\" rel=\"noreferrer noopener\" target=\"_blank\"><\/a>Here you can select a background from the gallery or upload your own.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887169386-1617887169386.png\" alt=\"Image gallery\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/img.webnode.com\/kb-webnode-2\/en\/edit-website\/change-header\/5-image-galery.jpg\" rel=\"noreferrer noopener\" target=\"_blank\"><\/a>If you set a background other than&nbsp;<strong>monochrome<\/strong>, you will also be able to set&nbsp;<strong>Background Effects<\/strong>, such as a&nbsp;<strong>Color overlay<\/strong>&nbsp;or&nbsp;<strong>Animation<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"htoc-param-tres-avanc-s-des-param-tres-de-navigation\"><strong>Advanced navigation bar settings<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887167056-1617887167056.png\" alt=\"Navline settings\"\/><\/figure>\n\n\n\n<p><strong>Menu type<\/strong><br>In this step, you can change the position or appearance of the menu items. Types&nbsp;<strong>Classic<\/strong>,&nbsp;<strong>Centered<\/strong>, and&nbsp;<strong>Bottom<\/strong>.&nbsp;<strong>Boxed hamburger<\/strong>&nbsp;and&nbsp;<strong>Hamburger differ<\/strong>&nbsp;in the icon.<\/p>\n\n\n\n<p><strong>Menu style<\/strong><br>The menu style sets the appearance of the page names in the menu. For example, menu items can be bordered, crossed out, have larger spaces, or behave differently when you hover the mouse. This setting cannot be made for the&nbsp;<strong>Pop-up<\/strong>&nbsp;and&nbsp;<strong>Tile with Pop-up<\/strong>&nbsp;menu types.<\/p>\n\n\n\n<p><strong>Content width<\/strong><br>Use this setting to adjust the distance between the logo&nbsp;and the menu items in the navigation bar.<\/p>\n\n\n\n<p><strong>Sticky (fixed) menu<\/strong><br>When the fixed menu is switched on, the navigation bar remains at the top even when the mouse is moved down the page.<\/p>\n\n\n\n<p><strong>Delimiter<\/strong><br>This option turns on the line that separates the navigation bar from the rest of the page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"htoc-ligne-de-navigation-et-rubriques\"><strong>Navline &amp; claims<\/strong><\/h2>\n\n\n\n<p>This type of header is generally used on most template home pages. You can add up to three headings (Heading, Subheading and Heading above the title) as well as a button. The background can be changed for the navline and section.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887166656-1617887166656.png\" alt=\"Claims\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/img.webnode.com\/kb-webnode-2\/en\/edit-website\/change-header\/7-claims.jpg?_ga=2.74590482.1045712655.1617885808-549091807.1617260299\" rel=\"noreferrer noopener\" target=\"_blank\"><\/a><\/p>\n\n\n\n<p>In addition to the&nbsp;<strong>Background of the navline<\/strong>, you can also change the background of the header itself by clicking on&nbsp;<strong>Section background<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887163712-1617887163711.png\" alt=\"Change backgrounds\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/img.webnode.com\/kb-webnode-2\/en\/edit-website\/change-header\/8-change-backgrounds.jpg\" rel=\"noreferrer noopener\" target=\"_blank\"><\/a><\/p>\n\n\n\n<p>The recommended resolution for the header image is 1920 \u00d7 1280 px, and the file size should be around 600 kb. Larger image sizes could result in slower page loading and more data being transferred.<\/p>\n\n\n\n<p>The change procedure is the same as for the navline (see above in the article).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"htoc-param-tres-avanc-s\"><strong>Advanced settings<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887167855-1617887167855.png\" alt=\"Advanced settings\"\/><\/figure>\n\n\n\n<p><strong>Content alignment<\/strong><br>Here you set how the content will be aligned within the page header.<\/p>\n\n\n\n<p><strong>Content width<\/strong><br>The width of the content within the header type. The navigation bar and headings mainly define where the content starts. For example, when aligning content to the left, you can set where the headings start.<\/p>\n\n\n\n<p><strong>Minimum height<\/strong><br>This setting determines the size of the header. This setting can be useful if you want to determine how much of the background image should be seen.<\/p>\n\n\n\n<p><strong>Decorative border<\/strong><br>This feature activates a dark border around the title, subheading, and caption above the title.<\/p>\n\n\n\n<p><strong><strong>Advanced navigation line settings<\/strong>&nbsp;are the same as for other header types.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"htoc-menu-de-navigation-et-contenu\"><strong>Navline &amp; content<\/strong><\/h2>\n\n\n\n<p>You can insert any type of Webnode content, such as forms or image galleries, into this type of header. The background for the navline and the content can be set separately.<\/p>\n\n\n\n<p>You can change the background of the navline and section as you would for the Navline &amp; Claims header type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"htoc-param-tres-avanc-s1\"><strong>Advanced settings<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/helpjuice-static\/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7272%2Fdirect%2F1617887166304-1617887166304.png\" alt=\"Advanced settings\"\/><\/figure>\n\n\n\n<p><strong>Content width<\/strong><br>The width of the content determines the size of the content \u2013 forms, photo galleries \u2013 that is placed within the header.<\/p>\n\n\n\n<p><strong>Minimum height<\/strong><br>The minimum height defines the size of the header and its space for content.<\/p>\n\n\n\n<p><strong><strong>Advanced navigation line settings<\/strong>&nbsp;are the same as for other header types.<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, you can find information on setting the background of the header as well as its appearance. To open the settings, click on the gear wheel icon in the upper right corner of the header. Header type Here you can change the header type, you can choose from&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[138,142],"ht-kb-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/ht-kb\/3786"}],"collection":[{"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/comments?post=3786"}],"version-history":[{"count":3,"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/ht-kb\/3786\/revisions"}],"predecessor-version":[{"id":3790,"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/ht-kb\/3786\/revisions\/3790"}],"wp:attachment":[{"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/media?parent=3786"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/ht-kb-category?post=3786"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.combell.nl\/en\/help\/wp-json\/wp\/v2\/ht-kb-tag?post=3786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}