{"id":"66ac91cdee2e37001917eb72","title":"Configuring The Website Header","path":"how-to/committee/editing-content/configuring-the-website-header","contentMarkdown":"# Configuring The Website Header\nThis article explains how you can configure the header on your website in order to make it best match your theme, colour scheme and logo. In order to make changes in this area you will need to visit the [System Settings](https://ngx-ramblers.org.uk/admin/system-settings) page and view the **Logos** and the **Website Header** tabs. \n\n## Configuring a Light-Themed Website Header\nBy default,  [NGX-Ramblers]() generates a light website header that matches the appearance of the [National Ramblers Site](https://www.ramblers.org.uk/). Below is an annotated screenshot of what this looks like:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/3b75f8dc-2c0b-4e70-914e-be1882b7ed4b.jpg)\n\nBelow are the [Website Header Settings](https://ngx-ramblers.org.uk/admin/system-settings) that would be needed to configure a light-themed website header:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/4907d9b5-b61b-4819-90fe-79bce79720db.jpg)\n\n## Configuring a Dark-Themed Website Header\nIf your logo is predominantly dark, or is too wide for the navbar to be position to the right, a dark theme might better suit your site. Below is an annotated screenshot of what this looks like:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/a26cf374-bb56-4531-ae9f-89db6f892baf.jpg)\n\nBelow are the [Website Header Settings](https://ngx-ramblers.org.uk/admin/system-settings) that would be needed to configure a dark-themed website header:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/c761142a-c675-4165-ad37-009235c2dee4.jpg)","contentHtml":"<h1>Configuring The Website Header</h1>\n<p>This article explains how you can configure the header on your website in order to make it best match your theme, colour scheme and logo. In order to make changes in this area you will need to visit the <a href=\"https://ngx-ramblers.org.uk/admin/system-settings\">System Settings</a> page and view the <strong>Logos</strong> and the <strong>Website Header</strong> tabs. </p>\n<h2>Configuring a Light-Themed Website Header</h2>\n<p>By default,  <a href=\"\">NGX-Ramblers</a> generates a light website header that matches the appearance of the <a href=\"https://www.ramblers.org.uk/\">National Ramblers Site</a>. Below is an annotated screenshot of what this looks like:</p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/3b75f8dc-2c0b-4e70-914e-be1882b7ed4b.jpg\" alt=\"\"></p>\n<p>Below are the <a href=\"https://ngx-ramblers.org.uk/admin/system-settings\">Website Header Settings</a> that would be needed to configure a light-themed website header:</p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/4907d9b5-b61b-4819-90fe-79bce79720db.jpg\" alt=\"\"></p>\n<h2>Configuring a Dark-Themed Website Header</h2>\n<p>If your logo is predominantly dark, or is too wide for the navbar to be position to the right, a dark theme might better suit your site. Below is an annotated screenshot of what this looks like:</p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/a26cf374-bb56-4531-ae9f-89db6f892baf.jpg\" alt=\"\"></p>\n<p>Below are the <a href=\"https://ngx-ramblers.org.uk/admin/system-settings\">Website Header Settings</a> that would be needed to configure a dark-themed website header:</p>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/c761142a-c675-4165-ad37-009235c2dee4.jpg\" alt=\"\"></p>\n"}