How to make header look the same on each page?

Store Design
, ,
1

Hi,

I was wondering if anyone could help me to figure out an issue I am experiencing.

My header looks close to how I want it on my home page but when clicking on other pages, it changes and text is missing. How can I make it the same on every page?

Screenshots attached for reference

Screenshot 2025-06-06 at 20.01.34.png
Screenshot 2025-06-06 at 20.01.34.png3456×1346 454 KB

Screenshot 2025-06-06 at 20.01.29.png
Screenshot 2025-06-06 at 20.01.29.png3456×1186 345 KB

URL: www.atmos.art

Here is the code I am currently using in the theme.liquid file:

<style>
@media (min-width:990px) {
.header__heading { 
    display: flex; 
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center; 
}
.header__heading::before { 
    content: "⭐⭐⭐ 3.8/5 Trustpilot | +44 (0) 7946 821466"; 
    padding-bottom: 0.8rem;
    padding-top: 2rem;
} 
.header__heading::after { 
   content: "Thought-Provoking Art Promoting Positive Change"; 
   padding-top: 0.4rem;
  padding-bottom: 1.4rem;
}
.header__heading::before { font-size: 14px; }

.header__heading::after { font-size: 14px; }
}
</style>
2

Hi @atmos-art ,

I can understand the issue you are experiencing , I am trying to find the best possible solution of this May be the below answer can be helpful to you :

To show the same header text on all pages:

Go to Online Store > Themes > Edit Code.

Open sections/header.liquid.

Inside the .header__heading div, add this HTML:

:star: :star: :star: 3.8/5 Trustpilot | +44 (0) 7946 821466
Thought-Provoking Art Promoting Positive Change

Remove your current ::before and ::after CSS from theme.liquid.

This will display your custom header message consistently across all pages.

Please let me know if it works !

Thanks !

3

The element with the class “header__heading” is only available on your homepage. Dawn does this is for SEO and Accessibility reasons.

Instead of applying the styles to “header__heading” try applying them to “header__heading-logo-wrapper” which seems to always appear on all pages.

The results are similar, but you may need to adjust the styles a bit to match what you had before.

001.png
001.png1004×313 67.6 KB

4

You are a star Drew. That worked really well, thanks. For some reason though, the text now changes colour when hovering over it (including the logo). Do you know how to disable this?

5

Thanks for trying to help Steven. Drew’s code seemed to do the job for me.

6

Try adding this CSS:

.header__heading-link:hover {
  color: rgba(var(--color-foreground), 1);
}
7

That worked great. Thanks Drew!