[Resolved] Make top bar widget stick along with header

[CRISTO]

This is probably a two-part question:

1. I have a special notice placed in the top bar widget, but want to make it sticky. Not sure how to do that.

2. I have my header sticky, but would like the background to show the way it does before it goes sticky…sky color and clouds. As it is now, it just puts my logo to the left of the menu. Over time, I have added some CSS…usually at your suggestion, since I am not confident of using any CSS by myself…perhaps I added some that was OK at the time but not needed anymore.

Using the latest GP premium update.

[Leo]

Hi there,

Try this:

.top-bar {
    position: sticky;
    top: 0;
    z-index: 99;
}
#sticky-navigation {
    margin-top: 70px !important;
    background-image: url(https://thecatholictravelguide.com/wp-content/uploads/2019/12/Sky-blue-background-1400-we.jpg);
}

[CRISTO]

Thanks, Leo. Getting close. It works but only puts the last line of the notice up there on sticky. It looks ok when I am in customizer, preview but then when I go to the site it doesn’t. Cleared my cache.

[CRISTO]

well, on Firefox it looks great. I usually use Chrome…maybe I just need to clear my cache again. Will let you kow.

[Leo]

I’m using Chrome as well and it looks fine to me.

Maybe disable the sticky navigation transition?

[CRISTO]

If you mean change Nav Logo placement from sticky to static, I did that. But still do not see any change.

[CRISTO]

Ok…I see what the problem was. I was looking at it in the editor and not the published version. Thanks for your help. As usual, Leo, you made my day easier and my site look better. Like the way the heading scrolls with the background image and of course the coronavirus notification.

[Leo]

No problem 🙂

Stay safe!

[Author]

Posts