How to make header fixed on mobile

[marshiyan]

I am using the marcus reid - unite theme, and on mobile, the header is not fixed. It stretches when you scroll down. How do I make it fixed?

[Paul01]

To make the header fixed in Marcus Reid - Unite theme, you need to add some custom CSS to your site. Here's how you can do it:

1. Navigate to the Theme section:

   • In the Weebly site editor, click on the "Theme" tab at the top of the screen.
   • Click on "Edit HTML/CSS" at the bottom of the left sidebar.

2. Find the appropriate CSS file:

   • In the left sidebar, locate the main.less or styles.css file. This file contains the CSS for your theme. The exact file name may vary depending on the theme, but it is usually named something like main.less, style.less, or styles.css.
3. Add custom CSS for the fixed header:

/* Custom CSS to make the header fixed on mobile */
@Media only screen and (max-width: 768px) {
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000; /* Ensures the header is above other elements */
}

/* Adjust body top padding to avoid content being hidden under the fixed header */
body {
padding-top: 60px; /* Adjust this value to match the height of your header */
}
}

Save and publish your changes