New to the community? Start here

Admin bar turns black on Mobile devices

Hello,

I just found out that one some multi sites that I am running, the admin bar is not displaying correctly. Its just blank (will only see an empty black bar – see what I did there :wink: This only happens on the mobile devices (being responsive) and not when displaying on a desktop Screen.

I can’t really tell when this happened, it used to work a while ago. Maybe after the Buddypress update?

Anybody have any ideas?

Cheers,

Ronald

Mon, 30 Dec 2013 6:44:01

PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
Hey there Ronald,

Thanks for posting on the forums.

Can you share a couple of links where I see the issue in action ?

If you recently updated the plugins, it might have caused the issue. If you take a backup, you can roll back and see if that is the case.

Is that happening on any specific browser ?
Dutchman
- The Bug Hunter
- 280 pts: Hero points 983 pts: Rep. points LEVEL 7
Hi there again :wink:

Yes I can share some links with you:

http://demo.careertiger.co.nz and http://coral.careertiger.co.nz

As you can see, the admin bar works when viewed on a desktop but not when viewed on a mobile device.
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
Hey there,

Its due to the non responsiveness of the admin bar.

If it goes less than 783px in width, the bar disappears and the black color background takes over.

Adding something like this :
```
@media screen and (max-width:782px) {

#wpadminbar {

display:none;

}

html {

position:absolute;

top:-46px;

}

}
```
To your CSS should fix this as it would make the admin bar disappear for a screen size less than 783px and then it would look better on the mobile devices.

Would that work ?

Cheers, PC
Dutchman
- The Bug Hunter
- 280 pts: Hero points 983 pts: Rep. points LEVEL 7
Hmm ok…

This kind of sucks, because I would like to have the admin bar on mobile devices as well for advertisement purposes. Paid members can activate the “hide admin bar”.

It used to work fine. Can you tell if it’s because the new WordPress look?

Maybe some thoughts on how to make it work again on smaller screens?

Cheers,

Ronald
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
Hey there Ronald,

Thanks for posting back and sorry for the delay in response as I was away due to some family issues.

I am not too sure if its the new WordPress look coz it behaves fine on my lab site on a responsive theme.

Let me see if my colleague and our CSS champ @Patrick Cohen has got any ideas on this one.

He should be around sooner than later.

Cheers, PC
Dutchman
- The Bug Hunter
- 280 pts: Hero points 983 pts: Rep. points LEVEL 7
That’s ok PC, I hope everything is going better now.

I will wait for our big friend Patrick, see what he has to say.

In the meantime I will try to figure out what happened, cause all the responsive themes I use, the admin bar doesn’t show up on mobile devices/screen sizes.

Cheers,

Ronald
Patrick Cohen
- Technical Docs Wrangler
- 7,161 pts: Hero points 33,866 pts: Rep. points LEVEL 30
Hiya @dutchmen & @PC

This issue appears to only show up on older installs of WordPress that have been updated. On a new install of WP3.8, with or without BuddyPress, the adminbar links show up just fine when logged in or out.

There is a wonky bit of CSS from some older version hiding deep within the adminbar style-sheet that is mucking up the works.

To correct it, add the following to the style-sheet of your theme/child-theme (or a plugin like My Custom CSS) to allow the adminbar to display on smaller devices:

#wp-toolbar > ul > li {display:block;}
Dutchman
- The Bug Hunter
- 280 pts: Hero points 983 pts: Rep. points LEVEL 7
Hi Patrick,

Thanks for the feedback, but it seems it doesnt work for me.

I tried to put your code above in my custom css and as a plugin, either way, the admin bar is still not showing on a mobile device/responsive mode.

Any other suggestions?

Cheers,

Ronald
Patrick Cohen
- Technical Docs Wrangler
- 7,161 pts: Hero points 33,866 pts: Rep. points LEVEL 30
Hi again @dutchmen

Try with this plugin:

http://wordpress.org/plugins/my-custom-css/

I use it on all my sites and it works just fine every time.

1st screenshot shows the CSS being applied in the My Custom CSS style-sheet.

2nd screenshot shows the adminbar does display on a mobile.

[attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members]
Dutchman
- The Bug Hunter
- 280 pts: Hero points 983 pts: Rep. points LEVEL 7
Thanks Patrick, as always, you’re awesome!

I had to clean out the cache on my previous loaded screen.

Works perfectly!

Cheers,

Ronald
Dutchman
- The Bug Hunter
- 280 pts: Hero points 983 pts: Rep. points LEVEL 7
PS @Patrick

If I run a multi site with lots and lots of themes, would a plugin with this code that’s network activated, work?

Cheers,

Ronald
Patrick Cohen
- Technical Docs Wrangler
- 7,161 pts: Hero points 33,866 pts: Rep. points LEVEL 30
@dutchmen

Sure thing!

Here’s how to properly code a plugin to load a style-sheet:

http://stackoverflow.com/a/10897901

You could then network-activate your custom CSS plugin, or FTP it to your mu-plugins folder so it can’t be deactivated by anyone else who may have access to your network admin.
Dutchman
- The Bug Hunter
- 280 pts: Hero points 983 pts: Rep. points LEVEL 7
Awesome Patrick!

Thank you so much!

Cheers,

Ronald
Patrick Cohen
- Technical Docs Wrangler
- 7,161 pts: Hero points 33,866 pts: Rep. points LEVEL 30
@dutchmen

You’re very welcome!

Have fun!

:slight_smile:
PC
- WPMU DEV Initiate
- 6,409 pts: Hero points 23 pts: Rep. points LEVEL 1
Thanks for the awesomeness Patrick :slight_smile:

I just fixed one of my sites as well :wink: lol

Cheers, PC
Patrick Cohen
- Technical Docs Wrangler
- 7,161 pts: Hero points 33,866 pts: Rep. points LEVEL 30
@PC

Yay! You’re welcome too!

:slight_smile:

How do you rate me?

Thank you for rating your experience!