Sticky header/menu is hiding behind custom review widget

Store Design
, ,
1

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

Drop down menu displaying underneath widget
Drop down menu displaying underneath widget2940×1912 569 KB

2

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.

3

Hi @bittersweetchox ,

Add below css to the base.css file.

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

LuffyOnePiece_0-1718101962526.png
LuffyOnePiece_0-1718101962526.png1197×798 103 KB

Thank you

4

Thank you! This worked perfectly