Add a color banner after the header

Development

AI-generated summary

Add a Color Banner after the Header

Joe_Nguyen is trying to add a color banner below the header but is having trouble with the banner appearing at the top of the header instead. Lilly provides a solution using the below-site-header plugin outlet. She shares the necessary code to add to the common-head and common-css of a theme or theme component. Joe_Nguyen thanks Lilly for the help. Additionally, Lilly shares a GitHub repository (https://github.com/Lillinator/header-color-bar) with a theme component setup, but notes that it will be deleted in a few days.

1

Hello Community Members!

I’ve been attempting to add a color banner below the header but haven’t had any success so far. I’ve tried various CSS and HTML codes, even creating a custom component, but the banner keeps appearing at the top of the header. I aim to achieve something similar to this:

Screenshot 2023-10-16 215424
Screenshot 2023-10-16 2154241857×196 34.8 KB

If anyone has experience with this or any suggestions, I would greatly appreciate your help.

Thank you!

2

Hi again @Joe_Nguyen :wave:

Here is how you can do this using a the below-site-header plugin outlet.

Step 1: In common-head of a theme or theme component put this:

<script type="text/x-handlebars" data-template-name="connectors/below-site-header/header-color-bar">
  <div id="color-bar">
  </div>
</script>

Step 2: In common-css of the same theme or theme component, put this:

#color-bar {
  background-color: #13d83d; 
  height: 30px;
}

note: you can adjust the height and change color property to whatever you want.

That should do it: :slight_smile:

color-bar
color-bar1060×212 36.6 KB

3

Thank you @Lilly! :slightly_smiling_face:

4

If you would like to see how this is setup to be a theme component in a repository rather than in your local instance, you can copy my repo here:

https://github.com/Lillinator/header-color-bar

Note that I will probably delete the repository in a few days.