How to add background to scrolling header

  • I am launching a new site with only a few pages. I used the Koinonia theme to build it, but didn’t like the header option so I made my own block design. Now, I’m having issues with pages where the header has a transparent background. When I scroll down, the logo gets in the way of the body text because the header is transparent rather than white.

    Can someone help me figure out how to design a new block or use code to add a background to the header? Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)

  • To resolve the transparent header issue and prevent logo/content overlap, here’s a structured solution:

    1. CSS Fix for Header Background

    Add this CSS code to your theme’s customizer (Appearance → Customize → Additional CSS):

    /* Add solid background to header */
.wp-block-group.your-header-class { /* Target your header block */
    background: #ffffff !important; /* White background */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Optional shadow */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure header stays above content */
}

/* Add spacing to first content element */
.wp-block-group:first-child {
    margin-top: 100px !important; /* Match header height */
}

    Key Features:

    • position: fixed keeps header visible during scroll
    • z-index: 1000 ensures proper layering
    • Margin compensation prevents content underlap

    2. Alternative Block-Based Solution

    1. Edit your header block
    2. In block settings → Advanced → Additional CSS Class: add solid-header
    3. Use this CSS:
    .solid-header {
    background: var(--wp--preset--color--white) !important;
    padding: 20px 0 !important;
    transition: all 0.3s ease;
}

/* Scrolled state */
.scrolled .solid-header {
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    padding: 15px 0 !important;
}

    3. JavaScript for Dynamic Header (Optional)

    Add this to create a more polished scroll effect:

    // Add to footer or custom HTML block
<script>
document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('.your-header-class');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 100) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });
});
</script>

    4. Verification Steps

    1. Use browser DevTools (F12) to:
    • Check element positioning
    • Verify z-index values
    • Test different background colors
    1. Ensure no conflicting theme CSS exists
    2. Test on mobile (add media queries if needed)

    Pro Tip: For gradient backgrounds, use:

    background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);

    This solution maintains block editor compatibility while ensuring proper header behavior across devices. Adjust pixel values to match your design requirements.

    • This reply was modified 2 weeks, 4 days ago by saghir daska.
    Thread Starter dhalpern12

    (@dhalpern12)

    Hello @saghirdsk — thanks for your help! I tried these, and the white background helped, but I am still having the same issue with the gap above the header.

    • This reply was modified 2 weeks, 4 days ago by dhalpern12.
    Moderator bcworkz

    (@bcworkz)

    For help with such a specific issue, we’d need a live link to a page demonstrating the issue. Note that links in replies are visible to the public and are not editable after 30 min. Moderators will not subsequently remove links. Links added to a new topic’s “page I need help with” field are only visible to forum members. Added links do have a nofollow attribute so providing a link does not affect the related SEO ranking.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.