How to make header look the same on each page?

[atmos-art]

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

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>

[StevenT_A7]

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:

<div style="text-align: center; font-size: 14px; padding-top: 1.5rem;">
⭐⭐⭐ 3.8/5 Trustpilot | +44 (0) 7946 821466<br />
<span style="padding-top: 0.4rem; display: inline-block;">
Thought-Provoking Art Promoting Positive Change
</span>
</div>

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 ! 

[atmos-art]

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

[DrewOswald · Accepted solution]

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.

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

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

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

[atmos-art]

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?

[DrewOswald]

Try adding this CSS:

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

[atmos-art]

That worked great. Thanks Drew!