Dawn - Chat widget over menu and filter menu

Store Design
1

Hi there.

I am using Dawn theme with inbox chat enabled and google reviews widget enabled.

When i open the sidebar menu or the filter dialog in collection pages the chat and google widgets are on top on the menus which limits the functionality of the apply button in filter.

If you want to make it disappear when you open these menus and make appear when you close it just paste this code in your custom css field in the DAWN settings.


@media(max-width:989px){
  .mobile-facets,
  body:has(#Details-menu-drawer-container[open]) .section-header{
    z-index:2147483647!important
  }

  body:has(:is(
    .mobile-facets__disclosure.menu-opening,
    #Details-menu-drawer-container[open]
  )) :is(
    #shopify-chat,
    #dummy-chat-button-iframe,
    iframe#ShopifyChat,
    merchant-widget,
    google-merchant-widget,
    #google_customer_reviews_badge,
    [id^="___ratingbadge"],
    iframe[src*="merchantwidget"],
    iframe[src*="shopping/merchant"],
    iframe[title*="Google" i][title*="store" i],
    [id*="merchant" i][id*="widget" i],
    [class*="merchant" i][class*="widget" i]
  ){
    display:none!important
  }
}

Hope this helps. Cheers

2

So u are helping us or trying to find a solution to something

3

Hi @kub

Paste this code into the Custom CSS field in your Dawn theme settings:

@media screen and (max-width: 989px) {
.mobile-facets,
body:has(#Details-menu-drawer-container[open]) .section-header {
z-index: 2147483647 !important;
}

body:has(
.mobile-facets__disclosure.menu-opening,
#Details-menu-drawer-container[open]
) :is(
#shopify-chat,
#dummy-chat-button-iframe,
iframe#ShopifyChat,
merchant-widget,
google-merchant-widget,
#google_customer_reviews_badge,
[id^=“___ratingbadge”],
iframe[src*=“merchantwidget”],
iframe[src*=“shopping/merchant”],
iframe[title*=“Google” i][title*=“store” i],
[id*=“merchant” i][id*=“widget” i],
[class*=“merchant” i][class*=“widget” i]
) {
display: none !important;
}
}

5

Hi. I think I wrote why i posted it. I hope this helps somebody.

6

That’s a good point. Maybe i didn’t try the easier way. I will check it.

7

Here is the approach with z-index. Works the same. has() is supported by most modern browsers. Less code and effective. Only the google widget stays there. If you use it so you should use the other solution.

Hope this helps somebody. Cheers

@media(max-width:989px){
  .mobile-facets,
  .menu-drawer,
  .section-header{
    z-index:2147483647!important
  }
}