# Muddy Roots Global Header and Footer: ready to paste code
This one block gives you BOTH the header we built (sticky wordmark plus nav) and the footer we built (wordmark, D.I.Y. til we die., four social icons, copyright, Privacy Policy). It injects the header at the top of the page and the footer at the bottom.
During this partial rebuild, paste it into each rebuilt page's own **Page Header Code Injection** (Pages > the page > Settings > Advanced), not the site-wide Code Injection, so our header and footer appear only on the two rebuilt pages and never on the pages you are not rebuilding.
Classes are prefixed `mr-` so they do not collide with Squarespace. Rebuilt verbatim from the two source files.
## The only two values you set per page
1. `WORDMARK_IMAGE_URL`: the logo image URL, used in both the header and the footer. Upload `wordmark.png` to Squarespace and copy its hosted URL, or for a quick practice test use `https://muddymockup2.mybuildstudio.com/assets/wordmark.png`.
2. `ROOTS_LINK`: the one header nav link that differs between the two pages.
- On the **Worldwide (portal)** page: `#about`
- On the **Tennessee** page: `https://muddymockup2.mybuildstudio.com/`
Everything else (Merch, Tickets, Patreon, Newsletter, and all four footer socials and the Privacy Policy) is identical on both pages and already filled in.
## The code
```html
<!-- MUDDY ROOTS GLOBAL HEADER AND FOOTER. Paste into Pages > (this page) > Settings > Advanced > Page Header Code Injection. -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600&display=swap');
/* Header */
.mr-hdr{position:sticky;top:0;z-index:9999;background:rgba(13,12,12,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.14);font-family:'Epilogue',system-ui,sans-serif}
.mr-hdr *{box-sizing:border-box}
.mr-hdr-inner{max-width:1240px;margin:0 auto;min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 20px}
.mr-logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.mr-logo img{height:54px;width:auto;display:block}
.mr-nav{display:flex;flex-direction:row;align-items:center;gap:22px}
.mr-nav a{font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#fff;font-size:13px;text-decoration:none;transition:color .2s}
.mr-nav a:hover{color:#FD3008}
.mr-nav a.mr-cta{background:#FD3008;color:#fff;padding:10px 16px;border-radius:6px}
.mr-nav a.mr-cta:hover{background:#C70E20;color:#fff}
.mr-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:38px;background:none;border:none;cursor:pointer;padding:0}
.mr-burger span{display:block;height:2px;width:24px;background:#fff;transition:transform .25s,opacity .25s}
.mr-burger.mr-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mr-burger.mr-open span:nth-child(2){opacity:0}
.mr-burger.mr-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Footer */
.mr-ftr{background:#0D0C0C;border-top:1px solid rgba(255,255,255,.14);padding:52px 20px 32px;text-align:center;font-family:'Epilogue',system-ui,sans-serif}
.mr-ftr *{box-sizing:border-box}
.mr-ftr-in{max-width:1240px;margin:0 auto}
.mr-ftr-logo{width:min(360px,80%);height:auto;margin:0 auto 16px;display:block}
.mr-ftr-tag{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-size:clamp(22px,6vw,34px);color:#FD3008;margin-bottom:16px}
.mr-ftr-social{display:flex;gap:14px;justify-content:center;margin:0 0 18px}
.mr-ftr-social a{width:42px;height:42px;border:1.5px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;transition:border-color .25s,color .25s,transform .25s}
.mr-ftr-social a:hover{border-color:#FD3008;color:#FD3008;transform:translateY(-2px)}
.mr-ftr-social svg{width:18px;height:18px;fill:currentColor}
.mr-ftr-copy{font-size:12px;color:rgba(255,255,255,.45)}
.mr-ftr-copy a{color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:3px}
.mr-ftr-copy a:hover{color:#FD3008}
@media(max-width:768px){
.mr-burger{display:flex}
.mr-logo img{height:34px}
.mr-nav{position:absolute;top:100%;left:0;right:0;background:#0D0C0C;border-bottom:1px solid rgba(255,255,255,.14);flex-direction:column;align-items:stretch;gap:0;padding:6px 0;display:none}
.mr-nav.mr-open{display:flex}
.mr-nav a{padding:13px 22px;font-size:15px}
.mr-nav a.mr-cta{margin:8px 18px;text-align:center;padding:13px 16px}
}
</style>
<script>
(function(){
function build(){
if(document.getElementById('mr-hdr')) return;
/* ===== EDIT THESE TWO VALUES PER PAGE ===== */
var WORDMARK = "WORDMARK_IMAGE_URL"; /* your uploaded wordmark image URL, used in header and footer */
var ROOTS = "ROOTS_LINK"; /* Worldwide page: #about Tennessee page: https://muddymockup2.mybuildstudio.com/ */
/* ========================================== */
var TICKETS = "https://www.muddyroots.com/https/wwwmuddyrootscom/muddyroots2025/p/b4brts6kjntt0pnlimjdk60rv3kimh/p/b4brts6kjntt0pnlimjdk60rv3kimh";
/* Header at the top of the page */
var h = document.createElement('div');
h.className = 'mr-hdr';
h.id = 'mr-hdr';
h.innerHTML =
'<div class="mr-hdr-inner">' +
'<a class="mr-logo" href="#top" aria-label="Muddy Roots home"><img src="' + WORDMARK + '" alt="Muddy Roots Worldwide"></a>' +
'<nav class="mr-nav" id="mrNav" aria-label="Primary">' +
'<a href="https://muddyroots.myshopify.com/" target="_blank" rel="noopener">Merch</a>' +
'<a class="mr-cta" href="' + TICKETS + '" target="_blank" rel="noopener">Tickets</a>' +
'<a href="https://patreon.com/muddyroots" target="_blank" rel="noopener">Patreon</a>' +
'<a href="https://www.muddyroots.com/contact" target="_blank" rel="noopener">Newsletter</a>' +
'<a href="' + ROOTS + '">Roots</a>' +
'</nav>' +
'<button class="mr-burger" id="mrBurger" aria-label="Open menu" aria-expanded="false"><span></span><span></span><span></span></button>' +
'</div>';
document.body.insertBefore(h, document.body.firstChild);
/* Footer at the bottom of the page */
var f = document.createElement('footer');
f.className = 'mr-ftr';
f.id = 'mr-ftr';
f.innerHTML =
'<div class="mr-ftr-in">' +
'<img class="mr-ftr-logo" src="' + WORDMARK + '" alt="Muddy Roots Worldwide">' +
'<div class="mr-ftr-tag">D.I.Y. til we die.</div>' +
'<div class="mr-ftr-social">' +
'<a href="https://www.facebook.com/muddyrootsmusicfest/" target="_blank" rel="noopener" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.5-1.5h1.6V3.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.9V13h2.3v8h3.3z"/></svg></a>' +
'<a href="https://www.instagram.com/muddyrootsmusic" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.26.07 1.64.07 4.83s0 3.57-.07 4.83c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.26.06-1.64.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.2 15.6 2.2 15.2 2.2 12s0-3.57.07-4.83c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.4 2.2 8.8 2.2 12 2.2z"/><circle cx="12" cy="12" r="3.1" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="17.4" cy="6.6" r="1.1"/></svg></a>' +
'<a href="http://www.youtube.com/@MuddyRootsMusic" target="_blank" rel="noopener" aria-label="YouTube"><svg viewBox="0 0 24 24"><path fill-rule="evenodd" d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6z"/></svg></a>' +
'<a href="https://www.tiktok.com/@muddyrootsmusicfestival" target="_blank" rel="noopener" aria-label="TikTok"><svg viewBox="0 0 24 24"><path d="M16.6 5.8a4.3 4.3 0 0 1-1-2.8h-3.1v12.5a2.5 2.5 0 1 1-2.5-2.5c.2 0 .5 0 .7.1V9.9a5.6 5.6 0 1 0 4.9 5.6V8.7a7.2 7.2 0 0 0 4.2 1.3V6.9a4.3 4.3 0 0 1-3.2-1.1z"/></svg></a>' +
'</div>' +
'<div class="mr-ftr-copy">© 2026 Muddy Roots Worldwide. <a href="https://www.muddyroots.com/privacy-policy" target="_blank" rel="noopener">Privacy Policy</a></div>' +
'</div>';
document.body.appendChild(f);
/* Mobile menu toggle */
var b = document.getElementById('mrBurger'), n = document.getElementById('mrNav');
b.addEventListener('click', function(){
var open = n.classList.toggle('mr-open');
b.classList.toggle('mr-open', open);
b.setAttribute('aria-expanded', open ? 'true' : 'false');
});
Array.prototype.forEach.call(n.querySelectorAll('a'), function(a){
a.addEventListener('click', function(){ n.classList.remove('mr-open'); b.classList.remove('mr-open'); });
});
}
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', build); } else { build(); }
})();
```
## Hide Squarespace's own header and footer on this page
Squarespace still has its native header and footer. So you do not get doubles, hide them on this page only by adding this to the same box. The selectors depend on your template, so test them, and if the native header or footer does not disappear, tell me your template and I will give the exact selectors.
```html
<style>
#header, .header, .sqs-announcement-bar-dropzone,
#footer-sections, .sqs-footer, footer.sqs-layout { display:none !important; }
</style>
```
No em dashes are used anywhere in this file.