Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

CSS not applied in generateblocks containers in headers

  • Phil
    February 23, 2026 at 9:43 pm

    Hi,

    When I place a GenerateBlocks Container block inside a Header Element (hook) and set it to display: flex, the layout settings are saved correctly in the editor, but no corresponding GB CSS is output on the frontend.

    The block attributes include “display”:”flex” etc and the HTML renders in the header correctly, but there is no generated .gb-container-xxxx { display:flex; } CSS in the page source.

    DevTools shows the container as display: block.

    If I manually add CSS targeting that class, it works fine.

    The caching plugin is disabled.

    It appears that GenerateBlocks conditional CSS generation is not detecting blocks rendered via Header Elements.

    Is this expected behaviour?
    Is there a way to ensure GB dynamic CSS is generated for blocks used inside Header Elements?

    Thanks,
    Phil

  • Alvind
    February 24, 2026 at 2:39 am

    Hi Phil,

    That’s not the expected behavior. When I checked the generated CSS file, the properties for .gb-container-603ec1c0 are present, but the display: flex; declaration doesn’t appear to be applied as expected: https://cln.sh/KWmX6xLchg1xzTXRhQ73

    Could you try going to GenerateBlocks > Settings in WP admin dashboard and clicking the Regenerate CSS Files button, then check again to see if that resolves it?

  • Phil
    February 24, 2026 at 8:17 pm

    Thanks Alvind.

    No, that did not help.

  • Phil
    February 24, 2026 at 9:19 pm

    I added an admin user for you if you want to have a look.

  • Alvind
    February 24, 2026 at 10:33 pm

    It looks like this was caused by a unique class conflict. There were two elements with the class .gb-container-603ec1c0 on the page.

    To resolve it, I duplicated the container wrapping the social icons (which had that class) and removed the original one. That appears to have fixed the issue.

    Could you check on your end and confirm?

  • Phil
    February 25, 2026 at 12:04 pm

    Thanks. That did the trick.
    A div on the header widget has the same class name.

  • Alvind
    February 25, 2026 at 8:02 pm

    Glad to hear that!

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