Best practice? NavBar will have different BG on all pages but home

[Lauren_Thomson]

I’m wondering what the recommended practice should be for styling the nav bar on all pages except the home page. It would be exactly the same except the home page nav has a transparent BG and the inside pages have an image. I ask mostly because I will be changing the hero image that shows behind the transparent home nav monthly and would like to change the inside coordinating nav bar BG image just once monthly for all inside pages. Would this be best done by creating a separate nav bar with the BG for inside pages or just adding a class to the existing nav bar on each page?

Thanks!

---

Here is my site Read-Only: Webflow - Valley View Farms

[bro-design (Dmitrii Tregubov)]

Hi @Lauren_Thomson Easiest way is:

#1 As you want that on most of pages navbar should have a background image — set the background image for NavBarTitleText:

#2 On home page for Body add combo class is-nav-transparent:

#3 In project setting paste this CSS into Head code area:

<style>
body.is-nav-transparent .NavBarTitleText {
  background-image: none;
}
</style>

Now you may use one Navbar Symbol named «NavBarBeatrix» on all pages and if on some page need to set a transparent background — just add to Body combo class is-transparent

[Lauren_Thomson]

fantastic. thank you so much.

[Lauren_Thomson]

Except it’s not working…

Is it something about my multiple Body tags?

https://preview.webflow.com/preview/valley-view-farms?utm_medium=preview_link&utm_source=designer&utm_content=valley-view-farms&preview=f81e73e173252e159874f6ede51ea058&locale=en&workflow=preview

[bro-design (Dmitrii Tregubov)]

@Lauren_Thomson In custom code you write body2, try to use my code

[Lauren_Thomson]

@bro-design

is-nav-transparent

Thank you for helping me! I used your code but still not working…

https://preview.webflow.com/preview/valley-view-farms?utm_medium=preview_link&utm_source=designer&utm_content=valley-view-farms&preview=f81e73e173252e159874f6ede51ea058&workflow=preview

[Lauren_Thomson]

[bro-design (Dmitrii Tregubov)]

Not that🙃 Please bring back what you did now and do exactly as I indicated in the step-by-step instructions above

[Lauren_Thomson]

@bro-design

is-transparent

I believe it is your instructions exactly…,. but nav bar BG image still shows on home page.

I’m a little confused by this:

Did you mean is-nav-transparent :?

[bro-design (Dmitrii Tregubov)]

@Lauren_Thomson sooo… it’s a Webflow’s bug💁‍♂️

Here is how to fix it:

[Lauren_Thomson]

I did exactly what you did, and it is still not working.
Thank you for your continued support!

https://preview.webflow.com/preview/valley-view-farms?utm_medium=preview_link&utm_source=designer&utm_content=valley-view-farms&preview=f81e73e173252e159874f6ede51ea058&workflow=preview

[bro-design (Dmitrii Tregubov)]

You name navbar as:

But in custom code it:

<style>
body.is-nav-transparent .nav_wrap {
  background-image: none;
}
</style>

Just name them the same🌝

[Lauren_Thomson]

Sorry. My mistake. Long day.
I fixed it but it’s still not working.

(BTW I really appreciate your help. I have learned a lot. I’ve been designing websites for 20 years but this is my first Webflow site. Trying to figure it all out.)

https://preview.webflow.com/preview/valley-view-farms?utm_medium=preview_link&utm_source=designer&utm_content=valley-view-farms&preview=f81e73e173252e159874f6ede51ea058&workflow=preview

[bro-design (Dmitrii Tregubov)]

Yeah, the last is remember: in custom CSS use only lowercase letters

Webflow has trained users to use capital letters when naming classes in capital letters, but Webflow is automatically converts capital letters to small letters in CSS😁

Ideally, get into the habit of naming all classes in Webflow in small letters, and instead of spaces, use “-” or “_” (Webflow also replaces spaces with “-” in the compiled code).

Good luck​:v:

[Lauren_Thomson]

Seems to be working here: https://valley-view-farms.webflow.io/

(just not in my preview or dashboard)
I’

ll revisit tomorrow. THANK YOU

[bro-design (Dmitrii Tregubov)]

About showing an effect only on live website — thats ok, you may read a notice above the Head code field:

If you want to see an effect also in designer mode you should:

#1 Create an Embed Code element on the page
#2 Paste you style code there (like as on my video)
#3 Convert the Embed Code element into Symbol
#4 Paste this symbol to all pages
#5 Done✅

[Lauren_Thomson]

Oh thank you!!! You are the best.