[hapkidomanParticipant]

Hi!

In regards to https://buddhacentric.com/stream, I have the navbar and footer in transparency mode, which is great, but the background image is what I have for the entirety of my site (a background pattern). However, what I’d like is for the background image in the inner-container to be behind both the navbar and the footer. I’d like this to be the case (vs. having a page wide background image) because I want the parallax feature to be used.

Also, I would like the top navbar to be static so that it moves out of view as the user scrolls down. I’ve used:

body.page.page-id-6830 .x-navbar-static-active {
background-color:transparent;
}

in the custom CSS to no avail.

Do you have any options for me to create this effect?

Thank you!!

[CousettMember]

Unfortunately your website is not loading for me at this time could you check the URL and verify that it is correct. Thanks!

[hapkidomanParticipant]

Ugh – typo.

Try http://buddhacentric.com/stream

Should work 🙂

[Nabeel AModerator]

Hi again,

Thanks for providing us the URL.

To make the navbar static, go to Appearance > Customize > Header > Navbar Position and select Static Top. Make sure you save and publish your changes.

For the first part of your question, can you please explain it via screenshots? we’ll be happy to provide you with a response once we have a better understanding of the situation.

[hapkidomanParticipant]

Yes, let me set up some screenshots and I’ll upload them tomorrow (I’m currently in Kuala Lumpur). However, I was wanting the custom CSS as I just want the navbar to be static on certain pages (specifically the page linked) – not universally across my site.

[hapkidomanParticipant]

Attached are some screenshots.

Now, the pics aren’t perfect, but imagine the ‘navbar’ does not have the line below it and that the background image is in sync with the image above it (which is part of the content bar that has the parallax effect applied to it. I want the navbar to show and disappear as the user scrolls down. The soundcloud player will move above the image a bit per the parallax effect as well as the Footer below it.

Basically, I want a background image with EVERYTHING – content, footer, etc. – effected by the parallax effect with the addition of the navbar being static and disappearing as the user scrolls down.

Hope this makes sense!

[Nabeel AModerator]

Hi there,

To make the navbar fixed on the specific page, please use this CSS via Appearance > Customize > Custom > CSS

.page-id-6830 .x-navbar-fixed-top {
position: relative !important;
}

Let us know if this helps!

[hapkidomanParticipant]

Cool! That worked quite nicely, thank you!

Do you have any suggestions on having a FULL page pic with ALL content effected by the parallax effect (body content AND footer)?

[ChristianModerator]

You’re welcome. Full page parallax is possible provided that you setup everything in one row or content band.

Thanks.

[hapkidomanParticipant]

How would I go about setting the footer inside a content band? It’s not an element I can add to a row.

[ZeshanMember]

Hi there,

We’re sorry for the confusion! You cannot move footer in a content band without custom development. But unfortunately it will fall beyond the scope of support we can provide. You may wish to consult a developer, or a service like WerkPress or Elto to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[hapkidomanParticipant]

No worries – thanks for the tip!

[ChristopherModerator]

you’re welcome.

[Author]

Posts