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?
Thanks in advance
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…
Have a nice weekend
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 . 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 . 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 .
Sorry for the “little chaos”…
Have a nice weekend
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.
Okay. My bad. This day was just too weird. Okay, then I can remove the file from my comment…
No problem. I’ve had plenty of those days lately, too.
Have a great weekend!
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.