[German Molina]

When I publish the bar, this bar covers the logo and the menu of the page and creates a white space after the main menu, how can I solve this?

[Aakash Chakravarthy]

Hi Molina,

Can you please share your website link with the announcement active ?

I’ll take a look and provide a fix.

Thanks,
Aakash

[Aakash Chakravarthy]

Marking this thread as resolved for inactivity.

[[email protected]]

I’m having the same problem, see here: http://wordpress.ems-oetlingen.de

[Aakash Chakravarthy]

Hi Michael,

I’ll get back to you on this with a CSS to fix.

Thanks,
Aakash

[Aakash Chakravarthy]

Hi Michael,

When I saw your website, it was working correctly as expected and there was no issue.

The announcement was shown above the page and not overflowing.

Can you please check if issue still exists ?

Thanks,
Aakash

[[email protected]]

You’re right. I changed the template yesterday, seems to work with this one.

[Jeffery Clark]

same issue at http://www.207chiro.com

[Aakash Chakravarthy]

Hi @jefferyclark,

I’m checking. Seems like a theme problem. I’ll see if I can suggest any workaround.

Thanks,
Aakash

[Alain Artero]

Hi Aakash,

We have the same issue here. After one or two reloads, usually, it works . It seems that some scripts or ressources have to be in cache to have it displayed well. We are using DIVI theme.

The same behaviour can be seen on https://207chiro.com (some reloads makes it work)

Very annoying^^ If this is not solved we will have to find another solution.

Thanks
Alain

[Aakash Chakravarthy]

Hi Alain,

Announcer already has the feature to push the header down.

In your case, the theme takes an unusual way to position the header.

It forces the header to stick on top of anything.
Announcer cannot detect such elements sticking to the top.
It already adds a padding/spacer to the top of the page. Despite adding that the header dynamically sticks over on top of that.

Even if you choose another plugin, you will see the same issue.

I can suggest the following:

1) Check your theme settings and see if there is any kind of option to position the header in static mode instead of “absolute or fixed or floating” mode.

2) You can try the below CSS. This should force the header to not stick to the top. I didn’t try all sizes and scenarios. But it should help in some way. You can get help from your theme dev to extend this CSS If required.

@media all and (max-width: 980px) {
    #main-header{
        position: static !important;
        padding-top: 0 !important;
    }
    #page-container{
        padding-top: 55px !important;
    }
}

Thanks,
Aakash

[Alain Artero]

Hi Aakash

Thanks for your quick reply!
I am not 100% convinced by your answer because this does not explain why it works after some reloads.

It forces the header to stick on top of anything. if it was the real cause, some reloads would not change anything^^

Anyway, many thanks for your trick.
I played a little and below is what I use now for both desktop ans mobile versions. it looks to behave the way it should.

/*  for announcer */

    #main-header{
        position: static !important;
        padding-top: 0 !important;
    }

    #page-container{
        padding-top: 0px !important;
    }
/* end for announcer */

I placed this in the “additional CSS” section in WP/DIVI backoffice.

Hope it helps for others facing the same issue one day.

All the best
Alain

[Aakash Chakravarthy]

Hi Alain,

The theme uses javascript to position the header at the top of the page. So it might vary depending on the elements computed at that time. There could be timing conditions. I’m not aware of the logic behind that.

The above CSS will force push the header down. Good that it worked for you.

Thanks,
Aakash

[Author]

Posts