Change Header Font Color Without Changing Other Headers

[porpoise]

I am trying to change a header on the top of my page “mei” to be a different color: #Ed1b58 but I don’t know how to change it from the default header text color without changing all of the other header colors. It is not letting me add another color scheme in the theme settings. I also don’t know how to code but if someone can give me instructions I would appreciate it very much!

mei-cosmetics.co

[Huptech-Web]

Hello! @porpoise Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

.header__heading .header__heading-link .h2 {
    color: #Ed1b58;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

Output:

[conversionist]

Before

After:

And here’s how to do it:

1. Go to your Shopify admin and click on Online Store

2. Click on Actions next to your theme and select Edit code

3. In the left sidebar, find the theme.css or theme.scss.liquid file under Assets

4. Add this CSS code at the end of the file:

.h2 {
    color: green; /* Change green to any other color you want */
}

• Save the changes

[Huptech-Web]

@conversionist This color will be applied to all .h2 classes on the entire site. The @porpoise needs a color change only for the header logo. Please only provide correct answers if you are familiar with the fundamentals of CSS.

[Vinsinfo]

@porpoise Please follow below steps to change header font color without changing other headers. Let me know whether it is helpful for you.

1. From admin, go to “Online Store” → “Themes”.
2. Click “Customize” button from the current theme.
3. Click “Header” as shown in the screenshot.

4. Locate “Custom CSS” field and past the below code as like screenshot.

.header .header__heading .header__heading-link .h2 {
  color: #Ed1b58
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[conversionist]

There’s no other h2 as a class on theme Mr guru

[Rahul_dhiman]

Hello @porpoise
I hope you are doing well

Here is the solution.

Go to your Online Store--------------------> 2. Click on “Themes” -------------->3. Select “Edit code” --------------> 4. Open your “base.css” file.
and at the very end paste this CSS

.header__heading .header__heading-link.link.link--text .h2 {
    color: #Ed1b58;
}

Please check and let me know
Thanks

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.header__heading-link .h2 {
color: red;
}

[Huptech-Web]

@conversionist

[niraj_patel]

Hello @porpoise

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.header__heading .header__heading-link span.h2 { color: #Ed1b58 !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[EBOOST]

Hi @porpoise ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. sections/header.liquid
3. Add code below to scheme is the same screenshot

{
      "type": "color_scheme",
      "id": "color_scheme_homepage",
      "label": "color scheme homepage",
      "default": "scheme-1"
    },

4. Find code

<{% if section.settings.sticky_header_type != 'none' %}sticky-header data-sticky-type="{{ section.settings.sticky_header_type }}"{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">

Replace with code below

<{% if section.settings.sticky_header_type != 'none' %}sticky-header data-sticky-type="{{ section.settings.sticky_header_type }}"{% else %}div{% endif %} class="header-wrapper {%  if template == 'index'  %}  color-{{ section.settings.color_scheme_homepage }}{%  else %} color-{{ section.settings.color_scheme }} {%  endif %} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">

5. Go to customize → header → color scheme homepage to update scheme color

[Dan-From-Ryviu]

Hi @porpoise

You can change that text by adding this code to theme.liquid file, after from Online Store > Themes > Edit code

Best Regards,

Dan from Ryviu

[porpoise]

Thank you! This changed the “mei” for my home page but I also wanted to change the “mei” for the other pages as well. Sorry I should have been more specific- I want all the "mei"s to be changed, but not any other text using the header font.