Attempting to alter the header title aesthetic bar

Hi, I’ve looked all over the source for this.

That green bar, I want to change it to an image (it’s legit an image with 3 lines lol).

Any ideas?

Also for some reason, the customiser is not changing the menu colour in 1.50?

Hello there,

Try this CSS code to alter the default green line between main slide title and CTA button:

    .text-slider .maintitle:after {
      background-color: transparent;
      height: 20px;
      background-image: url('');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;

Replace with a valid link to an image of your choice. You can get it in the media library (Dashboad > Media).

To apply extra CSS code to your site, add it to Appearance > Customize > Additional CSS from dashboard.

The common reason that usually prevents the site getting last changes in the customizer is site caching. Try flushing it after applying some changes.


Awesome, thanks.

How do I move it down to be centered between the button and the main title? Margin-top and padding-top isn’t exactly working.

Also, I have played around with moving the menu bar down and the hero image area.

I’m getting this weird issue now (I also just remembered the menu color has never changed for me since 1.45 so I was changing it manually). It can be noted that I altered .site-header to use position: absolute.

Try this code:

    .text-slider .maintitle:after {
      bottom: -40px;

For other question about header, which doesn’t relate to the initial topic you wrote, please post in separate topic to help us archive support forum better in order other users easier to follow each topic.


bottom huh, who would have known… hmm.

Thank you. It works perfectly.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.