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

[EthanOSHOP]

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

[Guleria]

Please share the store URL.

[EthanOSHOP]

The URL is wintheoryco.com

[Guleria]

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;
}

[EthanOSHOP]

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]

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.   

[EthanOSHOP]

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]

.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;
}

[EthanOSHOP]

Is all of this correct?

[Guleria]

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. 

[EthanOSHOP]

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

[Guleria · 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.

[EthanOSHOP]

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?

[Guleria]

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>