Make one change at a time and check the saved result on desktop and mobile. If you already have header CSS, keep a copy before editing it. Old rules can override a perfectly good native setting.
Keep the header visible on scroll
Open Edit site header, then Edit design. Enable Fixed position. Basic keeps the header visible; Scroll back reveals it when the visitor scrolls upward. Official fixed-header instructions.
Start with a page long enough to scroll. Check whether the header obscures a heading reached through an anchor link, and open the mobile menu after scrolling. If an old sticky-header script is also running, disable that customization before diagnosing the native setting.
Do not paste a second fixed-position rule just because the editor preview looks different. A hard-coded top offset can conflict with an announcement bar or the header's own spacing.
Let the first section show behind the header
In the header design's Color tab, choose Adaptive for a transparent header over the first section. Solid and Gradient are alternatives when the image makes navigation difficult to read. Header background options.
Check the lightest and darkest areas behind your logo and links. Then check a page whose first section uses a different image or color. A transparent design that works on the homepage may fail on a short article or contact page.
A rule that depends on a presumed scroll class will not work on every 7.1 header. Use the native controls first; a custom scroll treatment needs to be tested against your site's actual header behavior.
Hide the header on one landing page
For a version 7.1 layout page, open Page settings, then Navigation and turn off Show Header. Collection pages such as a blog, store, portfolio, or calendar do not expose this option. Page settings and supported page types.
Keep a useful next step on the page itself, such as a clear action, a return link, or contact details. Removing navigation can make a campaign page more focused, but it can also leave a visitor at a dead end.
Reduce height without crowding the content
The header's Edit design controls include height and spacing. Review desktop and mobile independently. Start with the native layout controls rather than forcing a fixed pixel height that may clip a larger logo or wrapped text. Header layout controls.
Use your longest navigation label as a stress test. Resize between the full desktop view and the mobile menu. Watch for a logo colliding with links, a button squeezed to two lines, or a menu icon with too little room around it.
Choose colors for both menu states
Set the overall header background in the header editor. A dropdown that needs a different color can use the free desktop dropdown example.
Do not style only the closed header. Open its dropdown and mobile menu, then inspect the text, button, and background together. The menu should remain readable over every first-section background used on your site.
Use a layout that gives the logo room
Choose an appropriate header layout before applying alignment CSS. A centered logo needs enough space on both sides when links and a call-to-action button have different widths. Check the whole composition at a narrow desktop width, not just on a large monitor.
Keep a route through the site on mobile
Hiding the entire header at a guessed breakpoint also removes the menu, logo link, and possibly a purchase or contact button. First simplify the mobile header and shorten its labels. If a campaign page truly needs no navigation, use page visibility settings where available and check the page's own next step.
Trace extra space before removing it
Check whether the space belongs to the announcement bar, the header, or the first section. Compare a page without an announcement with one where it is visible. Remove your latest custom offset temporarily and test again before adding a negative margin.
A gap that appears only after scrolling may be a conflict between native fixed behavior and a second sticky script. Keep one owner for the scroll behavior. Do not fix the symptom by shifting every page upward.
Put the image where it can scale
For a photographic masthead, try an image in the first section with an Adaptive header. This gives the image room to crop across screen sizes. A background image squeezed into the header must still leave the logo, menu, and focus outlines legible.
Changing logo size on scroll needs a separate test
A CSS selector from another template is not proof that your header exposes the same scroll state. Check the native fixed option first. If a custom shrinking logo is still needed, test the transition, the space it occupies, and the mobile menu together. Avoid a size change that pushes the page content around.
Different colors do not require a second header
Adaptive styling responds to the first section, so begin by reviewing that section's theme. If you need a different set of links or a fundamentally different header on a page, define that requirement separately. Hiding links with CSS does not create a second navigation structure.
Add one clear call to action
Use the native Button option under Add elements in the header editor. Give it a specific destination and label, then check where it appears in the mobile menu. Header button setup.
“Book a consultation” and “View available dates” tell a visitor what happens next. Choose wording that matches the destination, and make sure the page actually completes that task.
Keep secondary links secondary
Social links can be enabled through the header's Add elements controls. After adding them, check whether they compete with the main action or make the mobile header crowded. Supported header elements.
A quick check before publishing
- Open a short page and a long page. Confirm the header does not cover either page's first heading.
- Scroll down and back up. Check the chosen fixed behavior and any announcement bar.
- Use Tab and Enter to reach and operate the menu. Keep focus visible.
- Open and close the mobile menu, enter a dropdown, and follow a real link.
- Reload the saved page outside the editor. If the last change broke something, restore the native setting or remove only the CSS you added.