menu mobil color text issues

albestudios · ‎09-01-2024

Hello,
I'm working on the mobile version of my website and I've just seen in the menu page that the end was cut off and the choice of language and currency in white instead of black.

Would anyone know how I can put the text in black and put them on the same line to avoid it being cut off like on the photo?

Here is the link to my site: https://albe.online/collections/all
And I use the dawn theme

Thanks in advance

Huptech-Web · ‎09-02-2024

Hello @albestudios, Please follow these steps to add this CSS code:

1. Access your Shopify Admin.
2. Go to Online Store > Themes.
3. Locate the theme you are currently using and select Actions > Edit code.
4. In a CSS file: Go to Assets, find your CSS file, and add your styles. OR
5. In theme.liquid: Go to Layout, open theme.liquid, and add your CSS inside a <style> tag in the <head> section.

@media  screen and (max-width: 749px) {
#menu-drawer .menu-drawer__localization {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
}
.disclosure .disclosure__button span{
    color: #000000 !important;
}
#menu-drawer .disclosure__list li a{
    color: #000000 !important;
}
}

Here is the screenshot for the same.

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Huptech-Web · ‎09-02-2024

Hello @albestudios, Please follow these steps to add this CSS code:

1. Access your Shopify Admin.
2. Go to Online Store > Themes.
3. Locate the theme you are currently using and select Actions > Edit code.
4. In a CSS file: Go to Assets, find your CSS file, and add your styles. OR
5. In theme.liquid: Go to Layout, open theme.liquid, and add your CSS inside a <style> tag in the <head> section.

@media  screen and (max-width: 749px) {
#menu-drawer .menu-drawer__localization {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
}
.disclosure .disclosure__button span{
    color: #000000 !important;
}
#menu-drawer .disclosure__list li a{
    color: #000000 !important;
}
}

Here is the screenshot for the same.

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

menu mobil color text issues

menu mobil color text issues

Community Blog Articles