Just a quick question. When I want to place the top menu with a transparent background on the hero/front background image, I need to place it inside the main area, and not the global header area?
I was able to make it look as desired that way:
When I tried using the header area for placing the menu on every page, the header area got the project’s default background color, so it wouldn’t slip/sit over the hero image/background.
So if I want this effect, should I do as I ended up doing (placing the menu inside the main area’s first bloc)?
Or is there a better way, trick for making the menu being global and still be transparent/on top of the hero image?
(I hope my English and question makes sense )
Thanks! Works like a charm. I must have overlooked the obvious padding in my previous testing …
Interesting that you say z-index: 1. So many set really high z-index. Not sure if it matters, but 1 is sufficient …
This could create complications in the further development of your site. Why use 999999 as simply 1 does the job? Unless you want to visualise your dream number in your bank account
In this example, how about if you wanted to make the “My Fancy Company” part scroll away as you scroll down/read the page, but make the menu itself sticky (.sticky-top in Bootstrap 5 IIRC)?
I’ve been experimenting a bit, but haven’t quite solved that yet …
If you’re keeping the nav global but want it over a hero just on your landing page add some CSS in the page header just on that page that sets the position fixed to top.
)
Unless you want to visualise your dream number in your bank account 
But then it seems I need to move the Nav into main content area to make it overlay the hero background image …