[Resolved] Main container being pushed down by SUMO plugin ( welcome banner )

[Conor]

Hi,

So I just got sumo and I am very happy with the plugin, unfortunately, everytime the welcome banner pops down it displaces my blog container.

when you load my website, you will notice that the sidebar and the main container will be inline, but, once the sumo welcome banner loads, the main container will shift to be a few inches bellow the sidebar.

I asked sumo support about this issue, and they replied with this:

Hi there,

Ah, I can see that now.

I would recommend that you look into your container’s settings and remove the style= margin-top: 57px, that would resolve the issue.

Look for the element main.site-main on your CSS Stylesheet and remove the margin-top value on it.

Unfortunately, this is something that we are restricted from managing for you. If you are not able to do this, you may want to reach out to your web developer for some help.

Let me know your thoughts.

I’ve been looking how to fix this but I don’t know if this is the right answer. Hopefully, GP can help.

Thank you so much for everything,
C

[Leo]

Hi there,

I don’t believe the margin-top property is coming from GP as it’s added as inline style (GP doesn’t add things like this as inline style as it’s hard to overwrite).

I actually think that the plugin is actually adding it as they’ve added some markup to the main container:
https://www.screencast.com/t/oLQ7KfkNyxpa

Can you disable the Sumo plugin first and let me have another look?

Let me know 🙂

[Conor]

Okay,

I will disable Sumo right now. Let me know what you find. I do really want to make SUMO work one way or another!

[Leo]

Yup as you can see now there is no margin-top: 57px; added as inline style:
https://www.screencast.com/t/RWrkXHIEmXN

Therefore it’s actually added by the plugin.

[Conor]

So do you know what I should do?

[Leo]

The plugin support will need to fix that issue for you.

[Conor]

Fair enough,

That said, I do have this advice from their developer…

“Get rid of – style= margin-top: 57px, that would resolve the issue.

Look for the element main.site-main on your CSS Stylesheet and remove the margin-top value on it.”

But when I look in elements I can’t find that main.site-main.

Do you know where I should go to find this?

[Leo]

As I mentioned above, the margin-top: 57px is added by the plugin and not by GP (GP doesn’t add inline styles) – therefore you won’t find it in GP.

If you compare the two screenshots:

– Using Sumo: https://www.screencast.com/t/oLQ7KfkNyxpa
– Without using Sumo: https://www.screencast.com/t/RWrkXHIEmXN

The HTML markup data-sumo-smart-bar-data and style="margin-top: 57px" only eixst when the plugin is used.

I would recommend checking with their support again 🙂

[Conor]

Checked with their support again. Here is what was said.

”
Hi there,

Hmmm, would you let me try and locate where you could change that? I will not make the changes myself, I will just locate that section in your website.

If so, would you allow me access into your website’s admin section, perhaps with Admin access level so I can look around.

About accessing Sumo CSS – you would not be able to locally apply changes to it, even if you have access to it, because it would still revert back to its original settings. The CSS of Sumo is being managed globally from our Dev Team’s desk. So that being said, if any change is made on a CSS line, it would apply globally, meaning to all hundred of thousands of user all over the world.

We have had a few cases like this in the past, and the recommendation we make is just to edit their site’s CSS Stylesheet.

Let me know your thoughts.
”

Now, before I let this guy into my website, which I rather not do, I’m wondering if you know how I can get into my css stylesheet and just delete this 57 margin piece and see what happens. I just don’t know how to get into my css stylesheet.

Thanks for everything,
C

[Leo]

You will not find margin-top: 57px in any of GP’s style sheet as it’s added as inline style and not by GP – this is already proven by comparing the HTML markup with and without Sumo plugin as shown in the screenshots above.

[Conor]

So, Leo,

Is there anything that I can do? I have the guy at SUMO, as you see, saying that I can’t change the SUMO code. Is there any solution that causes my container to move up a few inches, maybe if I gave it a negative value? The SUMO thing will always be there so maybe a -57 value and allowing it to go over other elements would do the trick.

Cheers,
C

[Leo]

You could try this CSS as a patch:

.separate-containers .site-main {
    margin-top: 5px !important;
}

[Conor]

Thank you so much, it worked!

Cheers,
C

[Leo]

No problem 🙂

[Author]

Posts