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:
If anyone has experience with this or any suggestions, I would greatly appreciate your help.
Thank you!
Lilly
October 17, 2023, 6:05am
2
Hi again @Joe_Nguyen
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:
6 Likes
Lilly
October 17, 2023, 3:33pm
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:
Note that I will probably delete the repository in a few days.
2 Likes
system
(system)
Closed
November 16, 2023, 3:33pm
5
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.