{"id":425,"date":"2025-01-24T11:46:31","date_gmt":"2025-01-24T11:46:31","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2025\/01\/24\/10456392-hostinger-website-builder-how-to-style-the-header-section\/"},"modified":"2025-08-27T06:42:08","modified_gmt":"2025-08-27T06:42:08","slug":"10456392-hostinger-website-builder-how-to-style-the-header-section","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/10456392-hostinger-website-builder-how-to-style-the-header-section\/","title":{"rendered":"Hostinger Website Builder: How to Style the Header Section"},"content":{"rendered":"<p class=\"no-margin\">Inside the header settings, on the style tab, you can change the style of the following (choose from the dropdown):<br>&#8203;<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/01\/3296bd58-7499-4c38-b776-8af218826c7e.jpg\" width=\"260\"><\/div><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/01\/65a724ab-b64c-4da5-9afe-12c41623c71b.jpg\" width=\"260\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\"><b>Header<\/b>:<\/p><ul>\n<li>\n<p class=\"no-margin\">Header<b> background color<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Transparent<\/b> header: if you make the header transparent, it inherits the background of the below section<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text<\/b> <b>font<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text color<\/b>: you can set two colors &mdash; regular and hover<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">To change the header <b>text size<\/b>, go to the <b><a href=\"\/support\/6463286-website-builder-how-to-change-text-style\" target=\"_blank\" class=\"intercom-content-link\">global text style settings<\/a> &#128161;<\/b><\/p>\n<\/li>\n<\/ul><p class=\"no-margin\"><b>Button<\/b>:<\/p><ul>\n<li>\n<p class=\"no-margin\">Allow adding buttons to the header and customizing them<\/p>\n<\/li>\n<\/ul><p class=\"no-margin\"><b>Social icons<\/b>:<\/p><ul>\n<li>\n<p class=\"no-margin\">The<b> toggle button<\/b> to enable social media icons in the header<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Add new links<\/b> to your profiles on various social media platforms<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Icon size<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Icon color<\/b>: you can set two colors &mdash; regular and hover<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Learn more: <b><a href=\"\/support\/6474611-website-builder-how-to-add-social-media-icons#h_a85fc59fea\" target=\"_blank\" class=\"intercom-content-link\">How to Add Social Media Icons<\/a> &#128161;<\/b><\/p>\n<\/li>\n<\/ul><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">You can also edit the hovering color for the header, button and social icons inside the Style tab, by choosing the option inside the dropdown &#128161; <\/p>\n<\/div><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/01\/f06b2477-3fb4-4fde-ab4a-dc91534b0928.jpg\" width=\"260\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn about customizing the style of your website&#8217;s header section<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[281],"tags":[],"class_list":["post-425","post","type-post","status-publish","format-standard","hentry","category-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/10456392-hostinger-website-builder-how-to-style-the-header-section\/","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"predecessor-version":[{"id":2142,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/425\/revisions\/2142"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}