Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Sub Menu Capital letters in green color and bold

Sub Menu Capital letters in green color and bold

Lumify
Shopify Partner
44 1 19

Hello everyone,

Can someone help me add the same green color and bold to my sub menu Titles  (PROYECTOS & COLABORADORES) and as well for the languages see screenshots.

 

I have used this code in theme.liquid for the main titles in my Header menu.

Many thanks,

<style>
li > header-menu > details > summary >span::first-letter {
color: #5bb899!important;
font-weight: bold!important;
}
li > a > span::first-letter {
color: #5bb899!important;
font-weight: bold!important;
}
</style>

Screenshot 2024-10-14 at 12.19.29.png

Screenshot 2024-10-14 at 12.24.14.png

Replies 12 (12)

Shadab_dev
Shopify Partner
871 48 87

I believe you should remove this part from the css code you provided ::first-letter , this should do it. The first letter as the name says targets only the first letter of the span element

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
Lumify
Shopify Partner
44 1 19

Hi, thank you for your answer, apreciate your time. 

The code I have provided it is in theme.liquid not in base.css. So you say I should remove it from the theme.liquid than?

Shadab_dev
Shopify Partner
871 48 87

No just remove the  ::first-letter from your css code and try saving.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.

Made4uo-Ribe
Shopify Partner
9035 2160 2664

Hi @Lumify 

Try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.header__submenu .header__menu-item font:first-letter {
    color: #5bb899 !important;
    font-weight: bold !important;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1728904753442.png

    It seems like you've already add on the languages. 

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Lumify
Shopify Partner
44 1 19

Hi, yes on the sub menu languages the capital letters are in greeen,  but not on the title menu.

What can you add to this code bellow to be able to include the language as well?

.header__submenu .header__menu-item font:first-letter {
color: #5bb899 !important;
font-weight: bold !important;
}

Screenshot 2024-10-14 at 12.24.14.png

Made4uo-Ribe
Shopify Partner
9035 2160 2664

Try to repaste on other file. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
.header__submenu .header__menu-item font:first-letter {
    color: #5bb899 !important;
    font-weight: bold !important;
}
.localization-form__select span:first-letter {
color: #5bb899!important;
font-weight: bold!important;
}
</style>

 

And save. 

Result:

Made4uoRibe_0-1728913157789.png

 

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Lumify
Shopify Partner
44 1 19

Hi there,

I have tried but still nothing. For some reason the first capital letters form the sub menu titles wont turn green...

Made4uo-Ribe
Shopify Partner
9035 2160 2664

Can you check this one again. 

 

<style>
details[open] > .header__submenu font:first-letter {
    color: #5bb899 !important;
    font-weight: bold !important;
}

.localization-form__select span:first-letter {
    color: #5bb899 !important;
    font-weight: bold !important;
}
</style>

 

And Save. 

The language change or still not? 

 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Lumify
Shopify Partner
44 1 19

I tried the code not working in base.css...

 

namphan
Shopify Partner
1840 233 255

Hi @Lumify,

Please send me the code of header-dropdown-menu.liquid file, I will guide you to change it

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
Lumify
Shopify Partner
44 1 19

Hi Namphan,

Thank you for your interest.

Here is the code that it is at the moment in the layout/them.lquid above head.

<style>
li > header-menu > details > summary >span::first-letter {
color: #5bb899!important;
font-weight: bold!important;
}
li > a > span::first-letter {
color: #5bb899!important;
font-weight: bold!important;
}
</style>

namphan
Shopify Partner
1840 233 255

Hi @Lumify,

Please send the code of the file, I will help you add span tag for text and then it works fine

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com