{"id":5310,"date":"2025-01-14T10:18:07","date_gmt":"2025-01-14T10:18:07","guid":{"rendered":"https:\/\/www.names.co.uk\/support\/?post_type=ht_kb&p=5310"},"modified":"2025-01-14T10:18:08","modified_gmt":"2025-01-14T10:18:08","slug":"how-to-change-the-header","status":"publish","type":"ht_kb","link":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/","title":{"rendered":"How to Change the Header"},"content":{"rendered":"\n

Info:<\/strong> This article applies to Website Builder purchases made after 14th<\/sup> January 2025. For further assistance, please contact our support team.<\/p><\/div>\n\n\n\n

In this article, we will provide some guidance on setting the background and appearance of the header<\/strong>.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

To get started, you first need to log into the web builder through your Online Control Panel. Unsure how to do so? Follow our guide HERE<\/a><\/p>\n\n\n\n

To begin, click the gear icon<\/strong> in the top-right corner of the header. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Header Type <\/strong> <\/p>\n\n\n\n

Here, you can select the header style – choosing from options like Navline Only<\/strong>, Navline & Claims<\/strong>, or Navline & Content<\/strong>. The header type can be customized individually for each page in the project. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

TIP<\/strong>: The header type cannot be modified for blog post pages, as these are treated as different page types.\u00a0<\/p><\/div>\n\n\n\n

Navline Only<\/strong> <\/p>\n\n\n\n

This option displays only the logo and menu bar, followed by the main site content. You can customize the background and adjust the properties of the Navline, with these settings applying across all site pages. <\/p>\n\n\n\n

To change the Navline background, click on Navline Background.<\/strong> <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

You can choose from one of the recommended backgrounds or click the plus button<\/strong> to select a different one or upload your own background. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Here you can select a background of your choice, either from uploading your own or choosing one from the gallery. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n

If you choose a background other than monochrome<\/strong>, you can also configure Background Effects<\/strong>, such as a Colour Overlay<\/strong> or Animation<\/strong>. <\/p>\n\n\n\n

<\/div>\n\n\n\n

Advanced Navigation Bar Settings<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Menu Type<\/strong> <\/p>\n\n\n\n

In this section, you can modify the position and appearance of the menu items. You can choose from Classic<\/strong>, Centred<\/strong>, or Bottom<\/strong> menu types. The Boxed Hamburger <\/strong>and Hamburger<\/strong> options differ only in their icon design. <\/p>\n\n\n\n

Menu Style<\/strong> <\/p>\n\n\n\n

The menu style determines how the page names appear in the menu. Options include bordered items, crossed-out items, larger spacing, or different hover effects.   <\/p>\n\n\n\n

NOTE:<\/strong> These settings are not available for the Pop-up<\/strong> and Tile with Pop-up<\/strong> menu types.\u00a0<\/p><\/div>\n\n\n\n

Content Width<\/strong> <\/p>\n\n\n\n

This setting allows you to adjust the spacing between the logo and the menu items in the navigation bar. <\/p>\n\n\n\n

Sticky (Fixed) Menu<\/strong> <\/p>\n\n\n\n

When the fixed menu option is enabled, the navigation bar remains at the top of the page as you scroll down. <\/p>\n\n\n\n

Delimiter<\/strong> <\/p>\n\n\n\n

This option adds a line to separate the navigation bar from the rest of the page. <\/p>\n\n\n\n

Navline & Claims<\/strong> <\/p>\n\n\n\n

This header type is commonly used on most template home pages. You can add up to three headings (Heading<\/strong>, Subheading<\/strong>, and Heading Above the Title<\/strong>) along with a button. Both the Navline and section backgrounds can be customized. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

In addition to customizing the background of the Navline,<\/strong> you can also change the header background by clicking on Section Background<\/strong>. <\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

The recommended resolution<\/strong> for the header image is 1920 \u00d7 1280 px<\/strong>, with a file size<\/strong> of approximately 600 KB<\/strong>. Using larger images may lead to slower page loading times and increased data transfer. <\/p>\n\n\n\n

The procedure for making changes is the same as for the Navline (please refer to the previous sections of the article). <\/p>\n\n\n\n

<\/div>\n\n\n\n

Advanced Settings<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Content Alignment<\/strong> <\/p>\n\n\n\n

This setting allows you to determine how the content will be aligned within the page header. <\/p>\n\n\n\n

Content Width<\/strong> <\/p>\n\n\n\n

This specifies the width of the content within the header type. The navigation bar and headings primarily dictate where the content begins. For instance, when aligning content to the left, you can specify where the headings start. <\/p>\n\n\n\n

Minimum Height<\/strong> <\/p>\n\n\n\n

This setting controls the height of the header. It can be useful for deciding how much of the background image should be visible. <\/p>\n\n\n\n

Decorative Border<\/strong> <\/p>\n\n\n\n

This feature adds a dark border around the title, subheading, and any caption above the title. <\/p>\n\n\n\n

Advanced Navigation Line<\/strong>  <\/p>\n\n\n\n

These settings are consistent with those for other header types. <\/p>\n\n\n\n

Navline & Content<\/strong> <\/p>\n\n\n\n

With this header type, you can include various content types, such as forms or image galleries. The backgrounds for the Navline and the content can be set separately. <\/p>\n\n\n\n

You can adjust the backgrounds for the Navline and section in the same manner as you would for the Navline & Claims header type. <\/p>\n\n\n\n

<\/div>\n\n\n\n

If you have any further questions, simply raise a support request<\/a><\/strong> from within your Online Control Panel or call us on 0345 363 3634<\/strong>. Our Support team are here to help and ready to assist you with your enquiry.<\/p>\n\n\n\n

For assistance raising a support request please follow the following guide<\/a>.<\/strong><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

In this article, we will provide some guidance on setting the background and appearance of the header. Getting Started To get started, you first need to log into the web builder through your Online Control Panel. Unsure how to do so? Follow our guide HERE To begin, click the gear icon in the top-right corner […]<\/p>\n","protected":false},"author":28,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[260,154,262],"ht-kb-tag":[153,257],"class_list":["post-5310","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-edit-your-website","ht_kb_category-website-builder","ht_kb_category-website-design","ht_kb_tag-website-builder","ht_kb_tag-xsw"],"yoast_head":"\nHow to Change the Header - Support Centre - names.co.uk<\/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:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Change the Header - Support Centre - names.co.uk\" \/>\n<meta property=\"og:description\" content=\"In this article, we will provide some guidance on setting the background and appearance of the header. Getting Started To get started, you first need to log into the web builder through your Online Control Panel. Unsure how to do so? Follow our guide HERE To begin, click the gear icon in the top-right corner […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Support Centre - names.co.uk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/namesco\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-14T10:18:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-61.png\" \/>\n\t<meta property=\"og:image:width\" content=\"588\" \/>\n\t<meta property=\"og:image:height\" content=\"479\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@namesco\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/\",\"url\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/\",\"name\":\"How to Change the Header - Support Centre - names.co.uk\",\"isPartOf\":{\"@id\":\"https:\/\/www.names.co.uk\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-61.png\",\"datePublished\":\"2025-01-14T10:18:07+00:00\",\"dateModified\":\"2025-01-14T10:18:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#primaryimage\",\"url\":\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-61.png\",\"contentUrl\":\"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-61.png\",\"width\":588,\"height\":479},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.names.co.uk\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Change the Header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.names.co.uk\/support\/#website\",\"url\":\"https:\/\/www.names.co.uk\/support\/\",\"name\":\"Support Centre - names.co.uk\",\"description\":\"names.co.uk Support Centre\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.names.co.uk\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Change the Header - Support Centre - names.co.uk","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:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/","og_locale":"en_GB","og_type":"article","og_title":"How to Change the Header - Support Centre - names.co.uk","og_description":"In this article, we will provide some guidance on setting the background and appearance of the header. Getting Started To get started, you first need to log into the web builder through your Online Control Panel. Unsure how to do so? Follow our guide HERE To begin, click the gear icon in the top-right corner […]","og_url":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/","og_site_name":"Support Centre - names.co.uk","article_publisher":"https:\/\/www.facebook.com\/namesco","article_modified_time":"2025-01-14T10:18:08+00:00","og_image":[{"width":588,"height":479,"url":"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-61.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@namesco","twitter_misc":{"Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/","url":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/","name":"How to Change the Header - Support Centre - names.co.uk","isPartOf":{"@id":"https:\/\/www.names.co.uk\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#primaryimage"},"image":{"@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-61.png","datePublished":"2025-01-14T10:18:07+00:00","dateModified":"2025-01-14T10:18:08+00:00","breadcrumb":{"@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#primaryimage","url":"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-61.png","contentUrl":"https:\/\/www.names.co.uk\/support\/wp-content\/uploads\/2024\/11\/image-61.png","width":588,"height":479},{"@type":"BreadcrumbList","@id":"https:\/\/www.names.co.uk\/support\/articles\/how-to-change-the-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.names.co.uk\/support\/"},{"@type":"ListItem","position":2,"name":"How to Change the Header"}]},{"@type":"WebSite","@id":"https:\/\/www.names.co.uk\/support\/#website","url":"https:\/\/www.names.co.uk\/support\/","name":"Support Centre - names.co.uk","description":"names.co.uk Support Centre","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.names.co.uk\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"}]}},"_links":{"self":[{"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb\/5310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/comments?post=5310"}],"version-history":[{"count":4,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb\/5310\/revisions"}],"predecessor-version":[{"id":6479,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb\/5310\/revisions\/6479"}],"wp:attachment":[{"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/media?parent=5310"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb-category?post=5310"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.names.co.uk\/support\/wp-json\/wp\/v2\/ht-kb-tag?post=5310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}