Good morning-
So I am just going straight to the point- so we want to make a customization to a specific header title. We want to change the color of the header “build your own” https://www.utility-sink.com/ to this color 60b8af color. So far I tried just adding css to the customization but no luck I also tried adding the style to the back-end which happened was also not working.
Although I did achieve changing the color but it affected every title in the header.
Anyways from what I noticed and understood from the code, it seems that the id and class for all the titles is the same. Hence I am having a hard time customizing it.
For reference this is what happened when I changed the color
what we are looking for is that the “Build Your Own” should be in that color and the rest of the header titles should be in black.
Hey @jLaquino07 !
You’re exactly right, without a unique class on “Build Your Own” you won’t be able to isolate on that menu item in the header. That’s why you can only change the colors of all the menu items.
I can help you edit the theme files but you would need to paste the theme liquid file.
{% include ‘booster-seo’ %}
{%- unless settings.body_font.system? -%}
{%- endunless -%}
{%- unless settings.headings_font.system? -%}
{%- endunless -%}
{%- if canonical_url != blank -%}
{%- endif -%}
{%- if settings.favicon != blank -%}
{%- endif -%}
{%- liquid
render ‘armament-seo-title’
render ‘armament-social-meta’
render ‘armament-fonts’
render ‘css-variables’
render ‘armament-essential-css’
-%}
{{ content_for_header }}
{% if template.suffix contains ‘sink-configurator’ %}
{% else %}
{% endif %}
{% render 'engine-animation' with animation_delay: 100 %}
{{ 'theme.css' | asset_url | stylesheet_tag }}
{{ 'custom.css' | asset_url | stylesheet_tag }}
{%- if settings.custom_css != blank -%}
{{ settings.custom_css }}
{%- endif -%}
{% sections ‘announcement-group’ %}
{% comment %} --armada-header-- {% endcomment %}
{% sections 'header-group' %}
{{ content_for_layout }}
{% comment %} --armada-footer-- {% endcomment %}
{% sections ‘footer-group’ %}
{% sections ‘overlay-group’ %}
{% render ‘engine-translations’ %}
{%- if settings.custom_js != blank -%}
{%- endif -%}
{% include ‘globo.filter.action’ %}
<epigraph-configurator-lite
id=“epigraphConfiguratorLite”
shared-config-id=
ga-code=355890360
hidden
{% if customer %}
{% endif %}
Hi @jLaquino07 ,
This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.
While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:
- Go to Online Store → Theme → Edit code
- Open your theme.liquid file
- Paste below code before :
Best regards,
Anthony
1 Like
Hi @jLaquino07 ,
Sorry about the delay I was on a client call.
The solution @Beae_Cass has provided is a quick workaround and will be easier than editing the theme files. Keep in mind that you would need to change part li:nth-child(5) if you were to add more menu links or change the position.
The theme file that you could edit for a different solution would be under sections - header-group. This would require a bit more hands on customisation so if you’re happy and Anthony’s solution works I’d stick with that for now.
All the best!
A
1 Like
hello the other suggestion should be good for now since we dont plan on adding another menu
