Solved

How to eliminate the 'X' close menu button in Refresh theme?

EthanOSHOP
Explorer
70 0 13

How do I remove the 'X' (close) menu button that appears over the menu icon when you open the menu?

Image 17-01-2024 at 00.47.jpeg

Accepted Solution (1)
Guleria
Shopify Partner
3107 611 871

This is an accepted solution.

I think there is error in your css.

btw to confirm use the code in this way:
Edit theme.liquid search for </body> nor here just above of it place the css.
like this

<style>
.menu-drawer-container.menu-opening svg:first-child {
    display: none !important;
 }
body svg.icon.icon-search{
height:20px !important;
width:20px !important;
}
</style>

  Note: Don't change/break anything else.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 13 (13)

Guleria
Shopify Partner
3107 611 871

Please share the store URL.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
EthanOSHOP
Explorer
70 0 13

The URL is wintheoryco.com

Guleria
Shopify Partner
3107 611 871

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

.menu-drawer-container.menu-opening svg:first-child {
    display: none !important;
}

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
EthanOSHOP
Explorer
70 0 13

It still seems to appear. It is only on mobile this happens (desktop doesn’t have a menu icon). The menu icon is also custom.

Guleria
Shopify Partner
3107 611 871

I think first you need to learn how to use css.
I checked you use the css I shared but made  a syntax error.

In your css you use it like this 

.menu-drawer-container.menu-opening svg:first-child {
    display: none !important;
 
body svg.icon.icon-search{
height:20px !important;
width:20px !important;
}

which is completely wrong.

 

use it in the same way I provided and it will work.   

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
EthanOSHOP
Explorer
70 0 13

Thanks for responding. The extra code you are referring to

body svg.icon.icon-search{

height:20px !important;

width:20px !important; }

is for something completely different, I use this code for the search icon height and width. When I pasted your code to get rid of the 'X' alone it did not work unfortunately.

Guleria
Shopify Partner
3107 611 871
.menu-drawer-container.menu-opening svg:first-child {
    display: none !important;
 
body svg.icon.icon-search{
height:20px !important;
width:20px !important;
}

where is the  closing "}" syntax of the rule/css I shared

 

this css should be

.menu-drawer-container.menu-opening svg:first-child {
    display: none !important;
 }
body svg.icon.icon-search{
height:20px !important;
width:20px !important;
}

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
EthanOSHOP
Explorer
70 0 13

Image 19-01-2024 at 13.04.jpeg

 

Is all of this correct?

 

Guleria
Shopify Partner
3107 611 871

 

Yes this one is correct but just make sure there is no other syntax error in the previous css you added otherwise it will not work. 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
EthanOSHOP
Explorer
70 0 13

The previous CSS? I don't think there are any other mistakes in the code however the X is still appearing.

Guleria
Shopify Partner
3107 611 871

This is an accepted solution.

I think there is error in your css.

btw to confirm use the code in this way:
Edit theme.liquid search for </body> nor here just above of it place the css.
like this

<style>
.menu-drawer-container.menu-opening svg:first-child {
    display: none !important;
 }
body svg.icon.icon-search{
height:20px !important;
width:20px !important;
}
</style>

  Note: Don't change/break anything else.

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
EthanOSHOP
Explorer
70 0 13

Thank you very much for your help

Would it be possible to change the "X" icon that appears as well? Or at least the colour?

 

Image 20-01-2024 at 09.31.jpeg

Guleria
Shopify Partner
3107 611 871

To change the color use this css.

.header__icon--menu .icon { 
    color: rgb(0, 38, 199) 
}

And now complete css will be

<style>
.menu-drawer-container.menu-opening svg:first-child {
    display: none !important;
 }
body svg.icon.icon-search{
height:20px !important;
width:20px !important;
}
.header__icon--menu .icon { 
    color: rgb(0, 38, 199) 
}
</style>



- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter