[Resolved] Sticky Bar at the Bottom of the Screen

[Zoltan]

Hi Guys,

I have created an additional footer bar with an ad, but it’s not sticky. I am using the “after_footer” hook on the entire site.

Current CSS:

/* Sticky footer bar */
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

How can I make the footer bar sticky on the entire site?

Thanks!

[Leo]

Hi there,

I have created an additional footer bar with an ad

I just checked the linked page but not seeing this. Can you confirm?

Let me know 🙂

[Zoltan]

Hi Leo,

I sent you the link again in a private note.

You should be able to see this one across the entire website unless you use an ad-blocker or similar.

Please let me know.

Thanks.

[Fernando]

Hi Zoltan,

How did you add your Custom CSS? Can you try adding it through Appearance > Customize > Additional CSS?

[Zoltan]

Hi Fernando,

So I added it through style.css in my Generate press child theme. All the other CSS is in that file.

But this CSS did not make the footer bar sticky. So when I follow your recommendation and add it through Appearance > Customize > Additional CSS, it makes the footer bar sticky.

Now it looks fine.

Just a side note, curious why this CSS or any CSS would not work in the child theme file but works in the additional CSS section?

Current CSS:

/* Sticky footer bar */
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

Thanks.

[Fernando]

There’s likely a syntax error somewhere on your style.css file. You’ll need to correct it. There’s are a bunch of syntax error site out there like this: http://csslint.net/

[Zoltan]

I will do that. Thank you, Fernando!

[Fernando]

You’re welcome, Zoltan!

[Author]

Posts