> For the complete documentation index, see [llms.txt](https://guides.mangoapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.mangoapps.com/admin-guide/branding/custom/add-a-custom-header.md).

# Add a Custom Header

This guide will walk you through the steps to create and display a custom header for your intranet domain using HTML and CSS in MangoApps.

***

### **Step 1: Upload the Banner Image to the Media Gallery**

1. **Navigate to the Media Center Module within the User Portal**
2. **Upload the Banner Image**:
   * Click **Upload New Media** and upload the image you want to use as the header banner.
3. **Get the Embed Code**:
   * After uploading the image, locate it in the Media Center.
   * Click the options menu (three dots) next to the image and select **Embed Code**.
   * Copy the embed code provided. This will include the image URL you’ll need for the next step.

<figure><img src="/files/gxnra5U3Wx7BoHDWUrhW" alt="" width="563"><figcaption></figcaption></figure>

***

### **Step 2: Enable the Custom Header in the Admin Portal**

1. **From the Admin Portal, Navigate to Branding Settings.**
2. **Select the Custom Tab**:
   * Under your selected Branding, click on the **Custom** tab.
3. **Enable Custom Header HTML & CSS**:
   * Toggle the **Enable Header** option to ON.

<figure><img src="/files/VnDxluywlITGdgCowruQ" alt="" width="563"><figcaption></figcaption></figure>

***

### **Step 3: Add the HTML Code for the Banner**

1. **Paste the Embed Code**:
   * In the **HTML** section, paste the embed code you copied from the Media Gallery.
   * For example:

     ```
     <div id="custom_header">
         <img src="https://demos.mangoapps.com/media/1c67fe/frame1010106746.png?inline=attachment&amp;return_original_image=true">
         <div class="domain_banner_center"></div>
         <div class="domain_banner_right"></div>
     </div>
     ```
2. **Customize the HTML Structure** (optional):
   * Modify the code to include additional elements or links as needed.

***

### **Step 4: Add CSS for Styling**

1. **Add the CSS Code**:
   * Use the **CSS** section to define the styling for your banner.
   * Example CSS:

     <pre><code><strong>#custom_header {
     </strong>    background: #000; /* Black background */
         height: 50px; /* Height of the banner */
     }
     #custom_header_link {
         display: block;
         text-decoration: none;
     }
     #custom_header > h1 {
         font-size: 20px;
         color: #fff; /* White text */
     }
     </code></pre>
2. **Customize the Styles**:
   * Adjust colors, font sizes, and layout to match your organization’s branding guidelines.

***

### **Step 5: Save the Changes**

1. **Save Settings**:
   * Click the **Save Settings** button to apply your changes.
2. **Preview the Banner**:
   * Navigate to your domain homepage to confirm that the header banner is displaying as expected.

***

### **Step 6: Verify and Finalize**

1. **Test on Multiple Devices**:
   * Ensure the banner appears correctly on both desktop and mobile devices.
2. **Make Adjustments**:
   * Return to the Admin Portal to tweak HTML or CSS if necessary.

***

Your custom header is now live and visible to users! This header banner is an excellent way to showcase important messages, events, or branding elements on your intranet domain.

<figure><img src="/files/Ih7HWK2aIXwQgxuVZ39x" alt="" width="563"><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://guides.mangoapps.com/admin-guide/branding/custom/add-a-custom-header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.