Make WordPress Core

Opened 5 months ago

Closed 5 months ago

Last modified 5 months ago

#59973 closed defect (bug) (invalid)

Top blankspace at front-end when disabled admin bar and logged in

Reported by: peter-westerlund's profile Peter Westerlund Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Administration Keywords:
Focuses: Cc:


My theme has a sticky header and there is a 32px empty gap between its top to the frame/document top. The admin bar top offset space. To be clear; this is when I'm logged in as admin but visiting the site at front-end. And yes, I have disabled the admin-bar from the profile page in admin. So the expected behavior should be no admin bar but also no blankspace where the admin bar would otherwise be.

I know it's possible to get rid of this blankspace via both codes and CSS. But I wanna address this issue since it shouldn't be like this.

I've been looking around a lot in the core codes. It seems like the /wp-includes/css/admin-bar$suffix.css is causing the problem since its' loaded even if the admin bar is disabled. And the first rule in that file is:

html {
	--wp-admin--admin-bar--height: 32px;
	scroll-padding-top: var(--wp-admin--admin-bar--height);

Change History (6)

#1 follow-up: @johnbillion
5 months ago

  • Focuses php-compatibility removed
  • Keywords reporter-feedback added; changes-requested removed

Thanks for the report Peter. Which theme are you using? Are you seeing the same problem when using one of the default "Twenty" themes and with all your plugins deactivated?

#2 in reply to: ↑ 1 @Peter Westerlund
5 months ago

Replying to johnbillion:

Thanks for the report Peter. Which theme are you using? Are you seeing the same problem when using one of the default "Twenty" themes and with all your plugins deactivated?

I'm using my own built theme. I have not tried it with any of the "Twenty" themes and I have not tried it with all plugins deactivated. Have deactivated some plugins that I thought could be involved with this but deactivating them did not help.

I can't really play around too much on this website I am working with and change themes back and forth. Is there any tool online where I quickly can try this on a WordPress Twenty demo site or something?

Edit: I can say however, that I've been searching through all the codes for all plugins to try to find if any of the plugins are adding the admin-bar.css file. And non of them were. And looking through the core code showed me that the core code is indeed adding the admin-bar.css even if the admin bar is disabled. So there need to be a fix for that, just an if statement to check if the current user has admin_bar_front true and then add the admin bar css.

Last edited 5 months ago by Peter Westerlund (previous) (diff)

#4 @Peter Westerlund
5 months ago

  • Keywords close added

Okay so...The problem did not occur at my test website at playground. So, I had to go the long and hard way and deactivate my own plugins one by one. And found that there was a plugin causing it: Jetpack

Have not searched deeper in that plugin to find whats the problem there. But I guess I should report this at another place than here. Even if it's the same developers behind WordPress and Jetpack, I think?

#5 @kebbet
5 months ago

  • Keywords reporter-feedback removed
  • Resolution set to invalid
  • Status changed from new to closed

#6 @jorbin
5 months ago

  • Focuses css removed
  • Keywords close removed
  • Milestone Awaiting Review deleted
  • Version 6.4 deleted

@peter-westerlund Glad you were able to track it down. Please note, while the company behind Jetpack does contribute some developers to WordPress, the two organizations aren't the same. You can report issue to Jetpack in their github or support forums

Note: See TracTickets for help on using tickets.