The theme header sits at the top of your site. You can put whatever you want in your header to ensure that it can pixel-perfect match the rest of your web site (if you have one). It completely belongs to you.
Header And Footer Assets
All of the header/footer information rests in the following assets:
header.html : This is an HTML file that contain's your header's HTML. You can put whatever you want in this file with one exception: Don't put script tags in your header. Vanilla uses strict security headers on many of its pages that will block scripts to protect from XSS attacks. If you want to write some javascript there is a specific asset for that. If you want to include external scripts there is a place for that too.footer.html : This is an HTML file similar to the header.html , but for your footer.styles.css : This is where your CSS header/footer CSS goes. Your CSS will only affect the header/footer because it is included within a shadow dom. This allows you to use whatever CSS classes you want without affecting the rest of the site.javascript.js : Put all of your inline javascript here.
When using the theme editor, you will see tabs for each of these assets. When creating a file based theme, put these files in the /assets folder. The theming API has endpoints that specifically reference these assets too.
Example Footers
Here is a very basic footer with a copyright and a watermark logo.
Here is more complex example with columns of corporate and social links.
