Transparent Navigation Menu with Logo that cross over another block


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

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

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

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.