Transparent Navigation Menu with Logo that cross over another block

I Need Help
1

Hello,

I would like to do something like this: example

I know how to do in CSS, but I would like to do it in Blocs… I am having no success.

All the best,

Rom Pereira

2

The sample is using a repeating background image (png). You could do it that way, but I would do it with CSS.

  • Select the navigation Bloc with the Logo and place it in the top global area
  • Mark it as sticky in the sidebar
  • Select the Menu item within the Bloc
  • Under appearance change the color to a white
  • Select the Bloc and add a custom class
  • Edit the custom class background color to the color you want (something like 56 56 56) and set the opacity to less than 100% (something like 50%).
1 Like
3

I see. Thank you for the tip in regards the repeating background and transparency. Any idea about the logo crossing to another Bloc? Thank you, Rom Pereira

4

It probably could be done, most likely with some JavaScript. I’m kinda new at Bloc’s, so perhaps someone else may have some input on this. One thing I noticed is the sample site you gave, it doesn’t scale very well on mobile there’s not a lot of room for content. The logo, navigation, and other sticky items take up most of the screen real estate.