Minimist Plugin · Version 2.0

Secondary Nav

Thank you for your purchase! This page has everything you need. In about two minutes, you'll add a second row of links to the top of your website — things like Support, Careers, or a Client Login button. No coding knowledge needed.

What you get

On computers

A slim, elegant bar of links and buttons sits above your main menu — right where visitors expect it.

On phones

The same links appear inside the ☰ menu. Squarespace switches between the two automatically — nothing for you to manage.

Change it anytime

Different links, new colors, another layout — the builder further down this page rebuilds everything for you with a simple form.

Before you start — one quick check

In your Squarespace dashboard, open Settings, then Advanced. Do you see an option called Code Injection?

Yes? You're all set — carry on below.
No? Your Squarespace plan doesn't include custom code yet. You'll need the Core plan or higher (Squarespace calls custom code a premium feature). Upgrading takes a minute, then come right back.

Install it — 3 steps

  1. Copy the code

    Click the Copy the code button on the black box below. That's your plugin — you never need to read or understand what's inside it.

  2. Paste it into Squarespace

    Go to Settings → Advanced → Code Injection. Click inside the box labelled Footer, paste, and click Save at the top.

  3. Have a look

    Open your website and refresh the page. Your new bar is live with a few starter links. Next: make them yours, just below.

Your plugin code 
<!-- MST Secondary Nav v2.0 | Minimist Web Design | minimist.ca -->
<style>
/* <---MST SECONDARY NAV ---> */
/* Colors & sizes live just below. Easiest way to change them:
   the Configurator — it rebuilds this whole block for you. */
.mst-topbar {
  --mst-topbar-bg: transparent;
  --mst-topbar-divider: transparent;
  --mst-topbar-align: flex-end;
  --mst-topbar-gap: 24px;
  --mst-topbar-pad-y: 10px;
  --mst-topbar-gap-below: 14px;
  --mst-topbar-link-size: 15px;
  --mst-topbar-link-spacing: 0px;
  --mst-topbar-link-case: none;
  --mst-topbar-link-color: inherit;
  --mst-topbar-link-hover: #B47978;
  --mst-topbar-btn-size: 16px;
  --mst-topbar-btn-pad: 5px 15px;
  --mst-topbar-btn-radius: 5px;
  --mst-topbar-btn-bg: #000000;
  --mst-topbar-btn-color: #ffffff;
  --mst-topbar-m-gap: 20px;
  --mst-topbar-m-link-size: 16px;
  --mst-topbar-m-link-color: currentColor;
  --mst-topbar-m-btn-bg: #000000;
  --mst-topbar-m-btn-color: #ffffff;
  font-family: inherit;
}
.mst-topbar * { margin: 0; padding: 0; box-sizing: border-box; }

/* desktop — second row inside the header, hides with it at the mobile breakpoint */
#header .header-display-desktop { flex-wrap: wrap; }
#header .header-display-desktop .mst-topbar {
  width: 100%;
  order: -1;
  display: flex;
  align-items: center;
  justify-content: var(--mst-topbar-align);
  gap: var(--mst-topbar-gap);
  padding: var(--mst-topbar-pad-y) 0;
  margin-bottom: var(--mst-topbar-gap-below);
  background: var(--mst-topbar-bg);
  border-bottom: 1px solid var(--mst-topbar-divider);
}
.mst-topbar__links,
.mst-topbar__buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mst-topbar-gap);
}
.mst-topbar__buttons { gap: 10px; }
.mst-topbar__link {
  font-size: var(--mst-topbar-link-size);
  letter-spacing: var(--mst-topbar-link-spacing);
  text-transform: var(--mst-topbar-link-case);
  color: var(--mst-topbar-link-color) !important;
  text-decoration: none !important;
  background-image: none !important;
  transition: color 0.4s ease-in-out;
}
.mst-topbar__link:hover { color: var(--mst-topbar-link-hover) !important; }
.mst-topbar__btn {
  display: inline-flex;
  align-items: center;
  font-size: var(--mst-topbar-btn-size);
  letter-spacing: var(--mst-topbar-link-spacing);
  padding: var(--mst-topbar-btn-pad);
  border-radius: var(--mst-topbar-btn-radius);
  background: var(--mst-topbar-btn-bg) !important;
  color: var(--mst-topbar-btn-color) !important;
  text-decoration: none !important;
  background-image: none !important;
  line-height: 1.3;
  transition: opacity 0.3s ease-in-out;
}
.mst-topbar__btn:hover { opacity: 0.8; }

/* mobile — copy of the bar inside the phone menu */
.header-menu .mst-topbar--mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mst-topbar-m-gap);
  width: 100%;
  padding: 24px 5vw;
}
.header-menu .mst-topbar--mobile .mst-topbar__links { justify-content: center; gap: 10px 24px; }
.header-menu .mst-topbar--mobile .mst-topbar__buttons { justify-content: center; }
.header-menu .mst-topbar--mobile .mst-topbar__link {
  font-size: var(--mst-topbar-m-link-size);
  color: var(--mst-topbar-m-link-color) !important;
}
.header-menu .mst-topbar--mobile .mst-topbar__btn {
  background: var(--mst-topbar-m-btn-bg) !important;
  color: var(--mst-topbar-m-btn-color) !important;
}
</style>

<script>
(function () {
  /* <---MST SECONDARY NAV — YOUR LINKS & BUTTONS ---> */
  /* Each line is one item. label = the text people see,
     url = where it goes, newTab: true = opens a new tab.
     Easiest way to edit these: the Configurator. */
  var LINKS = [
    { label: "Support", url: "/support", newTab: false },
    { label: "Careers", url: "/careers", newTab: false }
  ];
  var BUTTONS = [
    { label: "Client Login", url: "/login", newTab: true }
  ];
  /* true = also show inside the phone menu, false = computers only */
  var SHOW_IN_MOBILE_MENU = true;

  function anchor(item, cls) {
    var a = document.createElement("a");
    a.className = cls;
    a.href = item.url;
    a.textContent = item.label;
    if (item.newTab) { a.target = "_blank"; a.rel = "noopener"; }
    return a;
  }

  function buildBar(modifier) {
    var bar = document.createElement("div");
    bar.className = "mst-topbar" + (modifier ? " " + modifier : "");
    if (LINKS.length) {
      var nav = document.createElement("nav");
      nav.className = "mst-topbar__links";
      nav.setAttribute("aria-label", "Secondary navigation");
      LINKS.forEach(function (l) { nav.appendChild(anchor(l, "mst-topbar__link")); });
      bar.appendChild(nav);
    }
    if (BUTTONS.length) {
      var box = document.createElement("div");
      box.className = "mst-topbar__buttons";
      BUTTONS.forEach(function (b) { box.appendChild(anchor(b, "mst-topbar__btn")); });
      bar.appendChild(box);
    }
    return bar;
  }

  function init() {
    var desktop = document.querySelector("#header .header-display-desktop");
    if (desktop && !desktop.querySelector(".mst-topbar")) {
      desktop.insertBefore(buildBar(""), desktop.firstChild);
    }
    if (SHOW_IN_MOBILE_MENU) {
      var root = document.querySelector("#header .header-menu-nav-folder[data-folder='root']");
      if (root && !root.querySelector(".mst-topbar--mobile")) {
        var mobileBar = buildBar("mst-topbar--mobile");
        var actions = root.querySelector(".header-menu-actions");
        if (actions) { root.insertBefore(mobileBar, actions); } else { root.appendChild(mobileBar); }
      }
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();
</script>

Make it yours — no coding

All your changes happen in the builder below — a simple form where you type your links, pick your colors, and see a live preview. It works the same way every time:

  1. Open the Configurator and fill in your links, buttons, and colors.
  2. Click Create My Code, then Copy the code.
  3. Back in Squarespace: Settings → Advanced → Code Injection.
  4. In the Footer box, delete the old plugin code, paste the new one, and Save.

That's the whole routine — change your mind as often as you like, it's always the same copy-and-paste loop. The builder is right here:

Minimist Plugin

Build Your Secondary Nav

Fill in your links, pick your colors, and click Create My Code. Then copy the code and paste it into your website — the how-to is right under the code.

These are the links and buttons that will appear in your new bar. Use the arrows to reorder, and the ✕ to remove.

Links

Simple text links — for pages like Support, Careers, or FAQs.

Buttons

Stand-out buttons — great for Client Login or Book Now. You can leave this empty.

How the bar looks on computers. Not sure about something? The starting values already look good — you can always come back.

The bar

In pixels
Breathing room, in pixels
Gap between this bar and your main menu, in pixels

Links

In pixels
Leave 0 if unsure

Buttons

In pixels
0 = square corners
In pixels
In pixels

On phones, your links appear inside the menu that opens from the ☰ button. Squarespace handles the switch automatically.

Links in the phone menu

In pixels

Buttons in the phone menu

In pixels

Your code is ready

Now put it on your site

  1. Click Copy the code above.
  2. In Squarespace, go to Settings → Advanced → Code Injection.
  3. Click inside the Footer box. If your old Secondary Nav code is there, delete it first.
  4. Paste the new code and click Save. Done — refresh your website to see it.
Comfortable with code? (optional)

If you'd rather edit by hand, the code is friendly: your links live in plainly-marked lists near the top of the script (LINKS and BUTTONS — each line is one item), and every color and size is a clearly-named setting at the top of the style section. Change a value, re-save in Code Injection, refresh. But the Configurator is the easier path — it exists so you never have to do this.

Questions

Will this break my website?

No. The plugin only adds the bar — it doesn't change anything else on your site. And it's fully reversible: delete the code from the Footer box, click Save, and your site is exactly as it was.

The bar isn't showing — what do I do?

Three quick checks, in order: (1) Make sure the code went into the Footer box in Code Injection and you clicked Save. (2) Refresh your website with a hard refresh — hold Shift and click your browser's reload button. (3) Re-do the plan check at the top of this page. Still nothing? Message us through the support link below and we'll sort it out with you.

How do I change the links or colors later?

Scroll to the builder on this page, make your changes, click Create My Code, copy it, and replace the old code in the Footer box. Same four steps every time.

Does it work on phones and tablets?

Yes — your links appear inside the ☰ menu automatically. If you'd rather keep the bar on computers only, there's a switch for that in the builder's Phone Menu tab.

How do I remove the plugin?

Go to Settings → Advanced → Code Injection, delete the plugin code from the Footer box, and click Save. Gone — no leftovers.

I have the older version of this plugin

Nice — you're upgrading. The old version had three parts to remove: its script in the Header box of Code Injection, its styling in Design → Custom CSS (between the SECONDARY NAV STYLING markers), and the hidden footer section it borrowed links from. Remove those, then install this version as above. Not sure? Message support and we'll walk through it together.

Stuck? We'll get you sorted.

Send us a message with your website address and we'll help you personally — usually the fix takes a minute.

Contact support

Secondary Nav v2.0 · A Minimist Web Design plugin · minimist.ca