How can I fix a drop down menu displaying under the image?

[Char_67]

I was hoping to get some help in regards to the drop down menu on my website. The header menu on the home page is displaying underneath the image, making it un-clickable.

Would appreciate any idea on how to fix this.

I have followed the suggestion on previous discussions here, but either I'm not implementing them correctly, or it just doesn't work for my page. 

Thank you in advance

[frankausau · Accepted solution]

@Char_67 can you send me the URL to this page?

[frankausau · Accepted solution]

@Char_67 can you send me the URL to this page?

[Char_67]

Web page as follows, thank you

https://patsports.com.au/

[Char_67]

www.patsports.com.au

[PageFly-Victor · Accepted solution]

Hi @Char_67,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets -> section-image-banner.css

.banner__content {

    z-index: 0 !important;

}

.banner:after, .banner__media:after {

    content: "";

    position: absolute;

    top: 0;

    background: #000000;

    opacity: 0;

    z-index: 0 !important;

    width: 100%;

    height: 100%;

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

[Char_67]

Thank you so much, it's working!! Consider yourself hugged!!

[GemPages]

Hi @Char_67 

I would like to give you a solution to support you. 

1. Go to Online Store -> Theme -> Edit code https://prnt.sc/NIubHkOJxV7S
2. Open your theme.liquid theme file https://prnt.sc/iRHDw5p3FdP8
3. Paste the below code before </head>

<style>
  #shopify-section-header{
    position: relative;
  }
</style>

Besides I also see the page showing some unwanted text. The position of the texts can be seen in the image https://prnt.sc/8oiL_9UG_62d

I hope you can fix the problem.

Best regards,
GemPages Support Team