Edit Z-Index of Trustpilot widget in relation to menu on mobile

Edit Z-Index of Trustpilot widget in relation to menu on mobile

FFP
Tourist
6 0 2

Hello,

 

I am currently running into the issue of our Trustpilot widget indexing above our menu on mobile. What might need to be changed in the which liquid file to resolve this? The website currently facing this issue is: http://uk.starwoodsports.com

 

Thanks! 

 

 

IMG_4298.jpg

Replies 8 (8)

Guleria
Shopify Partner
3399 679 962

Hello,

Add this css in theme.css.liquid or related css file a/to theme you are using.

nav.panel-menu.mobile-main-menu.mmitemopen {
    z-index: 9999;
}


Thanks 

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization ( paid services )
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
FFP
Tourist
6 0 2

Hi @Guleria 

Thanks for the feedback! Where in the theme.css.liquid file would this need to be placed or is it an item that be included at any part of the file?

indextwo
Shopify Partner
15 1 5

Late answer, but for anyone else looking for a fix to this: you don't need to adjust your own theme's CSS (there may be more than just the navigation that the TrustPilot widget overlaps):

For some reason TrustPilot's widget has a default z-index of 1000. All you need to do is go into the TrustPilot app, click to manage Widgets, and select the widget you're having an issue with. On the left-hand side will be a list of various options, and one of those will have a title like 'Widget stacking order' and a default value of 1000. Change this to 0 (which is the default value for z-index) and it should now appear just fine.

n00b
Tom__Lane
New Member
16 0 0

This does not work for me either. Do you have any other suggestions?

indextwo
Shopify Partner
15 1 5

I think you'd need to inspect the TrustPilot widget in your browser and see where that `z-index` is being set, as _something_ will be placing it above your other content. It's possible it's in the theme; it's possible TrustPilot might be caching the CSS that's set for your widget. But figuring out where the widget's z-index is coming from will be key to solving it.

n00b
Tom__Lane
New Member
16 0 0

Sorry I've just read this again and I misunderstood the first time round. I think I have the opposite problem. The widget is showing fine on a computer screen but then on a phone screen it doesn't show up at all. I'm using the Dawn version 12 theme, have you heard of this happening before?

indextwo
Shopify Partner
15 1 5

It sounds like there's a rule somewhere that's hiding the TrustPilot widget on screens below a certain size. I haven't used Dawn, so I don't know if it's out of the box or you just use a Custom Liquid / HTML blow to insert it. But inspecting it (best to do it on a desktop with your browser in mobile mode) should show you what's happening.

 

If it's still something that's only happening on your phone and it appears fine on desktop browser in mobile mode, it's possible it's being blocked by something else (ad blocker in the browser, maybe?)

Check the inspector panel in your browser first and see if there's a rule that's hiding it.

n00b
Tom__Lane
New Member
16 0 0

Ok thanks for that info, I'll have a look into it