Add margin-top when user is logged in.

[StevenDufresne]

Describe the bug

We don't include any top margin to account for the admin bar on WordCamp sites and therefore the admin bar overlaps with the header. You can see that at https://asia.wordcamp.org/2025/.

I was thinking we could do something like:

/**
 * Render CSS to adjust the top margin when the admin bar is present for logged-in users.
 */
function wcorg_admin_header_tweak_css() {
    if ( is_user_logged_in() ) {
        $admin_bar_height = 'var(--wp-admin--admin-bar--height, 0)';
        ?>
        <style type="text/css">
            html {
                margin-top: <?php echo esc_attr( $admin_bar_height ); ?>;
            }
        </style>
        <?php
    }
}

add_action( 'wp_head', 'wcorg_admin_header_tweak_css' );

[!NOTE] It seems like some WordCamp sites have already shipped fixes so whatever we do here, we'll need to reach out to those organizers ahead of time.

@ryelle What are you thoughts about adding this to https://github.com/WordPress/wordcamp.org/blob/production/public_html/wp-content/mu-plugins/3-helpers-misc.php

[ryelle]

We don't include any top margin to account for the admin bar on WordCamp sites and therefore the admin bar overlaps with the header. You can see that at https://asia.wordcamp.org/2025/.

There should be a core style that handles this, do you know why that's not working here?

[StevenDufresne]

Don't we set it? https://github.com/WordPress/wporg-mu-plugins/blob/trunk/mu-plugins/blocks/global-header-footer/postcss/_common.pcss#L26?

[ryelle]

Don't we set it?

Ah, yes, because we removed the core style, sounds like it conflicted when the global header was sticky. That probably shouldn't apply when the global header is not visible. It could be excluded from running on WordCamps, something like…

function remove_admin_bar_callback() {
    if ( defined( 'IS_WORDCAMP_NETWORK' ) ) {
        return;
    }

    remove_action( 'gp_head', '_admin_bar_bump_cb' );
    remove_action( 'wp_head', '_admin_bar_bump_cb' );
}

Honestly, since the global header is not sticky anymore, we can probably remove it & the custom CSS entirely, but I'll let you decide.

If you'd rather leave wporg-mu-plugins alone, adding the CSS could be simplified to this, which is how core's style is added. It will attach extra inline CSS when the admin-bar stylesheet is loaded, so it automatically won't load on logged out views.

add_action(
    'wp_enqueue_scripts',
    function () {
        $css = '@media screen { html { margin-top: var(--wp-admin--admin-bar--height, 0); } }';
        wp_add_inline_style( 'admin-bar', $css );
    }
);