Header menu hiding behind video background on mobile

Store Design
, , ,
1

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.

2

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.

1 Like
3

@Salonesyd

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

4

https://marcythelabel.myshopify.com/

PW: leoski

Thank you!

5

Thank you so much, it worked!

6

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

7

How did you do that? I dont get it

8

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