Replacing button with text only on desktop

[basicbastardco]

Hi Guys,

I would like to replace the button (cart and search) with text only on desktop version. I would also like to remove the profile icon and add my contact page. Please see the screenshot for a better understanding. I would appreciate your help.

Thanks in advance.

URL: https://basicbastard.co/

[suyash1]

@basicbastardco - please add following css to the very end of your base.css file and check

@media screen and (min-width:750px){

.header__icon--search{display: flex; justify-content: center; align-items: center;}
.header__icon--search:before {content: "search";}
.header__icon--search .icon{display:none; visibility:hidden;}

a#cart-icon-bubble:before {content: "cart";}
a#cart-icon-bubble{display:none; visibility:hidden;}
}

[basicbastardco]

It worked for search but not for cart. Also, I want to replace the profile button with the contact button. Similar to screenshot.

[suyash1]

@basicbastardco - i can not see the code, can you please add again to check?

[basicbastardco]

@media screen and (min-width:750px){

.header__icon–search{display: flex; justify-content: center; align-items: center;}
.header__icon–search:before {content: “search”;}
.header__icon–search .icon{display:none; visibility:hidden;}

a#cart-icon-bubble:before {content: “cart”;}
a#cart-icon-bubble{display:none; visibility:hidden;}
}

[suyash1]

@basicbastardco - not here, on to your site

[ExpertRookie]

@basicbastardco

Try to add this code at the end of Theme > Edit code > assets > base.css file

@media screen and (min-width: 989px) {
	.header__icons {
		gap: 10px;
	}
	.header__icon--search:before {
	    content: 'Search';
	}

	.header__icon--search {
	    display: flex !important;
	    flex-direction: column !important;
	    justify-content: center !important;
	}

	.header__icon--account svg,
	.header__icon--cart svg,
	.header__icon--search span {
	 
	    display: none !important;
	}

	.header__icon--cart:before {
	    content: 'Cart';
	}

	.header__icon--cart {
	    display: flex !important;
	    flex-direction: column !important;
	    justify-content: center !important;
	}

	.header__icon--account:before {
	    content: 'Contact';
	}

	.header__icon--account {
	    display: flex !important;
	    flex-direction: column !important;
	    justify-content: center !important;
	}

	.header__search {
	    line-height: unset !important;
	}
}

Try it and let me know

[basicbastardco]

Just did, this is how it looks.

[suyash1]

@basicbastardco - not live?

[basicbastardco]

This is how it looks.

[basicbastardco]

Please check now. Sorry for the inconvenience.

[suyash1]

@basicbastardco - add this too and check

.header__icon, .header__icon--cart .icon {height: 4.4rem;    width: 5.7rem;}

@media screen and (min-width: 989px){
.header__icons {gap: 30px!important;}
}