> 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
Use custom HTML and CSS to create a header at the top of your domain
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.
***
### **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.
***
### **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:
```
```
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:
#custom_header {
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 */
}
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.
