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?
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:
@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:
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 .
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.