Beaver Builder and the admin bar in Microthemer

Tagged: , ,

Author Posts

Abland June 30, 2018 at 7:04 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hi,

When editing in Microthemer, then activating Beaver Builder, the top portion of the website in the preview is being drawn up 36px. In my sites I allow the admin bar to show but have selected it in Microthemer preferences to not show in the preview window.

Turns out Beaver Builder has a rule that overrides the Microthemr css to hide the admin bar. In the BB plugin folder:
/css/fl-builder.min.css

this line:
html.fl-builder-is-showing-toolbar{margin-top:42px!important}

works when replaced with this:
html.fl-builder-is-showing-toolbar.no-admin-bar-please{margin-top:78px!important}html.fl-builder-is-showing-toolbar{margin-top:42px}

I tried to edit this outside of the BB plugin file but couldn’t make it work, so this is my temporary solution until something more permanent shows up.

Sebastian July 3, 2018 at 4:12 pm

Hey Abland,

Thanks for sharing your solution.

I wasn’t able to replicate this with my version of Beaver Builder (2.1.0.2). I’ve requested the latest version from the BB folks for testing. But can I just make sure I understand your issue. Is it the margins that are wrong, or is the WP admin toolbar showing when it shouldn’t? If it’s the latter, I could tell how your fix was helping. But as I said, I haven’t been able to replicate the issue.

Cheers,
Sebastian

Abland July 3, 2018 at 9:18 pm

Hi, Sebastian,

Thanks for the follow up. I think I made an error in my math in saying 36px – it’s actually 32px that it’s being drawn up and instead of 78px it needs 74px in my quick fix.

Here’s how it’s happening on my installs:
– sites allow the admin bar to show when logged in
– Microthemer preferences are set to hide the admin bar when in preview window – this part works spot on as the admin bar display:none while the “css/frontend.min.css” rule (desktop in this case) pulls the margin up -32px to take care of the resultant blank bar across the top in the preview window.
– when I activate Beaver Builder their rule in “/css/fl-builder.min.css” doesn’t recognize display:none – it only sees the admin bar is active so adds their 42px margin while Microthemer’s -32px is still active so the extra 32px in my quick fix is to offset the -32px still active in Microthemer’s rule.

I tried to write some specific rules in the “css/frontend.min.css” of Microthemer but was coming up short in my efforts. I’ll try fresh eyes again 🙂


Sebastian July 6, 2018 at 9:07 am

Aha, I think I see what you mean now. Thanks for the clarification. The negative margin shouldn’t apply when Beaver Builder is active as there needs to be room for Beaver Builder’s top toolbar. Otherwise the very top of the site is obscured by BB’s toolbar.

Does this change to Microthemer’s styles in css/frontend.min.css solve your issue?

html.no-admin-bar-please body:not(.fl-builder-edit) {
    margin-top: -32px;
}

adding :not(.fl-builder-edit)

If so I will include it in the next release of Microthemer.

Cheers,
Sebastian

Abland July 13, 2018 at 7:08 pm

Hi, Sebastian,

My apologies for the long delay in replying. I tested the new bit of code you suggested and after a prolonged battle with Beaver Builder’s cache, plus that of my own caching, I can finally confirm that the code does work 😀

I only tried in Chrome but loading Microthemer, then loading and unloading Beaver Builder, worked properly on the top margins and none of the page was being overlapped at any point of testing.

I was almost sure I had tried similar code and it didn’t work for me, but realizing how deep the caching went is probably why I wasn’t having any success. Thanks!


Sebastian July 16, 2018 at 10:54 am

Hey Abland,

Thanks for confirming. I’ve lost count of the number of times caching has tripped me up 🙂

I’ll include the CSS in the next update 🙂

Cheers,
Sebastian

You must login or register to reply to this topic.