Removing collection sidebar on Mobile in Supply Theme theme.scss.liquid

Solved

Hello,

We're trying and failing to figure out how to block!important or hide!important collection sidebar.  On why this is useful, our Cumulative Layout Shift (CLS) is shifted by the collection sidebar and it can't be seen anyway on almost any mobile device.  So we're trying to remove the collection sidebar entirely on mobile devices so that it is no longer part of our Cumulative Layout Shift (CLS) for Mobile.

collection sidebar.png

 

Below are two of my failed attempts.  Can you help us?  Much thanks for your help advance.  Dan.

@_media only screen and (max-width: 600px){
  	collections.sidebar,
	.sidebar-linkks .hide-mobile,
	.sidebar-link .hide-mobile,
	.fun-links .hide-mobile,
  	.sidebar .hide-mobile,
    collections.sidebar.shop_by .hide-mobile,
  	collections.sidebar.all .hide-mobile,
  	collections.sidebar.all_collection .hide-mobile
  	{
    display: none!important;
	}
}

 

@_media only screen and (max-width: 600px){
  	collectionFilters.sidebar,
	.grid-item.large--one-quarter.collection-filters .hide-mobile
  	{
    display: none!important;
	}
}

 

Ankit_R
Shopify Expert
32 3 7

No need to change the css.

Just add a css class on sidebar html code.

I mean::

Change <aside class="sidebar grid-item large--one-quarter collection-filters" id="collectionFilters">
to <aside class="sidebar grid-item large--one-quarter small--hide collection-filters" id="collectionFilters">

It will work!

Want to modify or custom changes on store for affordable price?
Hire us - https://experts.shopify.com/mandasa-technologies
Website: http://www.mandasa.in/
Email: info@mandasa.in
If helpful then please Like and Accept Solution.
0 Likes
KetanKumar
Shopify Partner
14259 1659 5139

@TheGameSteward 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes

Hi 

This is the link to our web page 

Much thanks for your help,

Dan

0 Likes

Thanks Ankit,

You wrote to change

<aside class="sidebar grid-item large--one-quarter collection-filters" id="collectionFilters">

to

<aside class="sidebar grid-item large--one-quarter small--hide collection-filters" id="collectionFilters">

Apologies, but could you reply with how to stipulate this to effect Mobile screens only?  (as we don't wish to remove or hide the collection sidebar for non-Mobile.)

Much Thanks,

Dan

This is an accepted solution.

Hello,

To hide a collection side-bar on Shopify Supply Theme, the following code was given to us from Shopify Support

@media only screen and (max-width: 768px){
.collection-filters.sidebar {
display: none!important;
}
}

Dan

www.thegamesteward.com