Currency Selector Adjustment in the Header.

[CreatorTim]

Hey guys, I want to adjust the currency selector in the header.

1. I want to remove the underline when hovering over it.
2. I want to set it the same size and the same emphasis as the menu items.
3. I want to remove the arrow on the right.
4. When you click on it, a dropdown will appear with the country selection, and for that, I want to remove the search bar and round the corners.
   
   

Here’s my store URL: https://1049xn-ya.myshopify.com/

Thank you so much,
Tim

[suyash1]

@CreatorTim please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.header-localization .disclosure .localization-form__select:hover{text-decoration: none !important;}
.country-filter .field{display: none;}
.disclosure svg.icon.icon-caret{display: none;}

[Dan-From-Ryviu · Accepted solution]

Hi  @CreatorTim 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.desktop-localization-wrapper .localization-form__select > span {
text-transform: uppercase;
font-size: 13px;
}
.header-localization .disclosure .localization-form__select:hover {
text-decoration: none !important;
}
.localization-form__select .icon-caret, 
.desktop-localization-wrapper .country-filter > .field {
display: none;
}

[oscprofessional]

Hello @CreatorTim 

Go to Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

- Added below code in your base.css file

.header-localization:not(.menu-drawer__localization) .localization-form:only-child .localization-form__select:hover {
    text-decoration: none;
}
.header-localization:not(.menu-drawer__localization) localization-form:only-child .localization-form__select>span {
    text-transform: uppercase;
}