Fix WordPress Admin Bar blocking the header

tl;dr How To: Fix WordPress Admin Bar blocking the header

I’ve decided to create my very own WordPress theme, and while doing so, I had my admin bar disabled by default, then after almost finishing the theme, I decided to enable the WP Admin bar, that’s when I ran into the #wpadminbar issue, it was blocking my WP header, covering most part of my “Fixed” header.

When you finish your project; and at the very end, you usually are excited to release that new project as soon as possible, which made me wanted to find a quick fix for that issue, so I quickly ran to Google, and searched for “WordPress Admin Bar blocking the header” ; strangely, I couldn’t find any solution in the 1st 3 results (). That’s when I decided to find the solutions myself, and it’s actually very easy! and took only 2 minutes to do it!

just add this code to your template header/footer


var t = $("#wpadminbar").height();
$(#navigationBar).css("top",t);

and that’s it 🙂


About The Author

Brand Strategy - MENA I help brands excel on Twitter Speaker ( Twitter for business - Periscope for Business)



Join +4200 Subscribers

Subscribe and we will send you password to our execlusive content.

You can unsubscribe at any time.

@


Leave a reply

Your email address will not be published.