Want to remove the magnifying glass and replace with word 'Menu' next to the Top left menu drawer

[Rosabee]

Hi Experts

Hope you can help! I have my menu in top left corner on header in Dawn theme. There's a magnifying glass next to it, which I want to replace with 'Menu'. I do not want it to be underlined.

(I believe I need to do it in Assets\Base.css but I'm not sure where.)

I also don't want any changes to mobile view as it currently is. 

www.inclusiveswag.com

Been trying to figure it out for too long and now need to ask for help.

Thanks

R.

[theycallmemakka]

Hi @Rosabee ,

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above tag </head>

<style>
@media screen and (min-width: 750px) {
    .header {
        padding-top: 8px;
        padding-bottom: 8px;
    }
   .header--top-center.drawer-menu>.header__search {
        display: none;
    }    
    header-drawer[data-breakpoint="desktop"] .menu-drawer-container svg {
        display: none!important;
    }    
    header-drawer[data-breakpoint="desktop"] .header__icon span:after {
        content: "MENU";
    }    
    header-drawer[data-breakpoint="desktop"] .link, 
    header-drawer[data-breakpoint="desktop"] .customer a {
        text-decoration: none;
    }
header-drawer {
    margin-left: 0px;
}
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Rosabee]

Thanks! I will try this later today and let you know.