Infinity Pro – Sticky Message widget

[samara.albadri]

Hi all,

I have added the sticky message as per Brian Gardner's instructions and it works https://briangardner.com/genesis-sticky-message/

However doesn't show up properly upon scrolling down.

Can someone please point me in the right direction on what I need to change to get it to show once scrolling, i'm stuck.

Many thanks

Samara

https://samaraalbadri.com/

[Brad Dalton]

Increase the padding to padding-top: 120px;

Line 2317 in style.css

.sticky-message {
	background-color: #deb0b0;
	font-size: 16px;
	opacity: 0;
	padding-bottom: 20px;
	padding-top: 120px;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 999;
}

Or you could add a margin-top: 70px;

.sticky-message {
	background-color: #deb0b0;
	font-size: 16px;
	opacity: 0;
	padding-bottom: 20px;
	padding-top: 20px;
        margin-top: 70px;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 999;
}

You'll also need CSS for Media Queries.

@media only screen and (max-width: 800px) {

	.sticky-message {
            padding-top: 20px;
    }

}

Also, don't forget to clear browser caching otherwise it might seem like the CSS doesn't work.

---

Tutorials for StudioPress Themes & WooCommerce.

[Brad Dalton]

Full tutorial, supported for members.

---

Tutorials for StudioPress Themes & WooCommerce.

[samara.albadri]

Thank you for all your help, Brad. You are awesome! Much appreciated.

[Brad Dalton]

Anytime.

---

Tutorials for StudioPress Themes & WooCommerce.

[mike]

Hey Brad, I got this to work, but the nav menu no longer clings to the top as you scroll, there is the space there that the sticky message filled per screenshots below.
Before scroll:

Scroll:

Is there a simple fix to force the nav menu back up to the top as you scroll down? Thanks-

[Brad Dalton]

What theme are you using?

---

Tutorials for StudioPress Themes & WooCommerce.

[mike]

Infinity Pro. I'm testing a preview site here.

[Author]

Posts