Remove Caret Icon From Header Dawn Theme

[Jaclyn2]

Hello! 

I am using the dawn theme and was wondering how to remove the caret icon from the header section. When I delete the code for icon-caret.liquid, the caret icons go away but the spacing between each menu item is all messed up. 

 

 

[valiermedia · Accepted solution]

Hi Jaclyn!

Instead of actually deleting the caret code, you can remove this with CSS. Here is the code I used to remove the caret from the Dawn theme and fix the spacing (padding) between menu items:

.header__menu-item .icon-caret {
	display: none;
}

summary.list-menu__item {
	padding: 1.2rem;
}

Add this to one of your theme's stylesheet and you should be good to go! I like to create a custom one for general Dawn customizations.

[valiermedia · Accepted solution]

Hi Jaclyn!

Instead of actually deleting the caret code, you can remove this with CSS. Here is the code I used to remove the caret from the Dawn theme and fix the spacing (padding) between menu items:

.header__menu-item .icon-caret {
	display: none;
}

summary.list-menu__item {
	padding: 1.2rem;
}

Add this to one of your theme's stylesheet and you should be good to go! I like to create a custom one for general Dawn customizations.

[Jaclyn2]

It worked perfectly for desktop but but changed the spacing of the menu items on mobile. Do you know how to fix this?

 

[KetanKumar]

@Jaclyn2 

can you please send store url

[valiermedia · Accepted solution]

Hi Jaclyn!

The following modification to my previous answer will restrict the styling changes to the desktop navigation only:

.header__inline-menu .header__menu-item .icon-caret {
	display: none;
}

.header__inline-menu summary.list-menu__item {
	padding: 1.2rem;
}

If you run into any further issues, please let me know 😊

[Jaclyn2]

Great, that worked perfect!

[PrintJourney]

Hello I have a similar problem. I want to remove a caret, but not from the whole theme. It should only be removed in the menu section. I had a developer do something to the code and after that this problem occured (the caret blocks the word "products"). I told him to undo everything but the issue stayed. Can you tell me how I can remove this caret and where I have to put in the code? I do not know much about coding unfortunately. It would be great if the caret next to the language menu stays.

[KetanKumar]

@Jaclyn2 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.