Element color invert

Hi everyone,

I was wondering if there is an easy way to have elements (logo/text) used in a navbar to be inverted for a better readability.
Example: background color of the page is white, navbar is transparent (and shold stay that way), navbar elements are black. When scrolling down there might come up a background element in black. When scrolling this element under the transparent navbar, content of the bar is not readable. I’m looking for a solutiuon to have the navbar elements switch to white. Found this nice and helpful tweak here: UIkit for RapidWeaver

Any idea how to do this? I guess there is a bit more programming skill needed, right? :innocent:

Thanks in advance
Ralf

The Foundry 3 Navigation Bar has a whole host of styling settings that are specific to the “sticky” navigation. You can have an alternate, inverted logo, change the styling colors and much more:

These, and more are covered in the Navigation Bar documentation over on the Foundry site if you’d like further information on them.

@elixirgraphics Thanks for your reply… Wasn’t quite aware of this. Will take a closer look into it. If it works out for me, then my bad for bothering… :wink:

Have a nice weekend
Ralf

No problem. There’s a lot of settings in the Navigation Bar tool.

@elixirgraphics one question: is it possible to have the regular navbar to also be transparent? I tried different ways but it stays white (when set to ‘transparent’. Is this a bug?

Stays white in Edit Mode or when Previewed / Published? The former is expected, the latter doesn’t sounds right. Feel free to share your project file here and we can take a look at it.

Please provide us a copy of your project file. Create a ZIP file containing your project file. This is the file you open in RapidWeaver to edit your site. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for us. Paste that download link in your reply.

That said, the Navigation Bar’s background can be set to transparent:

As well as you can use the Custom option and adjust the opacity on the color, here:

Ha! Found my problem…

  • First I simply put the navbar first and after that I started with background elements without taking a look at the settings in the Control Center – background-color: white :man_facepalming:. I guess that’s why I had the navbar in white.

  • Next up, I set the background color (a linear gradient) in the Control Center. The navbar wasn’t white anymore, but it resulted in a strange repetitive background depending on the height of all elements :thinking:. Maybe it’s just because I haven’t got enough elements placed (for now) so it doesn’t look nice.

  • A different approach is to used Blacksmith and giving the body element my gradient. But this is of course also depending on the amount of elements on the page :face_with_peeking_eye:.

Sorry for the “little chaos”…

Have a nice weekend
Ralf

1 Like

I’m not clear. It sounds like you solved your issue? If so I don’t need your project file. If you didn’t solve your issue, then I will need you to let me know where you stand and what you need me to look at.

Ah… :laughing:
Okay. My bad. This day was just too weird. Okay, then I can remove the file from my comment…

1 Like

No problem. I’ve had plenty of those days lately, too. :rofl:

Have a great weekend!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.