> For the complete documentation index, see [llms.txt](https://docs.stylothemes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stylothemes.com/urdunews/customization/header/mobile-header.md).

# Mobile Header

The Mobile Header controls how your website’s header appears on mobile devices. You can customize its background, button styling, and icon colors to ensure readability and a smooth mobile experience.

#### **Main Background**

* Set the main background color of the mobile header.
* Recommended: Use a solid color for better readability on small screens.

#### **Buttons Background**

* Customize the background color of mobile header buttons (like menu toggle, search, etc.).
* Tip: Use a contrasting or accent color to make buttons clearly visible.

#### **Button Icons Color**

* Define the color of icons inside the buttons (e.g., hamburger menu, search icon).
* Choose a high-contrast color so that icons remain clear against the button background.

<figure><img src="https://857802280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FthwVQLzvh2F5YiBxgMcq%2Fuploads%2FqdBzVnn9vE76eTR4Vnik%2FScreenshot_8.png?alt=media&amp;token=fedbbb2e-3f0e-454d-bc1b-361ac2d0e076" alt=""><figcaption></figcaption></figure>