[Resolved] Announcements plugin ruining my header?

[unoaime]

As you can see when you click on my link in private information, there’s an announcement message talking about covid. On the homepage it displays fine but if it pops up on another page it’s messing with my header a bit. You can see hows its meant to be after clicking “got it”.

I’ve tried a few different plugins and they all do the same? I’m sure its an easy fix and i’m just being dumb. Can anyone help? Hoping to get the site fully live tomorrow.

[Leo]

Hi Chris,

Unfortunately I don’t think there is anything we can do from GP’s end.

It looks like your header layout is a bit different when comparing the home page and other page even without the bar though:

Home page: https://www.screencast.com/t/rIuaWuBMNl

Other pages: https://www.screencast.com/t/s9xXAIXtCR

Is that correct?

[unoaime]

Thanks for your reply.

Hmm, no that is not correct. It displays the same as the homepage on other pages for me. I tried quite a few different layouts in chrome tools as well so that’s weird. :/

Do you think I should keep trying different announcement plugins? Or is there an easy way I can just have a bar permanently there saying the information until I decide to take it off?

[Leo]

Or is there an easy way I can just have a bar permanently there saying the information until I decide to take it off?

To have it permanently there is actually much easier as you can just use the top bar widget area:
https://docs.generatepress.com/article/top-bar-widget-area/

[unoaime]

Ah brilliant. The worst thing is I think I’ve actually used the top bar before! lol

Sadly this also messes my header up. How can I get it to how it is on the homepage on your first screenshot on all the pages? (current site has topbar activated)

Thanks again.

[unoaime]

Don’t understand how its fine without a topbar or announcement plugin but messes up when I activate one. 🙁

[unoaime]

I’ve had to put the coming soon back on the website overnight (as it’s not ready for launch) but I will bump in the morning if that’s okay?

[Leo]

Sorry Chris I’m just getting to it now.

Any chance you can create a staging site for it so you can leave the site open for us to see?

Thanks!

[unoaime]

Hi Leo, sorry I went to bed as soon as I posted that. (i live in the UK). I really should have set up a staging site beforehand, to be honest, seems not really necessary when it’s just this one thing I need to finish now though.

Is it possible for you to post here when you’re online again and I’ll open it back up? I have it set to send me an email when you do and i’m online all day.

If that’s too much to ask, no worries – I’ll sort out a staging site.

[unoaime]

I’ve opened the site up. I just want the header to show like it does here.

I had it as i wanted before on non-home pages with

body:not(.home) .header-wrap {
    top: 30px;
}

body:not(.home) .page-hero {
    margin-top: 100px;
}

But the top bar messes with it.

[David]

Hi there,

i am currently seeing a top bar with a text widget ? Wheres the announcement plugin output ? Any chance i can see that enabled.

[unoaime]

Hi Dave, thanks for the reply. I’m not actually sure but I think you originally gave me the code to help with my header. 🙂

I’m using the topbar instead now but got the same results. I’ve since found out though that it may have been the admin bar causing the problem as it’s fine when i’m logged out.

body:not(.home) .header-wrap {
    top: 0px;
}

body:not(.home) .page-hero {
    margin-top: 165px;
}

I set had top set to 30px for it to look nice for me but it wasnt for other people. Put that back to 0px and its fine when i’m logged out, but doesnt look great when i’m logged in. I can deal with that though i think, unless there’s a simple fix?

[David]

You can use the admin-bar body class to apply different CSS for when you’re logged in.

e,g

/* CSS for logged in and Admin bar is visible */ 
body:not(.home).admin-bar .header-wrap {
    

body:not(.home).admin-bar .page-hero {
    /* styles here */
}

/* CSS for logged out ie. no Admin bar */

body:not(.home) .header-wrap {
    /* styles here */
}

body:not(.home) .page-hero {
    /* styles here */
}

[unoaime]

Fantastic. Leo and Dave. Gods amongst men! Thank you so much!

[David]

Glad we could be of help!

[Author]

Posts