Top menu on hero/background image

General Discussion
#1

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:

image
image1242×440 27.9 KB

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 :sweat_smile:)

#2

Just set header padding to ‘0’, add a class with position absolute and z-index 1.

2022-07-29_16-17-28

1 Like
#3

Thanks! Works like a charm. I must have overlooked the obvious padding in my previous testing … :man_facepalming:
Interesting that you say z-index: 1. So many set really high z-index. Not sure if it matters, but 1 is sufficient … :sweat_smile:

#4

This could create complications in the further development of your site. Why use 999999 as simply 1 does the job? :thinking: Unless you want to visualise your dream number in your bank account :rofl:

3 Likes
#5

We usually do that to prevent rendering foreign/external code from overlapping.

#6

The bigger the better :stuck_out_tongue:

1 Like
#7

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 … :nerd_face:

#8

Why not keep it simple and use the ‘sticky’ tick-box? :thinking:

2022-08-01_06-05-18
2022-08-01_06-05-18782×500 149 KB

1 Like
#9

Tried that.:innocent: But then it seems I need to move the Nav into main content area to make it overlay the hero background image … :thinking: :sweat_smile:

#10

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.

I do it occasionally.