Solved

Sticky header/menu is hiding behind custom review widget

bittersweetchox
Visitor
2 0 0

I recently added a widget to my website homepage and one other page to display our Tripadvisor reviews. This was done using a HTML code snippet (generated by the widget website I used) which was inserted into a raw html section within those pages. The widget is showing over the top of the sticky header and therefore blocking the menu dropdowns which looks very unprofessional and reduces functionality. This problem is exclusive to the widget, as shown in the image below. How can I solve this? I can provide code if needed, Thanks.

Here is the website: www.bittersweetchocolates.co.uk 

Screenshot 2024-06-11 at 11.01.51.png

Accepted Solution (1)

Rishihuptech
Shopify Partner
601 108 121

This is an accepted solution.

Hello! @bittersweetchox Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

body .shopify-section.pxs-rich-text-section {
    position: relative !important;
    z-index: 1 !important;
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 3 (3)

Rishihuptech
Shopify Partner
601 108 121

This is an accepted solution.

Hello! @bittersweetchox Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

body .shopify-section.pxs-rich-text-section {
    position: relative !important;
    z-index: 1 !important;
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
bittersweetchox
Visitor
2 0 0

Thank you! This worked perfectly

LuffyOnePiece
Shopify Partner
607 87 105

Hi @bittersweetchox ,

 

Add below css to the base.css file.

body .eIMmgT * {
    z-index: 1 !important;
}

 

LuffyOnePiece_0-1718101962526.png

 

 

Thank you

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184