Header menu hiding behind video background on mobile

[Salonesyd]

Hi there, 

I have added a video background section but the drop down header menu now hides behind when clicked on. Can you please help? I am using the Dawn theme. 

[NomtechSolution · Accepted solution]

To ensure that the dropdown header menu appears above the video background section in the Dawn theme, you can adjust the CSS z-index property. Here's an example of how you can do it:

1. Find the CSS selector for the video background section: Identify the CSS selector for the element that represents your video background section. It could be a class or an ID assigned to the section or a specific container within the section. For the purpose of this example, let's assume the selector is .video-background-section.

2. Update the CSS for the video background section: Apply a higher z-index value to the video background section to ensure it appears below the dropdown menu. Add the following CSS code to your theme's stylesheet or within the <style> tags in the Liquid section where the video background is implemented:

.video-background-section {
  position: relative;
  z-index: -1;
}

In the above code, the z-index property is set to -1 for the video background section. This places it below the default z-index of other elements on the page, allowing the dropdown menu to appear above it when clicked.

[Salonesyd]

Thank you so much, it worked!

[PeakyCC]

How did you do that? I dont get it 

[PeakyCC]

I did it. But it did not work. Is this still the answer to that Problem? 

[Rayen1]

It doesn't seem to work. Is this solution still up to date?

[shreyhweb]

@Salonesyd 

share the store URL then we will able to help you.

[Salonesyd]

https://marcythelabel.myshopify.com/

PW: leoski

Thank you!