From 83f2e338bfaa47eb7baf28c8d3e371f0ee49d398 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sun, 8 May 2022 14:58:45 +0200
Subject: [PATCH 01/17] NEW: Add headers

---
 docs/_templates/sections/header.html          |   2 -
 docs/conf.py                                  |  48 ++++++
 src/sphinx_book_theme/__init__.py             |  21 +++
 src/sphinx_book_theme/_components.py          |  92 ++++++++++++
 .../assets/styles/abstracts/_variables.scss   |   1 +
 .../assets/styles/components/_buttons.scss    |   2 +-
 .../assets/styles/index.scss                  |   3 +-
 .../styles/sections/_header-announcement.scss |  12 ++
 .../styles/sections/_header-primary.scss      | 141 ++++++++++++++++++
 .../assets/styles/sections/_headers.scss      |  22 ---
 .../styles/sections/_sidebar-primary.scss     |   6 +-
 .../theme/sphinx_book_theme/layout.html       |   8 +-
 .../sphinx_book_theme/sections/header.html    |  44 ++++++
 .../theme/sphinx_book_theme/theme.conf        |   1 +
 14 files changed, 368 insertions(+), 35 deletions(-)
 delete mode 100644 docs/_templates/sections/header.html
 create mode 100644 src/sphinx_book_theme/_components.py
 create mode 100644 src/sphinx_book_theme/assets/styles/sections/_header-announcement.scss
 create mode 100644 src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
 delete mode 100644 src/sphinx_book_theme/assets/styles/sections/_headers.scss

diff --git a/docs/_templates/sections/header.html b/docs/_templates/sections/header.html
deleted file mode 100644
index 6630c176..00000000
--- a/docs/_templates/sections/header.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- Uncomment the line below to show off a header! -->
-<!-- Hello world! -->
diff --git a/docs/conf.py b/docs/conf.py
index b9fd713f..1d862f7b 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -127,6 +127,54 @@
         "so double-check your custom CSS rules!⚠️"
     ),
     # For testing
+    "header": {
+        "brand": {
+            "type": "image",
+            "src": "https://executablebooks.org/en/latest/_static/logo.svg",
+            "url": "https://sphinx-book-theme.readthedocs.io",
+        },
+        "start": [
+            {
+                "type": "text",
+                "content": "Jupyter Book",
+                "url": "https://jupyterbook.org",
+            },
+            {
+                "type": "dropdown",
+                "content": "EBP Projects",
+                "items": [
+                    {"content": "google", "url": "https://google.com"},
+                    {"content": "jupyter", "url": "https://jupyter.org"},
+                ],
+            },
+            {
+                "type": "dropdown",
+                "content": "MyST Markdown",
+                "items": [
+                    {"content": "google", "url": "https://google.com"},
+                    {"content": "jupyter", "url": "https://jupyter.org"},
+                ],
+            },
+        ],
+        "end": [
+            {"type": "button", "content": "end", "url": "https://google.com"},
+            {
+                "type": "icon-links",
+                "icons": [
+                    {
+                        "url": "https://twitter.com/executablebooks",
+                        "name": "Twitter",
+                        "icon": "fab fa-twitter-square",
+                    },
+                    {
+                        "url": "https://github.com/orgs/executablebooks/discussions",
+                        "name": "Forum",
+                        "icon": "fas fa-comments",
+                    },
+                ],
+            },
+        ],
+    }
     # "use_fullscreen_button": False,
     # "home_page_in_toc": True,
     # "single_page": True,
diff --git a/src/sphinx_book_theme/__init__.py b/src/sphinx_book_theme/__init__.py
index 4b60d0a2..cc305967 100644
--- a/src/sphinx_book_theme/__init__.py
+++ b/src/sphinx_book_theme/__init__.py
@@ -14,6 +14,7 @@
 from .header_buttons import prep_header_buttons, add_header_buttons
 from .header_buttons.launch import add_launch_buttons
 from ._transforms import HandleFootnoteTransform
+from ._components import COMPONENT_FUNCS
 
 __version__ = "0.3.2"
 """sphinx-book-theme version"""
@@ -62,6 +63,26 @@ def add_metadata_to_page(app, pagename, templatename, context, doctree):
         context.get("theme_search_bar_text", "Search the docs ...")
     )
 
+    # Define the function render the above
+    def render_component(component):
+        component_copy = component.copy()
+
+        # We use `type` to denote different kinds of components
+        kind = component_copy.pop("type")
+        if kind not in COMPONENT_FUNCS:
+            SPHINX_LOGGER.warn(f"Unknown component type: {kind}")
+            return
+        try:
+            output = COMPONENT_FUNCS[kind](app, context, **component_copy)
+        except Exception as exc:
+            msg = f"Component render failure for:\n{component}\n\n"
+            msg += f"Exception: {exc}"
+            SPHINX_LOGGER.warn(msg)
+            return
+        return output
+
+    context["theme_render_component"] = render_component
+
 
 @lru_cache(maxsize=None)
 def _gen_hash(path: str) -> str:
diff --git a/src/sphinx_book_theme/_components.py b/src/sphinx_book_theme/_components.py
new file mode 100644
index 00000000..163461bb
--- /dev/null
+++ b/src/sphinx_book_theme/_components.py
@@ -0,0 +1,92 @@
+"""Functions to compile HTML components to be placed on a page.
+
+These are meant to be used by Jinja templates via the Sphinx HTML context.
+
+A dictionary defines the components that are available to the theme.
+Keys of this dictionary should be the `"type"` values that users provide in
+their configuration.
+The remaining values in the user configuration are passed as kwargs to the func.
+"""
+from sphinx.util import logging
+
+SPHINX_LOGGER = logging.getLogger(__name__)
+
+
+# Add functions to render header components
+def component_text(app, context, content="", url="", classes=[]):
+    classes = " ".join(classes)
+    html = f"<span class='component-text {classes}'>{content}</span>"
+    if url:
+        html = f'<a href="{url}" class="link-primary">{html}</a>'
+    return html
+
+
+def component_button(app, context, content="", url="", onclick="", classes=[]):
+    if url and onclick:
+        raise Exception("Button component cannot have both url and onclick specified.")
+    classes = " ".join(classes)
+    if onclick:
+        onclick = ' onclick="{onclick}"'
+
+    classes = " ".join(classes)
+    html = f"""
+    <button class="btn btn-outline-primary {classes}"{onclick} type="button">
+        {content}
+    </button>
+    """
+    if url:
+        html = f'<a href="{url}">{html}</a>'
+
+    return html
+
+
+def component_image(app, context, src="", url="", classes=[]):
+    if not src.startswith("http"):
+        src = context["pathto"](src, 1)
+    html = f"""
+    <img src={src}>
+    """
+    if url:
+        html = f"<a href={url}>{html}</a>"
+    return html
+
+
+def component_html(app, context, html=""):
+    return html
+
+
+def component_dropdown(app, context, content="", items=[]):
+    dropdown_items = []
+    for component in items:
+        link = f"""
+        <a href="{component['url']}" class="dropdown-item">{component['content']}</a>
+        """
+        dropdown_items.append(link)
+    dropdown_items = "\n".join(dropdown_items)
+    html = f"""
+    <div class="dropdown">
+        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {content}
+        </button>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            {dropdown_items}
+        </div>
+    </div>
+    """  # noqa
+    return html
+
+
+def component_icon_links(app, context, icons, classes=[]):
+    context = {"theme_icon_links": icons}
+    # Add the pydata theme icon-links macro as a function we can re-use
+    return app.builder.templates.render("icon-links.html", context)
+
+
+COMPONENT_FUNCS = {
+    "text": component_text,
+    "button": component_button,
+    "html": component_html,
+    "image": component_image,
+    "icon-links": component_icon_links,
+    "dropdown": component_dropdown,
+}
diff --git a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
index bb2bbbfe..b0b1ff9e 100644
--- a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
+++ b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
@@ -22,6 +22,7 @@ $zindex-offcanvas: 1100; // We increase this to be over the tooltips
 $header-article-height: 3em;
 $leftbar-width-mobile: 75%;
 $leftbar-width-wide: 275px;
+$leftbar-padding: 1rem 1rem 0 1.5rem;
 $toc-width-mobile: 75%;
 // Main content, to leave room for the margin
 $content-max-width: 70%;
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index fba7a86d..ba536373 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -41,7 +41,7 @@
 }
 
 .menu-dropdown__content {
-  // Hide by default, we'll show on hover
+  // Hide by default, we'll show on click
   position: absolute;
   visibility: hidden;
   opacity: 0;
diff --git a/src/sphinx_book_theme/assets/styles/index.scss b/src/sphinx_book_theme/assets/styles/index.scss
index 8219bd1a..463bd851 100644
--- a/src/sphinx_book_theme/assets/styles/index.scss
+++ b/src/sphinx_book_theme/assets/styles/index.scss
@@ -20,8 +20,9 @@
 @import "sections/article";
 @import "sections/footer-article";
 @import "sections/footer-content";
+@import "sections/header-announcement";
 @import "sections/header-article";
-@import "sections/headers";
+@import "sections/header-primary";
 @import "sections/sidebar-primary";
 @import "sections/sidebar-secondary";
 @import "sections/sidebars-toggle";
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-announcement.scss b/src/sphinx_book_theme/assets/styles/sections/_header-announcement.scss
new file mode 100644
index 00000000..873fef86
--- /dev/null
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-announcement.scss
@@ -0,0 +1,12 @@
+.announcement {
+  width: 100%;
+  text-align: center;
+  background-color: #616161;
+  color: white;
+  padding: 0.4em 12.5%; // Horizontal padding so the width is 75%
+
+  @media (max-width: $breakpoint-md) {
+    // Announcements can take a bit more width on mobile
+    padding: 0.4em 2%;
+  }
+}
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
new file mode 100644
index 00000000..34ff1ab7
--- /dev/null
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
@@ -0,0 +1,141 @@
+/**
+ * A few different header CSS rules
+ */
+@mixin max-height-header() {
+  // Fix max height so our header items don't spill over
+  max-height: 4rem;
+  @media (max-width: $breakpoint-md) {
+    max-height: 3rem;
+  }
+}
+
+// The parent div that will expand / contract
+.header {
+  display: flex;
+  border-bottom: $border-thin;
+
+  // On narrow screens, cap the height unless you click the hamburger menu
+  @include max-height-header;
+  @media (max-width: $breakpoint-md) {
+    transition: max-height $animation-time ease-out;
+    overflow-y: hidden;
+  }
+
+  // Navigation links
+  a,
+  div.dropdown button {
+    color: $non-content-grey;
+
+    &:hover {
+      color: rgba(var(--pst-color-link), 1);
+      text-decoration: none;
+    }
+  }
+}
+
+// Header content should take up the whole remaining horizontal space
+.header__content {
+  flex-grow: 1;
+}
+
+.header__content,
+.header__brand,
+.header__start,
+.header__end {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.5rem;
+
+  // On narrow screens, the header items show flow vertically and snap to left
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+  }
+}
+
+// Ensure the header items don't touch the screen edge
+.header__start {
+  padding-left: 1rem;
+}
+.header__end {
+  padding-right: 1rem;
+}
+
+@media (max-width: $breakpoint-md) {
+  // Only apply on narrow screens since we want it centered on sidebar on wide
+  .header__brand,
+  .header__end {
+    padding-left: 1rem;
+    padding-right: 0;
+  }
+}
+
+// Only show up on narrow screens, and push to the far right
+.headerbtn.header-toggle-button {
+  display: none;
+  @media (max-width: $breakpoint-md) {
+    display: block;
+    margin-top: 0.7em; // HACK: to make this vertically-centered w/o using flexbox
+    margin-left: auto;
+    padding-right: 0; // Override headerbtn padding so header has same right/left pad
+  }
+}
+
+input#__header {
+  // Inputs never display, only used to control behavior
+  display: none;
+
+  // On narrow screens, checking the button opens the header
+  &:checked ~ div.header {
+    @media (max-width: $breakpoint-md) {
+      max-height: 20em;
+    }
+  }
+}
+
+// Header content contains the components
+.header__content {
+  flex-grow: 1;
+}
+
+// This is the logo or a bold docs title
+.header__brand {
+  font-size: 1.5em;
+
+  // Wide screens: header start has same width as the sidebar + center over logo
+  @media (min-width: $breakpoint-md) {
+    width: $leftbar-width-wide;
+    justify-content: center;
+  }
+}
+
+.header__end {
+  @media (min-width: $breakpoint-md) {
+    // Header end is right-justified
+    margin-left: auto;
+  }
+}
+
+ul#navbar-icon-links {
+  flex-direction: row;
+  gap: 0.5em;
+}
+
+.header-content-item {
+  display: flex;
+  align-items: center;
+
+  // Spacing is horizontal on wide, vertical on narrow
+  // Items should snap to left on mobile
+  @media (max-width: $breakpoint-md) {
+    align-items: start;
+  }
+
+  img {
+    padding: 0.4rem 0em;
+    @include max-height-header;
+  }
+
+  .dropdown-menu {
+    z-index: $zindex-sticky + 1;
+  }
+}
diff --git a/src/sphinx_book_theme/assets/styles/sections/_headers.scss b/src/sphinx_book_theme/assets/styles/sections/_headers.scss
deleted file mode 100644
index e8504158..00000000
--- a/src/sphinx_book_theme/assets/styles/sections/_headers.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * A few different header CSS rules
- */
-.header-item {
-  width: 100%;
-  text-align: center;
-
-  &:empty {
-    display: none;
-  }
-
-  &.announcement {
-    background-color: #616161;
-    color: white;
-    padding: 0.4em 12.5%; // Horizontal padding so the width is 75%
-
-    @media (max-width: $breakpoint-md) {
-      // Announcements can take a bit more width on mobile
-      padding: 0.4em 2%;
-    }
-  }
-}
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
index 5ea829e3..d90c183a 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
@@ -35,7 +35,7 @@
   // Apply some basic padding so the dropdown buttons don't overlap w/ scrollbar
   .bd-sidebar__top,
   .bd-sidebar__bottom {
-    padding: 0 1rem 0rem 1.5rem;
+    padding: $leftbar-padding;
   }
 
   // This should always snap to the bottom even if there's no sidebar content
@@ -83,10 +83,6 @@
 }
 
 div.navbar-brand-box {
-  @media (min-width: $breakpoint-md) {
-    padding-top: 2em;
-  }
-
   a.navbar-brand {
     width: 100%;
     height: auto;
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
index 37f19bce..e164607f 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
@@ -16,12 +16,12 @@
     <div class="visually-hidden">Toggle in-page Table of Contents</div>
 </label>
 <!-- Headers at the top -->
-<div class="announcement header-item noprint">
+<div class="announcement noprint">
     {%- include "sections/announcement.html" -%}
 </div>
-<div class="header header-item noprint">
-    {%- include "sections/header.html" -%}
-</div>
+
+{%- include "sections/header.html" -%}
+
 {{ super() }}
 {% endblock %}
 
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
index e69de29b..54551c50 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
@@ -0,0 +1,44 @@
+{% if theme_header %}
+{% set start_items = theme_header.get("start", {}) %}
+{% set end_items = theme_header.get("end", {}) %}
+
+{%- if start_items or middle_items or end_items %}
+<input type="checkbox" class="header-toggle" name="__header" id="__header" aria-label="Toggle header">
+<div id="theme-header" class="container-xl header noprint">
+  <div class="row header__content">
+    <!-- If given, the brand will be the same width as sidebar -->
+    {% if theme_header.get("brand") %}
+    <div class="header__brand">
+      <div class="header-content-item">
+        {{ theme_render_component(theme_header.get("brand")) }}
+      </div>
+    </div>
+    {% endif %}
+
+    <!-- Start is left-aligned -->
+    <div class="header__start">
+      {% for item in start_items %}
+      <div class="header-content-item">
+        {{ theme_render_component(item) }}
+      </div>
+      {% endfor %}
+    </div>
+
+    <!-- End is right-aligned -->
+    <div class="header__end">
+      {% for item in end_items %}
+      <div class="header-content-item">
+        {{ theme_render_component(item) }}
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  {# Dropdown button for mobile, will show on the right #}
+  <label class="header-toggle-button headerbtn" for="__header">
+    <div class="visually-hidden">{{ translate('Toggle Header') }}</div>
+    <i class="fas fa-bars"></i>
+  </label>
+</div>
+{% endif -%}
+
+{% endif %}
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/theme.conf b/src/sphinx_book_theme/theme/sphinx_book_theme/theme.conf
index 122d36ba..66025eae 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/theme.conf
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/theme.conf
@@ -14,6 +14,7 @@ repository_url =
 repository_branch =
 launch_buttons = {}
 home_page_in_toc = False
+header =
 logo_only =
 # DEPRECATE after a few release cycles
 navbar_footer_text =

From 4d8d398fd8293ed2f2a8608748215d50a436857d Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Mon, 9 May 2022 14:22:00 +0200
Subject: [PATCH 02/17] Fixing pixel scroll helper

---
 src/sphinx_book_theme/assets/styles/base/_base.scss           | 3 ---
 .../assets/styles/sections/_header-primary.scss               | 4 ++--
 src/sphinx_book_theme/theme/sphinx_book_theme/layout.html     | 4 ++--
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/sphinx_book_theme/assets/styles/base/_base.scss b/src/sphinx_book_theme/assets/styles/base/_base.scss
index 75653d23..3d6a0166 100644
--- a/src/sphinx_book_theme/assets/styles/base/_base.scss
+++ b/src/sphinx_book_theme/assets/styles/base/_base.scss
@@ -3,11 +3,8 @@
 *********************************************/
 // For the helper pixel that we can watch to decide whether we've scrolled
 .sbt-scroll-pixel-helper {
-  position: absolute;
   width: 0px;
   height: 0px;
-  top: 0;
-  left: 0;
 }
 
 // Hide an element without display: none but so that it takes no space
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
index 34ff1ab7..e79eb930 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
@@ -44,7 +44,7 @@
 .header__end {
   display: flex;
   flex-wrap: nowrap;
-  gap: 0.5rem;
+  gap: 0.75rem;
 
   // On narrow screens, the header items show flow vertically and snap to left
   @media (max-width: $breakpoint-md) {
@@ -117,7 +117,7 @@ input#__header {
 
 ul#navbar-icon-links {
   flex-direction: row;
-  gap: 0.5em;
+  gap: 0.75rem;
 }
 
 .header-content-item {
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
index e164607f..41f8c6e9 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
@@ -49,11 +49,11 @@
 {% endblock %}
 
 {% block docs_main %}
-<!-- A tiny helper pixel to detect if we've scrolled -->
-<div class="sbt-scroll-pixel-helper"></div>
 <!-- Main content -->
 <div class="col py-0 content-container">
     {% block docs_body %}
+    <!-- A tiny helper pixel to detect if we've scrolled past the top -->
+    <div class="sbt-scroll-pixel-helper"></div>
     <div class="header-article row sticky-top noprint">
         {% include "sections/header-article.html" %}
     </div>

From 9b49ecd17826fe0ba532e4220534a017a69ef92a Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Mon, 9 May 2022 20:35:37 +0200
Subject: [PATCH 03/17] Header content variables

---
 docs/conf.py                                  |  52 +--
 docs/config-header.yml                        |  40 +++
 docs/customize/header.md                      | 314 +++++++++++++++++-
 .../assets/styles/abstracts/_variables.scss   |   6 +-
 .../assets/styles/components/_buttons.scss    |   4 +-
 .../styles/sections/_header-article.scss      |   2 +-
 .../styles/sections/_header-primary.scss      |  37 ++-
 .../sphinx_book_theme/sections/header.html    |   4 +-
 8 files changed, 390 insertions(+), 69 deletions(-)
 create mode 100644 docs/config-header.yml

diff --git a/docs/conf.py b/docs/conf.py
index 1d862f7b..4ecad5b0 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -2,6 +2,7 @@
 import os
 from pathlib import Path
 from urllib import request
+from yaml import safe_load
 
 project = "Sphinx Book Theme"
 copyright = "2020"
@@ -103,6 +104,8 @@
     "repository_branch": "master",
 }
 
+header_config = safe_load(Path("./config-header.yml").read_text())
+
 html_theme_options = {
     "path_to_docs": "docs",
     "repository_url": "https://github.com/executablebooks/sphinx-book-theme",
@@ -126,55 +129,8 @@
         "⚠️The latest release refactored our HTML, "
         "so double-check your custom CSS rules!⚠️"
     ),
+    "header": header_config,
     # For testing
-    "header": {
-        "brand": {
-            "type": "image",
-            "src": "https://executablebooks.org/en/latest/_static/logo.svg",
-            "url": "https://sphinx-book-theme.readthedocs.io",
-        },
-        "start": [
-            {
-                "type": "text",
-                "content": "Jupyter Book",
-                "url": "https://jupyterbook.org",
-            },
-            {
-                "type": "dropdown",
-                "content": "EBP Projects",
-                "items": [
-                    {"content": "google", "url": "https://google.com"},
-                    {"content": "jupyter", "url": "https://jupyter.org"},
-                ],
-            },
-            {
-                "type": "dropdown",
-                "content": "MyST Markdown",
-                "items": [
-                    {"content": "google", "url": "https://google.com"},
-                    {"content": "jupyter", "url": "https://jupyter.org"},
-                ],
-            },
-        ],
-        "end": [
-            {"type": "button", "content": "end", "url": "https://google.com"},
-            {
-                "type": "icon-links",
-                "icons": [
-                    {
-                        "url": "https://twitter.com/executablebooks",
-                        "name": "Twitter",
-                        "icon": "fab fa-twitter-square",
-                    },
-                    {
-                        "url": "https://github.com/orgs/executablebooks/discussions",
-                        "name": "Forum",
-                        "icon": "fas fa-comments",
-                    },
-                ],
-            },
-        ],
-    }
     # "use_fullscreen_button": False,
     # "home_page_in_toc": True,
     # "single_page": True,
diff --git a/docs/config-header.yml b/docs/config-header.yml
new file mode 100644
index 00000000..40a9c593
--- /dev/null
+++ b/docs/config-header.yml
@@ -0,0 +1,40 @@
+brand:
+  type: image
+  src: https://executablebooks.org/en/latest/_static/logo.svg
+  url: https://sphinx-book-theme.readthedocs.io
+start:
+  - type: dropdown
+    content: Projects
+    items:
+    - content: Jupyter Book
+      url: https://jupyterbook.org
+    - content: MyST Markdown
+      url: https://myst-parser.readthedocs.io
+    - content: MyST-NB
+      url: https://myst-nb.readthedocs.io
+
+  - type: dropdown
+    content: Community
+    items:
+    - content: Community guide
+      url: https://executablebooks.org
+    - content: Forum
+      url: https://github.com/orgs/executablebooks/discussions
+    - content: Feature Voting
+      url: https://executablebooks.org/en/latest/feature-vote.html
+
+end:
+  - type: icon-links
+    icons:
+    - icon: fab fa-twitter-square
+      name: Twitter
+      url: https://twitter.com/executablebooks
+    - icon: fab fa-github-square
+      name: GitHub
+      url: https://github.com/executablebooks
+    - icon: fas fa-comments
+      name: Forum
+      url: https://github.com/orgs/executablebooks/discussions
+  - type: button
+    content: Book gallery
+    url: http://gallery.jupyterbook.org/
diff --git a/docs/customize/header.md b/docs/customize/header.md
index 0dc58c2b..ef813dde 100644
--- a/docs/customize/header.md
+++ b/docs/customize/header.md
@@ -1,7 +1,312 @@
 # Header content
 
-By default, this theme does not contain any header content, it only has a sidebar and a main content window.
-However, you can define your own HTML in a header that will be inserted **above everything else**.
+A header extends the interface of your documentation to provide high-level information and links for readers at the top of the page.
+They are often used to provide organization-wide branding, cross-links between documentation, and links to social media and external websites.
+
+Your header will be displayed above the sidebar and article content, but will disappear as readers scroll down.
+On mobile displays, the header will be collapsed with a button to expand vertically.
+
+## Enable and configure the header
+
+Enable headers in your documentation by providing **a header configuration** in `conf.py`:
+
+```python
+html_theme_options = {
+  "header": { <your configuration here> }
+}
+```
+
+For one example, see the header configuration of this documentation, in YAML format.
+
+````{admonition} YAML configuration for this theme's header
+:class: dropdown
+Below is YAML configuration for this theme's header.
+It is read by `conf.py` and converted into a Python dictionary at build time.
+
+```{literalinclude} ../config-header.yml
+:language: yaml
+```
+````
+
+See the rest of these sections for how to add various elements to your header.
+
+## Header sections
+
+There are three major sections that you can control with your header:
+
+- [`brand`](header:brand): A special section for displaying a logo or site brand.
+- [`start`](header:start): Left-aligned header components.
+- [`end`](header:end): Right-aligned header components.
+
+Each section has its own configuration, which is specified via keys in the `header` configuration, like so:
+
+```python
+html_theme_options = {
+  "header": {
+    "brand": { <brand configuration here> },
+    "start": [ <list of start section components> ],
+    "end": [ <list of end section components> ],
+  }
+}
+```
+
+Where the values of `"start":` and `"end":` are both [lists of component configuration items](header:components).
+
+(header:brand)=
+### `brand` section
+
+The "brand" section is another place to put your title / logo if you don't want it to be in the primary sidebar (or, a place to put a higher-level logo like an organization-wide logo).
+It is centered above your sidebar, and displayed to the left on mobile.
+
+#### Add an image logo
+
+To add a logo image to the brand section, see this sample configuration:
+
+```python
+html_theme_options = {
+  "header": {
+    "brand": {
+      # Specifies that the brand area will use an image logo
+      "type": "image",
+      # Source of the image to be used
+      "src": "https://executablebooks.org/en/latest/_static/logo.svg",
+      # Link for the image
+      "url": "https://sphinx-book-theme.readthedocs.io",
+    },
+  }
+}
+```
+
+#### Add brand text
+
+To add text instead of an image, use the following configuration.
+You can put arbitrary HTML in the `content` configuration:
+
+```python
+html_theme_options = {
+  "header": {
+    "brand": {
+      # Specifies that we will use text instead of an image logo
+      "type": "text",
+      # Text that will be displayed
+      "content": "My documentation!",
+      # Link for the image
+      "url": "https://sphinx-book-theme.readthedocs.io",
+    },
+  }
+}
+```
+
+(header:start)=
+### `start` section
+
+Your header's start section will be left-aligned with your article content (when the sidebar is present).
+On mobile devices, it will be hidden under a collapsible button.
+
+To add components to your header's start section, use the following configuration:
+
+```python
+html_theme_options = {
+  "header": {
+    "start": [ <list of component configuration> ]
+  }
+}
+```
+
+(header:end)=
+### `end` section
+
+
+Your header's end section will be right-aligned with the page.
+On mobile devices, it will be hidden under a collapsible button.
+
+To add components to your header's end section, use the following configuration:
+
+```python
+html_theme_options = {
+  "header": {
+    "end": [ <list of component configuration> ]
+  }
+}
+```
+
+(header:components)=
+## Components
+
+Components are small UI elements that can be added to your header's sections.
+
+Add components to the two major sections of your header ([`start`](header:start) and [`end`](header:end)) by providing **lists of component configuration**.
+Each component configuration takes a **`type:`** key to specify what type of component it is, as well as a collection of **`key:val`** parameters that modify the component's behavior.
+
+For example, the following configuration adds two link components to the "start" section of a header, in `conf.py`:
+
+```python
+html_theme_options = {
+  "header": {
+    "start": [
+      {
+        "type": "text",
+        "url": "https://executablebooks.org",
+        "content": "Executable Books"
+      },
+      {
+        "type": "text",
+        "url": "https://jupyterbook.org",
+        "content": "Jupyter Book"
+      },
+    ]
+  }
+}
+```
+
+The rest of these sections describe the components you can use:
+
+### Link and text components
+
+To add text and link components to header sections, use the following component configuration:
+
+```python
+
+# Provided as a list item to `start:` or `end:`
+{
+  # Specifies a `text` component
+  "type": "text",
+  # The URL to which the link points
+  "url": "https://jupyterbook.org",
+  # The text to be displayed
+  "content": "Jupyter Book",
+  # An optional list of classes to add
+  "classes": ["one", "two"]
+},
+```
+
+To add text without a link, simply omit the `url:` parameter.
+
+### Dropdown menus
+
+Dropdown menus provide a clickable button that will display a list of links.
+It is a useful way to provide more links in your header without using too much horizontal space.
+
+To add dropdown components to header sections, use the following component configuration:
+
+```python
+# Provided as a list item to `start:` or `end:`
+{
+  # Specifies a `dropdown` type
+  "type": "dropdown",
+  # Text to be displayed on the button
+  "content": "EBP Projects",
+  # A list of dropdown links. Each defines a content string and a url
+  "items": [
+    {
+      "url": "https://executablebooks.org",
+      "content": "Executable Books"
+    },
+    {
+      "url": "https://jupyterbook.org",
+      "content": "Jupyter Book"
+    },
+  ],
+  # An optional list of classes to add
+  "classes": ["one", "two"]
+},
+```
+
+### Icon links
+
+You can add a list of icon links to your header that link to external sites and services.
+These are often used to link to social media accoutns like GitHub, Twitter, discussion forums, etc.
+They will be displayed horizontally whether on wide or narrow screens.
+
+There are two kinds of icons you can control with `icon-links`:
+
+- **FontAwesome icons**: FontAwesome icon classes like `fas fa-arrow-right`. See [the FontAwesome documentation](https://fontawesome.com/icons) for a list of classes and icons.
+- **A path to an image**: Any local image you include with your documentation.
+
+To add icon link components to header sections, use the following component configuration:
+
+```python
+# Provided as a list item to `start:` or `end:`
+{
+  # Specifies the `icon-links` component
+  "type": "icon-links",
+  # A list of icon links to include
+  "icons": [
+    # Configuration for icon one uses FontAwesome
+    {
+        # Specifies that this icon is a FontAwesome icon
+        "type": "fontawesome",
+        # A url for icon one
+        "url": "https://twitter.com/executablebooks",
+        # A tooltip for icon one
+        "name": "Twitter",
+        # A FontAwesome icon class
+        "icon": "fab fa-twitter-square",
+    },
+    # Configuration for icon two uses a local image path
+    {
+        # Specifies that this icon is a local image
+        "type": "local",
+        # A url for icon two
+        "url": "https://github.com/orgs/executablebooks/discussions",
+        # A tooltip for icon two
+        "name": "Discussions image",
+        # A path to a local image relative to conf.py
+        "icon": "./path/to/image.png",
+    },
+  ],
+},
+```
+
+### Buttons
+
+Buttons are larger and more visually-noticeable.
+They can either be links, or they can trigger arbitrary JavaScript that you provide.
+Use them as call-to-action items, or as a way to trigger events on your page if you are using custom JavaScript.
+
+To add buttons components to header sections, use the following component configuration:
+
+```python
+
+# Provided as a list item to `start:` or `end:`
+{
+  # Specifies the `button` component
+  "type": "button",
+  # The text that will be displayed inside the button.
+  "content": "end",
+  # If provided, the button will be a link to another page.
+  "url": "https://google.com",
+  # If provided, clicking the button will trigger this JavaScript.
+  "onclick": "SomeFunction()",
+  # An optional list of classes to add
+  "classes": ["one", "two"]
+}
+```
+
+Note tha **url** and **onclick** cannot both be provided in the same button's configuration.
+
+### HTML Snippets
+
+You may provide custom HTML snippets that are inserted into the header as-is.
+These are useful to define your own components or styling.
+
+To add raw HTML components to header sections, use the following component configuration:
+
+```python
+# Provided as a list item to `start:` or `end:`
+{
+  # Specifies a `html` component
+  "type": "html",
+  # The HTML to be inserted
+  "html": "<span>My custom span</span>",
+},
+```
+
+## Over-write the header entirely
+
+Instead of using any of the above functionality, you can also provide your own raw HTML for the header.
+Use it if you need to have much more flexibility and control over the header.
+
 To do so, you must define your own Sphinx Template in a specific location.
 The contents of this template will be inserted into the theme.
 Here is how to do this:
@@ -23,8 +328,3 @@ Here is how to do this:
   $ echo "<p>Some text!</p>" > _templates/sections/header.html
   ```
 - Build your documentation, and you should see content of this file show up above your site.
-
-## Style the header
-
-Note that the header has very little styling applied to it by default.
-So you should [add custom styles to the theme](custom-css.md) in order to achieve the look and feel you want.
diff --git a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
index b0b1ff9e..b4a2127e 100644
--- a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
+++ b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
@@ -65,7 +65,11 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
 
   // Variables for this theme
   --sbt-sidebar-font-size: var(--sbt-font-size-small-1);
-  --sbt-header-article-font-size: var(--sbt-font-size-small-1);
   --sbt-prevnext-font-size: var(--sbt-font-size-small-1);
   --sbt-footer-font-size: var(--sbt-font-size-small-1);
+
+  // Header variables
+  --theme-header-article-font-size: var(--sbt-font-size-small-1);
+  --theme-header-button-color: #5a5a5a;
+  --theme-header-button-color-hover: black;
 }
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index ba536373..0c3d9120 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -94,12 +94,12 @@ div.header-article-main {
     a,
     button,
     label {
-      color: $non-content-grey;
+      color: var(--theme-header-button-color);
 
       // Over-ride bootstrap defaults for clicking
       &:hover,
       &:focus {
-        color: black;
+        color: var(--theme-header-button-color-hover);
         box-shadow: none;
         text-decoration: none;
       }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
index 70cfc82f..f2b9f70a 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
@@ -6,7 +6,7 @@
   height: $header-article-height; // Fix the height so the TOC doesn't grow it
   background-color: white;
   transition: left 0.2s;
-  font-size: var(--sbt-header-article-font-size);
+  font-size: var(--theme-header-article-font-size);
 
   @include header-height-mobile;
 
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
index e79eb930..863e7835 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
@@ -1,11 +1,15 @@
 /**
  * A few different header CSS rules
  */
+
+$header-default-height-wide: 4rem;
+$header-default-height-narrow: 3rem;
+
 @mixin max-height-header() {
   // Fix max height so our header items don't spill over
-  max-height: 4rem;
+  max-height: $header-default-height-wide;
   @media (max-width: $breakpoint-md) {
-    max-height: 3rem;
+    max-height: $header-default-height-narrow;
   }
 }
 
@@ -16,7 +20,9 @@
 
   // On narrow screens, cap the height unless you click the hamburger menu
   @include max-height-header;
+  min-height: $header-default-height-wide;
   @media (max-width: $breakpoint-md) {
+    min-height: $header-default-height-narrow;
     transition: max-height $animation-time ease-out;
     overflow-y: hidden;
   }
@@ -24,18 +30,32 @@
   // Navigation links
   a,
   div.dropdown button {
-    color: $non-content-grey;
+    color: var(--theme-header-button-color);
 
     &:hover {
-      color: rgba(var(--pst-color-link), 1);
+      color: var(--theme-header-button-color-hover);
       text-decoration: none;
     }
   }
+
+  // Button component styling (won't apply to dropdowns)
+  button.btn-outline-primary {
+    color: rgba(var(--pst-color-primary), 1);
+    border-color: rgba(var(--pst-color-primary), 1);
+
+    &:hover {
+      color: white;
+      background-color: rgba(var(--pst-color-primary), 1);
+    }
+  }
 }
 
 // Header content should take up the whole remaining horizontal space
 .header__content {
+  display: flex;
   flex-grow: 1;
+  max-width: 1400px; // Bootstrap max-width for xl container, to match article
+  margin: 0 auto;
 }
 
 .header__content,
@@ -56,9 +76,6 @@
 .header__start {
   padding-left: 1rem;
 }
-.header__end {
-  padding-right: 1rem;
-}
 
 @media (max-width: $breakpoint-md) {
   // Only apply on narrow screens since we want it centered on sidebar on wide
@@ -76,7 +93,6 @@
     display: block;
     margin-top: 0.7em; // HACK: to make this vertically-centered w/o using flexbox
     margin-left: auto;
-    padding-right: 0; // Override headerbtn padding so header has same right/left pad
   }
 }
 
@@ -109,9 +125,14 @@ input#__header {
 }
 
 .header__end {
+  @media (max-width: $breakpoint-md) {
+    padding-bottom: 1rem;
+  }
+
   @media (min-width: $breakpoint-md) {
     // Header end is right-justified
     margin-left: auto;
+    padding-right: 1.5rem;
   }
 }
 
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
index 54551c50..82e0ef3d 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
@@ -4,8 +4,8 @@
 
 {%- if start_items or middle_items or end_items %}
 <input type="checkbox" class="header-toggle" name="__header" id="__header" aria-label="Toggle header">
-<div id="theme-header" class="container-xl header noprint">
-  <div class="row header__content">
+<div id="theme-header" class="header noprint">
+  <div class="header__content">
     <!-- If given, the brand will be the same width as sidebar -->
     {% if theme_header.get("brand") %}
     <div class="header__brand">

From 811349b3c4754739bcd225c1efa6b0742d6a543c Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Thu, 12 May 2022 10:36:38 +0200
Subject: [PATCH 04/17] Fixing dropdown unique id

---
 src/sphinx_book_theme/_components.py                     | 7 +++++--
 .../assets/styles/sections/_header-primary.scss          | 9 ++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/sphinx_book_theme/_components.py b/src/sphinx_book_theme/_components.py
index 163461bb..398f7784 100644
--- a/src/sphinx_book_theme/_components.py
+++ b/src/sphinx_book_theme/_components.py
@@ -8,6 +8,7 @@
 The remaining values in the user configuration are passed as kwargs to the func.
 """
 from sphinx.util import logging
+import hashlib
 
 SPHINX_LOGGER = logging.getLogger(__name__)
 
@@ -63,12 +64,14 @@ def component_dropdown(app, context, content="", items=[]):
         """
         dropdown_items.append(link)
     dropdown_items = "\n".join(dropdown_items)
+    dropdown_id = "menu-dropdown-"
+    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
     html = f"""
     <div class="dropdown">
-        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <button class="btn dropdown-toggle" type="button" id="{dropdown_id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {content}
         </button>
-        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <div class="dropdown-menu" aria-labelledby="{dropdown_id}">
             {dropdown_items}
         </div>
     </div>
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
index 863e7835..9376ff3d 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
@@ -72,17 +72,20 @@ $header-default-height-narrow: 3rem;
   }
 }
 
+.header__brand {
+  padding: 0 1.5rem;
+}
+
 // Ensure the header items don't touch the screen edge
 .header__start {
   padding-left: 1rem;
 }
 
 @media (max-width: $breakpoint-md) {
-  // Only apply on narrow screens since we want it centered on sidebar on wide
   .header__brand,
+  .header__start,
   .header__end {
-    padding-left: 1rem;
-    padding-right: 0;
+    padding-left: 0.5rem;
   }
 }
 

From df1e7d4f41579878883e184771f8d2ea2c60f5f7 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sat, 14 May 2022 21:51:55 +0200
Subject: [PATCH 05/17] More updates

---
 docs/{ => _data}/config-header.yml            |   8 +-
 docs/conf.py                                  |   2 +-
 docs/customize/header.md                      |   2 +-
 src/sphinx_book_theme/_components.py          | 177 ++++++++++++++----
 src/sphinx_book_theme/assets/scripts/index.js |   2 +-
 .../assets/styles/components/_buttons.scss    | 139 +++++---------
 .../assets/styles/index.scss                  |   2 +-
 .../styles/sections/_header-article.scss      |   1 +
 .../{_header-primary.scss => _header.scss}    |   7 +-
 .../header_buttons/__init__.py                |  60 +++---
 .../header_buttons/launch.py                  |  41 ++--
 .../sphinx_book_theme/macros/buttons.html     |  78 --------
 .../sections/header-article.html              |   7 +-
 .../sphinx_book_theme/sections/header.html    |  11 +-
 tests/test_build/build__header-article.html   |  32 ++--
 .../header__repo-buttons--all-off.html        |  10 +-
 .../header__repo-buttons--all-on.html         |  22 +--
 .../header__repo-buttons--custom-branch.html  |  16 +-
 .../header__repo-buttons--one-on.html         |  12 +-
 tests/test_build/test_header_launchbtns.html  |  20 +-
 tests/test_build/test_topbar_launchbtns.html  |  20 +-
 21 files changed, 330 insertions(+), 339 deletions(-)
 rename docs/{ => _data}/config-header.yml (99%)
 rename src/sphinx_book_theme/assets/styles/sections/{_header-primary.scss => _header.scss} (95%)
 delete mode 100644 src/sphinx_book_theme/theme/sphinx_book_theme/macros/buttons.html

diff --git a/docs/config-header.yml b/docs/_data/config-header.yml
similarity index 99%
rename from docs/config-header.yml
rename to docs/_data/config-header.yml
index 40a9c593..c4c1f514 100644
--- a/docs/config-header.yml
+++ b/docs/_data/config-header.yml
@@ -23,6 +23,11 @@ start:
     - content: Feature Voting
       url: https://executablebooks.org/en/latest/feature-vote.html
 
+  - type: button
+    content: Book gallery
+    url: http://gallery.jupyterbook.org/
+
+
 end:
   - type: icon-links
     icons:
@@ -35,6 +40,3 @@ end:
     - icon: fas fa-comments
       name: Forum
       url: https://github.com/orgs/executablebooks/discussions
-  - type: button
-    content: Book gallery
-    url: http://gallery.jupyterbook.org/
diff --git a/docs/conf.py b/docs/conf.py
index 4ecad5b0..bf99fb73 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -104,7 +104,7 @@
     "repository_branch": "master",
 }
 
-header_config = safe_load(Path("./config-header.yml").read_text())
+header_config = safe_load(Path("./_data/config-header.yml").read_text())
 
 html_theme_options = {
     "path_to_docs": "docs",
diff --git a/docs/customize/header.md b/docs/customize/header.md
index ef813dde..0d2a6fdc 100644
--- a/docs/customize/header.md
+++ b/docs/customize/header.md
@@ -23,7 +23,7 @@ For one example, see the header configuration of this documentation, in YAML for
 Below is YAML configuration for this theme's header.
 It is read by `conf.py` and converted into a Python dictionary at build time.
 
-```{literalinclude} ../config-header.yml
+```{literalinclude} ../_data/config-header.yml
 :language: yaml
 ```
 ````
diff --git a/src/sphinx_book_theme/_components.py b/src/sphinx_book_theme/_components.py
index 398f7784..adb69fc3 100644
--- a/src/sphinx_book_theme/_components.py
+++ b/src/sphinx_book_theme/_components.py
@@ -22,25 +22,161 @@ def component_text(app, context, content="", url="", classes=[]):
     return html
 
 
-def component_button(app, context, content="", url="", onclick="", classes=[]):
+def component_button(
+    app,
+    context,
+    content="",
+    title="",
+    icon="",
+    url="",
+    onclick="",
+    button_id="",
+    label_for="",
+    id="",
+    tooltip_placement="",
+    kwargs={},
+    classes=[],
+):
+    kwargs = kwargs.copy()
+    kwargs.update({"type": "button", "class": ["btn", "icon-button"]})
+    kwargs["class"].extend(classes)
+    btn_content = ""
     if url and onclick:
         raise Exception("Button component cannot have both url and onclick specified.")
-    classes = " ".join(classes)
+
+    if not (icon or content):
+        raise Exception("Button must have either icon or content specified.")
+
     if onclick:
-        onclick = ' onclick="{onclick}"'
+        kwargs["onclick"] = onclick
+
+    if id:
+        kwargs["id"] = id
+
+    if icon:
+        if icon.startswith("fa"):
+            icon = f'<i class="{icon}"></i>'
+        else:
+            if not icon.startswith("http"):
+                icon = context["pathto"](icon, 1)
+            icon = f'<img src="{icon}">'
+        btn_content += f'<span class="btn__icon-container">{icon}</span>'
+
+    if not content:
+        kwargs["class"].append("icon-button-no-content")
+    else:
+        btn_content += content
+
+    if button_id:
+        kwargs["id"] = button_id
+
+    kwargs["aria-label"] = title
+
+    # Handle tooltips
+    title = context["translate"](title)
+    tooltip_placement = "bottom" if not tooltip_placement else tooltip_placement
+
+    # If we're already using data-toggle, wrap the button content in a span.
+    # This lets us use another data-toggle.
+    if "data-toggle" in kwargs:
+        btn_content = f"""
+        <span data-toggle="tooltip" data-placement="{tooltip_placement}" title="{title}">
+            {btn_content}
+        </span>
+        """  # noqa
+    else:
+        kwargs["data-placement"] = tooltip_placement
+        kwargs["title"] = title
+
+    # Convert all the options for the button into a string of HTML kwargs
+    kwargs["class"] = " ".join(kwargs["class"])
+    kwargs_str = " ".join([f'{key}="{val}"' for key, val in kwargs.items()])
+
+    # Generate the button HTML
+    if label_for:
+        html = f"""
+        <label for="{label_for}" {kwargs_str}>
+            {btn_content}
+        </label>
+        """
+    else:
+        html = f"""
+        <button {kwargs_str}>
+            {btn_content}
+        </button>
+        """
 
-    classes = " ".join(classes)
-    html = f"""
-    <button class="btn btn-outline-primary {classes}"{onclick} type="button">
-        {content}
-    </button>
-    """
+    # Wrap the whole thing in a link if one is specified
     if url:
+        # If it doesn't look like a web URL, assume it's a local page
+        if not url.startswith("http"):
+            url = context["pathto"](url)
         html = f'<a href="{url}">{html}</a>'
 
     return html
 
 
+def component_dropdown(
+    app, context, content="", icon="", side="left", items=[], **kwargs
+):
+    # Items to go inside dropdown
+    dropdown_items = []
+    for component in items:
+        # Pop the `button` type in case it was incorrectly given, since we force button
+        if "type" in component:
+            component.pop("type")
+        dropdown_items.append(
+            component_button(
+                app,
+                context,
+                **component,
+            )
+        )
+    dropdown_items = "\n".join(dropdown_items)
+
+    # These control the look of the button
+    button_classes = []
+    if content:
+        button_classes.append("dropdown-toggle")
+
+    # Unique ID to trigger the show event
+    dropdown_id = "menu-dropdown-"
+    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
+
+    # Generate the button HTML
+    dropdown_kwargs = {
+        "data-toggle": "dropdown",
+        "aria-haspopup": "true",
+        "aria-expanded": "false",
+        "type": "button",
+    }
+    html_button = component_button(
+        app,
+        context,
+        content=content,
+        icon=icon,
+        kwargs=dropdown_kwargs,
+        classes=button_classes,
+        button_id=dropdown_id,
+        **kwargs,
+    )
+
+    dropdown_classes = ["dropdown-menu"]
+    if side == "right":
+        dropdown_classes.append("dropdown-menu-right")
+    dropdown_classes = " ".join(dropdown_classes)
+
+    html_dropdown = f"""
+    <div class="dropdown">
+        {html_button}
+        <div class="{dropdown_classes}" aria-labelledby="{dropdown_id}">
+            {dropdown_items}
+        </div>
+    </div>
+    """  # noqa
+    return html_dropdown
+
+
 def component_image(app, context, src="", url="", classes=[]):
     if not src.startswith("http"):
         src = context["pathto"](src, 1)
@@ -56,29 +192,6 @@ def component_html(app, context, html=""):
     return html
 
 
-def component_dropdown(app, context, content="", items=[]):
-    dropdown_items = []
-    for component in items:
-        link = f"""
-        <a href="{component['url']}" class="dropdown-item">{component['content']}</a>
-        """
-        dropdown_items.append(link)
-    dropdown_items = "\n".join(dropdown_items)
-    dropdown_id = "menu-dropdown-"
-    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
-    html = f"""
-    <div class="dropdown">
-        <button class="btn dropdown-toggle" type="button" id="{dropdown_id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            {content}
-        </button>
-        <div class="dropdown-menu" aria-labelledby="{dropdown_id}">
-            {dropdown_items}
-        </div>
-    </div>
-    """  # noqa
-    return html
-
-
 def component_icon_links(app, context, icons, classes=[]):
     context = {"theme_icon_links": icons}
     # Add the pydata theme icon-links macro as a function we can re-use
diff --git a/src/sphinx_book_theme/assets/scripts/index.js b/src/sphinx_book_theme/assets/scripts/index.js
index a5b2a594..187ca6bc 100644
--- a/src/sphinx_book_theme/assets/scripts/index.js
+++ b/src/sphinx_book_theme/assets/scripts/index.js
@@ -181,7 +181,7 @@ var initTooltips = () => {
   $(document).ready(function () {
     $('[data-toggle="tooltip"]').tooltip({
       trigger: "hover",
-      delay: { show: 500, hide: 100 },
+      delay: { show: 750, hide: 100 },
     });
   });
 };
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index 0c3d9120..5f54e592 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -1,119 +1,70 @@
 /*********************************************
 * Buttons, mostly for the headers            *
 *********************************************/
+
 /**
- * Basic button style
+ * In-page table of contents
  */
-.headerbtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+#header__page-toc-button {
+  // Hide the button on wide screens since we display the TOC.
+  display: block;
+  @media (min-width: $breakpoint-md) {
+    display: none;
+  }
+}
 
-  background-color: white;
-  color: $non-content-grey;
-  cursor: pointer;
-  border: none;
-  padding: 0.1rem 0.5rem; // Horizontal padding since labels have none
-  margin: 0 0.1rem;
+// TODO NEW RULES THAT I NEED TO INCORPORATE ABOVE and in other places
+// Used when there's a solo icon with no text, so make the icon a bit bigger
 
-  span {
-    display: flex;
-    align-items: center;
-  }
+div.dropdown-menu button.btn {
+  display: flex;
+  align-items: center;
+}
 
-  // Icons and image icons
-  img,
-  i {
-    margin: auto;
-    width: 1em;
-    text-align: center;
-    font-size: 1.5em; // Slightly larger for icons
+.icon-button {
+  padding: 0.2em 0.2em;
+  margin-bottom: 0;
+  color: var(--theme-header-button-color);
+
+  // Over-ride bootstrap defaults for clicking
+  &:hover,
+  &:focus {
+    color: var(--theme-header-button-color-hover);
+    box-shadow: none;
+    text-decoration: none;
   }
 }
 
-/**
- * Dropdown groups of buttons
- */
-.menu-dropdown__trigger:hover + .menu-dropdown__content,
-.menu-dropdown__content:hover {
-  visibility: visible;
-  opacity: 1;
+.icon-button-no-content {
+  font-size: 1.3rem;
 }
 
-.menu-dropdown__content {
-  // Hide by default, we'll show on click
-  position: absolute;
-  visibility: hidden;
-  opacity: 0;
-  transform: translateX(-75%);
-  transition: opacity 0.2s ease-out;
-
-  // Spacing and position
-  width: 10rem;
+.dropdown-menu {
+  // Copied from dropdown menu style above
   border-radius: $box-border-radius;
   box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
-  padding: 0.5em;
 
-  // Style
-  background-color: white;
-
-  .headerbtn {
-    justify-content: left;
-    padding: 0.1rem 0rem;
-  }
+  button {
+    padding-left: 0.5rem;
+    width: 100%;
+    border-radius: 0;
 
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin-bottom: 0;
-  }
-
-  span {
-    display: flex;
-
-    &.headerbtn__icon-container {
-      width: 2em;
-    }
-
-    &.headerbtn__text-container {
-      flex-grow: 1;
-      margin-left: 0.5em;
+    &:hover {
+      background-color: #eee;
     }
   }
-
-  i,
-  img {
-    font-size: 1.2em; // Slightly smaller icons in a dropdown
+  a:hover {
+    text-decoration: none;
   }
-}
 
-// HACK: Need this to be extra-selective to over-ride some too-specific PST CSS
-div.header-article-main {
-  .header-article__left,
-  .header-article__right {
-    a,
-    button,
-    label {
-      color: var(--theme-header-button-color);
+  span.btn__icon-container {
+    display: flex;
+    margin-right: 0.5rem;
 
-      // Over-ride bootstrap defaults for clicking
-      &:hover,
-      &:focus {
-        color: var(--theme-header-button-color-hover);
-        box-shadow: none;
-        text-decoration: none;
-      }
+    img,
+    i {
+      width: 1.2rem; // Slightly wider to make the font match the images
+      font-size: 1rem;
     }
   }
 }
-
-/**
- * In-page table of contents
- */
-.headerbtn-page-toc {
-  // Hide the button on wide screens since we display the TOC.
-  display: block;
-  @media (min-width: $breakpoint-md) {
-    display: none;
-  }
-}
diff --git a/src/sphinx_book_theme/assets/styles/index.scss b/src/sphinx_book_theme/assets/styles/index.scss
index 463bd851..fd29cbf6 100644
--- a/src/sphinx_book_theme/assets/styles/index.scss
+++ b/src/sphinx_book_theme/assets/styles/index.scss
@@ -20,9 +20,9 @@
 @import "sections/article";
 @import "sections/footer-article";
 @import "sections/footer-content";
+@import "sections/header";
 @import "sections/header-announcement";
 @import "sections/header-article";
-@import "sections/header-primary";
 @import "sections/sidebar-primary";
 @import "sections/sidebar-secondary";
 @import "sections/sidebars-toggle";
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
index f2b9f70a..dc763366 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
@@ -22,6 +22,7 @@
     .header-article__right {
       display: flex;
       align-items: center;
+      gap: 0.5rem;
     }
 
     .header-article__right {
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_header.scss
similarity index 95%
rename from src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
rename to src/sphinx_book_theme/assets/styles/sections/_header.scss
index 9376ff3d..3b3ad2f8 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header.scss
@@ -90,12 +90,13 @@ $header-default-height-narrow: 3rem;
 }
 
 // Only show up on narrow screens, and push to the far right
-.headerbtn.header-toggle-button {
+#header-toggle-button {
   display: none;
   @media (max-width: $breakpoint-md) {
     display: block;
-    margin-top: 0.7em; // HACK: to make this vertically-centered w/o using flexbox
-    margin-left: auto;
+    // HACK to keep it centered in a way that won't move when expanded
+    margin-top: 0.2rem;
+    margin-right: 0.5rem;
   }
 }
 
diff --git a/src/sphinx_book_theme/header_buttons/__init__.py b/src/sphinx_book_theme/header_buttons/__init__.py
index d272efc1..1a61c005 100644
--- a/src/sphinx_book_theme/header_buttons/__init__.py
+++ b/src/sphinx_book_theme/header_buttons/__init__.py
@@ -36,9 +36,9 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
     if _as_bool(opts.get("use_fullscreen_button", True)):
         header_buttons.append(
             {
-                "type": "javascript",
-                "javascript": "toggleFullScreen()",
-                "tooltip": "Fullscreen mode",
+                "type": "button",
+                "onclick": "toggleFullScreen()",
+                "title": "Fullscreen mode",
                 "icon": "fas fa-expand",
             }
         )
@@ -65,10 +65,10 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
         if opts.get("use_repository_button"):
             repo_buttons.append(
                 {
-                    "type": "link",
+                    "type": "button",
                     "url": repo_url,
-                    "tooltip": "Source repository",
-                    "text": "repository",
+                    "title": "Source repository",
+                    "content": "repository",
                     "icon": "fab fa-github",
                 }
             )
@@ -76,10 +76,10 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
         if opts.get("use_issues_button"):
             repo_buttons.append(
                 {
-                    "type": "link",
+                    "type": "button",
                     "url": f"{repo_url}/issues/new?title=Issue%20on%20page%20%2F{context['pagename']}.html&body=Your%20issue%20content%20here.",  # noqa: E501
-                    "text": "open issue",
-                    "tooltip": "Open an issue",
+                    "content": "open issue",
+                    "title": "Open an issue",
                     "icon": "fas fa-lightbulb",
                 }
             )
@@ -103,10 +103,10 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
 
             repo_buttons.append(
                 {
-                    "type": "link",
+                    "type": "button",
                     "url": context["get_edit_url"](),
-                    "tooltip": "Edit this page",
-                    "text": "suggest edit",
+                    "title": "Edit this page",
+                    "content": "suggest edit",
                     "icon": "fas fa-pencil-alt",
                 }
             )
@@ -117,11 +117,11 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
                 rb["tooltip_placement"] = "left"
             header_buttons.append(
                 {
-                    "type": "group",
-                    "tooltip": "Source repositories",
+                    "type": "dropdown",
+                    "title": "Source repositories",
                     "icon": "fab fa-github",
-                    "buttons": repo_buttons,
-                    "label": "repository-buttons",
+                    "items": repo_buttons,
+                    "side": "right",
                 }
             )
         elif len(repo_buttons) == 1:
@@ -137,31 +137,31 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
         if context.get("ipynb_source"):
             download_buttons.append(
                 {
-                    "type": "link",
+                    "type": "button",
                     "url": f'{pathto("_sources", 1)}/{context.get("ipynb_source")}',
-                    "text": ".ipynb",
+                    "content": ".ipynb",
                     "icon": "fas fa-code",
-                    "tooltip": "Download notebook file",
+                    "title": "Download notebook file",
                     "tooltip_placement": "left",
                 }
             )
 
         download_buttons.append(
             {
-                "type": "link",
+                "type": "button",
                 "url": f'{pathto("_sources", 1)}/{context["sourcename"]}',
-                "text": suff,
-                "tooltip": "Download source file",
+                "content": suff,
+                "title": "Download source file",
                 "tooltip_placement": "left",
                 "icon": "fas fa-file",
             }
         )
         download_buttons.append(
             {
-                "type": "javascript",
-                "javascript": "printPdf(this)",
-                "text": ".pdf",
-                "tooltip": "Print to PDF",
+                "type": "button",
+                "onclick": "printPdf(this)",
+                "content": ".pdf",
+                "title": "Print to PDF",
                 "tooltip_placement": "left",
                 "icon": "fas fa-file-pdf",
             }
@@ -170,10 +170,10 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
         # Add the group
         header_buttons.append(
             {
-                "type": "group",
-                "tooltip": "Download this page",
+                "type": "dropdown",
+                "title": "Download this page",
                 "icon": "fas fa-download",
-                "buttons": download_buttons,
-                "label": "download-buttons",
+                "items": download_buttons,
+                "side": "right",
             }
         )
diff --git a/src/sphinx_book_theme/header_buttons/launch.py b/src/sphinx_book_theme/header_buttons/launch.py
index c5b220b0..2a5dfada 100644
--- a/src/sphinx_book_theme/header_buttons/launch.py
+++ b/src/sphinx_book_theme/header_buttons/launch.py
@@ -110,9 +110,9 @@ def add_launch_buttons(
         )
         launch_buttons_list.append(
             {
-                "type": "link",
-                "text": "Binder",
-                "tooltip": "Launch on Binder",
+                "type": "button",
+                "content": "Binder",
+                "title": "Launch on Binder",
                 "icon": "_static/images/logo_binder.svg",
                 "url": url,
             }
@@ -128,9 +128,9 @@ def add_launch_buttons(
         url = f"{jupyterhub_url}/hub/user-redirect/git-pull?{url_params}"
         launch_buttons_list.append(
             {
-                "type": "link",
-                "text": "JupyterHub",
-                "tooltip": "Launch on JupyterHub",
+                "type": "button",
+                "content": "JupyterHub",
+                "title": "Launch on JupyterHub",
                 "icon": "_static/images/logo_jupyterhub.svg",
                 "url": url,
             }
@@ -140,9 +140,9 @@ def add_launch_buttons(
         url = f"{colab_url}/github/{org}/{repo}/blob/{branch}/{path_rel_repo}"
         launch_buttons_list.append(
             {
-                "type": "link",
-                "text": "Colab",
-                "tooltip": "Launch on Colab",
+                "type": "button",
+                "content": "Colab",
+                "title": "Launch on Colab",
                 "icon": "_static/images/logo_colab.png",
                 "url": url,
             }
@@ -153,9 +153,9 @@ def add_launch_buttons(
         url = f"{deepnote_url}/launch?url=https%3A%2F%2Fgithub.com{github_path}"
         launch_buttons_list.append(
             {
-                "type": "link",
-                "text": "Deepnote",
-                "tooltip": "Launch on Deepnote",
+                "type": "button",
+                "content": "Deepnote",
+                "title": "Launch on Deepnote",
                 "icon": "_static/images/logo_deepnote.svg",
                 "url": url,
             }
@@ -165,12 +165,11 @@ def add_launch_buttons(
     if launch_buttons.get("thebe", False):
         launch_buttons_list.append(
             {
-                "type": "javascript",
-                "text": "Live Code",
-                "tooltip": "Launch Thebe",
-                "javascript": "initThebeSBT()",
+                "type": "button",
+                "content": "Live Code",
+                "title": "Launch Thebe",
+                "onclick": "initThebeSBT()",
                 "icon": "fas fa-play",
-                "label": "launch-thebe",
             }
         )
         context["use_thebe"] = True
@@ -180,11 +179,11 @@ def add_launch_buttons(
         lb["tooltip_placement"] = "left"
     header_buttons.append(
         {
-            "type": "group",
-            "tooltip": "Launch interactive content",
+            "type": "dropdown",
+            "title": "Launch interactive content",
             "icon": "fas fa-rocket",
-            "buttons": launch_buttons_list,
-            "label": "launch-buttons",
+            "items": launch_buttons_list,
+            "side": "right",
         }
     )
 
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/macros/buttons.html b/src/sphinx_book_theme/theme/sphinx_book_theme/macros/buttons.html
deleted file mode 100644
index 729ab074..00000000
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/macros/buttons.html
+++ /dev/null
@@ -1,78 +0,0 @@
-{# Utility macros we'll re-use below -#}
-{% macro render_tooltip_metadata(tooltip, tooltip_placement) -%}
-data-toggle="tooltip"
-data-placement="{{ tooltip_placement }}"
-title="{{ translate(tooltip) }}"
-{%- endmacro %}
-
-
-{% macro render_inner_html(icon, text) %}
-{# used across multiple button types #}
-{% if icon -%}
-<span class="headerbtn__icon-container">
-  {% if icon.startswith("fa") -%}
-    <i class="{{ icon }}"></i>
-  {% else %}
-    <img src="{{ pathto(icon, 1) }}">
-  {% endif -%}
-</span>
-{% endif %}
-{%- if text %}<span class="headerbtn__text-container">{{ translate(text) }}</span>{% endif -%}
-{% endmacro %}
-
-
-{% macro render_link_button(url, tooltip=None, icon=None, text=None, label=None, tooltip_placement="bottom") -%}
-<a href="{{ url }}"
-   class="headerbtn{% if label %} headerbtn-{{ label }}{% endif %}"
-   {% if tooltip %}{{ render_tooltip_metadata(tooltip, tooltip_placement) }}{% endif %}
->
-  {{ render_inner_html(icon, text) }}
-</a>
-{% endmacro %}
-
-
-{% macro render_js_button(javascript, tooltip=None, icon=None, text=None, label=None, tooltip_placement="bottom") %}
-<button onclick="{{ javascript }}"
-  class="headerbtn{% if label %} headerbtn-{{ label }}{% endif %}"
-  {% if tooltip %}{{ render_tooltip_metadata(tooltip, tooltip_placement) }}{% endif %}
->
-  {{ render_inner_html(icon, text) }}
-</button>
-{% endmacro %}
-
-
-{% macro render_label_input_button(for_input, tooltip=None, icon=None, text=None, label=None, tooltip_placement="bottom") -%}
-<label for="{{ for_input }}"
-  class="headerbtn{% if label %} headerbtn-{{ label }}{% endif %}"
-  {% if tooltip %}{{ render_tooltip_metadata(tooltip, tooltip_placement) }}{% endif %}
->
-  {{ render_inner_html(icon, text) }}
-</label>
-{% endmacro %}
-
-
-{% macro render_button_group(buttons, icon, tooltip=None, label=None) %}
-<div class="menu-dropdown{% if label %} menu-dropdown-{{ label }}{% endif %}">
-  <button class="headerbtn menu-dropdown__trigger"
-      aria-label="{{ tooltip }}">
-      <i class="{{ icon }}"></i>
-  </button>
-  <div class="menu-dropdown__content">
-    <ul>
-      {%- for button in buttons %}
-      <li>
-        {{ render_funcs[button.pop("type")](**button) }}
-      </li>
-      {% endfor %}
-    </ul>
-  </div>
-</div>
-{% endmacro %}
-
-{%- set render_funcs = {
-  "group" : render_button_group,
-  "javascript" : render_js_button,
-  "link": render_link_button,
-  "input_label": render_label_input_button,
-}
--%}
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header-article.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header-article.html
index 318edb89..e67219df 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header-article.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header-article.html
@@ -1,20 +1,19 @@
 {# To trigger whether the TOC and its button show up #}
 {% set page_toc = generate_toc_html() %}
-{% from "../macros/buttons.html" import render_funcs, render_label_input_button with context %}
 
 <div class="col py-1 d-flex header-article-main">
     <div class="header-article__left">
         {% if theme_single_page != True %}
-        {{ render_label_input_button(for_input="__navigation", tooltip="Toggle navigation", icon="fas fa-bars", tooltip_placement="right") }}
+        {{ theme_render_component({"type": "button", "title": "Toggle navigation", "label_for": "__navigation", "icon": "fas fa-bars"}) }}
         {% endif %}
     </div>
     <div class="header-article__right">
         {%- for button in header_buttons -%}
-        {{ render_funcs[button.pop("type")](**button) }}
+        {{ theme_render_component(button) }}
         {%- endfor -%}
 
         {% if page_toc -%}
-        {{ render_label_input_button("__page-toc", icon="fas fa-list", label="page-toc") }}
+        {{ theme_render_component({"type": "button", "title": "Toggle page Table of Contents", "id": "header__page-toc-button", "label_for": "__page-toc", "icon": "fas fa-list"}) }}
         {%- endif %}
     </div>
 </div>
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
index 82e0ef3d..f026f000 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
@@ -34,10 +34,13 @@
     </div>
   </div>
   {# Dropdown button for mobile, will show on the right #}
-  <label class="header-toggle-button headerbtn" for="__header">
-    <div class="visually-hidden">{{ translate('Toggle Header') }}</div>
-    <i class="fas fa-bars"></i>
-  </label>
+  {{ theme_render_component({
+    "type": "button",
+    "label_for": "__header",
+    "icon": "fas fa-bars",
+    "title": "Toggle Header",
+    "id": "header-toggle-button"
+  }) }}
 </div>
 {% endif -%}
 
diff --git a/tests/test_build/build__header-article.html b/tests/test_build/build__header-article.html
index 74bc3326..fd19d29d 100644
--- a/tests/test_build/build__header-article.html
+++ b/tests/test_build/build__header-article.html
@@ -2,7 +2,7 @@
  <div class="col py-1 d-flex header-article-main">
   <div class="header-article__left">
    <label class="headerbtn" data-placement="right" data-toggle="tooltip" for="__navigation" title="Toggle navigation">
-    <span class="headerbtn__icon-container">
+    <span class="btn__icon-container">
      <i class="fas fa-bars">
      </i>
     </span>
@@ -18,51 +18,51 @@
      <ul>
       <li>
        <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" title="Launch on Binder">
-        <span class="headerbtn__icon-container">
+        <span class="btn__icon-container">
          <img src="../_static/images/logo_binder.svg"/>
         </span>
-        <span class="headerbtn__text-container">
+        <span class="btn__text-container">
          Binder
         </span>
        </a>
       </li>
       <li>
        <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" title="Launch on JupyterHub">
-        <span class="headerbtn__icon-container">
+        <span class="btn__icon-container">
          <img src="../_static/images/logo_jupyterhub.svg"/>
         </span>
-        <span class="headerbtn__text-container">
+        <span class="btn__text-container">
          JupyterHub
         </span>
        </a>
       </li>
       <li>
        <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" title="Launch on Colab">
-        <span class="headerbtn__icon-container">
+        <span class="btn__icon-container">
          <img src="../_static/images/logo_colab.png"/>
         </span>
-        <span class="headerbtn__text-container">
+        <span class="btn__text-container">
          Colab
         </span>
        </a>
       </li>
       <li>
        <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" title="Launch on Deepnote">
-        <span class="headerbtn__icon-container">
+        <span class="btn__icon-container">
          <img src="../_static/images/logo_deepnote.svg"/>
         </span>
-        <span class="headerbtn__text-container">
+        <span class="btn__text-container">
          Deepnote
         </span>
        </a>
       </li>
       <li>
        <button class="headerbtn headerbtn-launch-thebe" data-placement="left" data-toggle="tooltip" onclick="initThebeSBT()" title="Launch Thebe">
-        <span class="headerbtn__icon-container">
+        <span class="btn__icon-container">
          <i class="fas fa-play">
          </i>
         </span>
-        <span class="headerbtn__text-container">
+        <span class="btn__text-container">
          Live Code
         </span>
        </button>
@@ -71,7 +71,7 @@
     </div>
    </div>
    <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
-    <span class="headerbtn__icon-container">
+    <span class="btn__icon-container">
      <i class="fas fa-expand">
      </i>
     </span>
@@ -85,22 +85,22 @@
      <ul>
       <li>
        <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-        <span class="headerbtn__icon-container">
+        <span class="btn__icon-container">
          <i class="fas fa-file">
          </i>
         </span>
-        <span class="headerbtn__text-container">
+        <span class="btn__text-container">
          .ipynb
         </span>
        </a>
       </li>
       <li>
        <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-        <span class="headerbtn__icon-container">
+        <span class="btn__icon-container">
          <i class="fas fa-file-pdf">
          </i>
         </span>
-        <span class="headerbtn__text-container">
+        <span class="btn__text-container">
          .pdf
         </span>
        </button>
diff --git a/tests/test_build/header__repo-buttons--all-off.html b/tests/test_build/header__repo-buttons--all-off.html
index 0d1f51e2..8a31bf57 100644
--- a/tests/test_build/header__repo-buttons--all-off.html
+++ b/tests/test_build/header__repo-buttons--all-off.html
@@ -1,6 +1,6 @@
 <div class="header-article__right">
  <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
-  <span class="headerbtn__icon-container">
+  <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
@@ -14,22 +14,22 @@
    <ul>
     <li>
      <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-file">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        .ipynb
       </span>
      </a>
     </li>
     <li>
      <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-file-pdf">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        .pdf
       </span>
      </button>
diff --git a/tests/test_build/header__repo-buttons--all-on.html b/tests/test_build/header__repo-buttons--all-on.html
index 2dbc8d5d..5c64b3a8 100644
--- a/tests/test_build/header__repo-buttons--all-on.html
+++ b/tests/test_build/header__repo-buttons--all-on.html
@@ -1,6 +1,6 @@
 <div class="header-article__right">
  <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
-  <span class="headerbtn__icon-container">
+  <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
@@ -14,33 +14,33 @@
    <ul>
     <li>
      <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme" title="Source repository">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fab fa-github">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        repository
       </span>
      </a>
     </li>
     <li>
      <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme/issues/new?title=Issue%20on%20page%20%2Fsection1/ntbk.html&amp;body=Your%20issue%20content%20here." title="Open an issue">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-lightbulb">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        open issue
       </span>
      </a>
     </li>
     <li>
      <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme/edit/master/section1/ntbk.ipynb" title="Edit this page">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-pencil-alt">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        suggest edit
       </span>
      </a>
@@ -57,22 +57,22 @@
    <ul>
     <li>
      <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-file">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        .ipynb
       </span>
      </a>
     </li>
     <li>
      <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-file-pdf">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        .pdf
       </span>
      </button>
diff --git a/tests/test_build/header__repo-buttons--custom-branch.html b/tests/test_build/header__repo-buttons--custom-branch.html
index 1a4f37c5..93f07b58 100644
--- a/tests/test_build/header__repo-buttons--custom-branch.html
+++ b/tests/test_build/header__repo-buttons--custom-branch.html
@@ -8,10 +8,10 @@
    <ul>
     <li>
      <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/foo?urlpath=tree/section1/ntbk.ipynb" title="Launch on Binder">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <img src="../_static/images/logo_binder.svg"/>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        Binder
       </span>
      </a>
@@ -20,13 +20,13 @@
   </div>
  </div>
  <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
-  <span class="headerbtn__icon-container">
+  <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
  <a class="headerbtn" data-placement="bottom" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme/edit/foo/section1/ntbk.ipynb" title="Edit this page">
-  <span class="headerbtn__icon-container">
+  <span class="btn__icon-container">
    <i class="fas fa-pencil-alt">
    </i>
   </span>
@@ -40,22 +40,22 @@
    <ul>
     <li>
      <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-file">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        .ipynb
       </span>
      </a>
     </li>
     <li>
      <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-file-pdf">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        .pdf
       </span>
      </button>
diff --git a/tests/test_build/header__repo-buttons--one-on.html b/tests/test_build/header__repo-buttons--one-on.html
index 63c3c4c8..b5f8eb4e 100644
--- a/tests/test_build/header__repo-buttons--one-on.html
+++ b/tests/test_build/header__repo-buttons--one-on.html
@@ -1,12 +1,12 @@
 <div class="header-article__right">
  <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
-  <span class="headerbtn__icon-container">
+  <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
  <a class="headerbtn" data-placement="bottom" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme/edit/master/section1/ntbk.ipynb" title="Edit this page">
-  <span class="headerbtn__icon-container">
+  <span class="btn__icon-container">
    <i class="fas fa-pencil-alt">
    </i>
   </span>
@@ -20,22 +20,22 @@
    <ul>
     <li>
      <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-file">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        .ipynb
       </span>
      </a>
     </li>
     <li>
      <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-      <span class="headerbtn__icon-container">
+      <span class="btn__icon-container">
        <i class="fas fa-file-pdf">
        </i>
       </span>
-      <span class="headerbtn__text-container">
+      <span class="btn__text-container">
        .pdf
       </span>
      </button>
diff --git a/tests/test_build/test_header_launchbtns.html b/tests/test_build/test_header_launchbtns.html
index 6ab4a501..2c356c99 100644
--- a/tests/test_build/test_header_launchbtns.html
+++ b/tests/test_build/test_header_launchbtns.html
@@ -7,51 +7,51 @@
   <ul>
    <li>
     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" title="Launch on Binder">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <img src="../_static/images/logo_binder.svg"/>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       Binder
      </span>
     </a>
    </li>
    <li>
     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" title="Launch on JupyterHub">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <img src="../_static/images/logo_jupyterhub.svg"/>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       JupyterHub
      </span>
     </a>
    </li>
    <li>
     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" title="Launch on Colab">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <img src="../_static/images/logo_colab.png"/>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       Colab
      </span>
     </a>
    </li>
    <li>
     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" title="Launch on Deepnote">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <img src="../_static/images/logo_deepnote.svg"/>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       Deepnote
      </span>
     </a>
    </li>
    <li>
     <button class="headerbtn headerbtn-launch-thebe" data-placement="left" data-toggle="tooltip" onclick="initThebeSBT()" title="Launch Thebe">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <i class="fas fa-play">
       </i>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       Live Code
      </span>
     </button>
diff --git a/tests/test_build/test_topbar_launchbtns.html b/tests/test_build/test_topbar_launchbtns.html
index 6ab4a501..2c356c99 100644
--- a/tests/test_build/test_topbar_launchbtns.html
+++ b/tests/test_build/test_topbar_launchbtns.html
@@ -7,51 +7,51 @@
   <ul>
    <li>
     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" title="Launch on Binder">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <img src="../_static/images/logo_binder.svg"/>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       Binder
      </span>
     </a>
    </li>
    <li>
     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" title="Launch on JupyterHub">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <img src="../_static/images/logo_jupyterhub.svg"/>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       JupyterHub
      </span>
     </a>
    </li>
    <li>
     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" title="Launch on Colab">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <img src="../_static/images/logo_colab.png"/>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       Colab
      </span>
     </a>
    </li>
    <li>
     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" title="Launch on Deepnote">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <img src="../_static/images/logo_deepnote.svg"/>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       Deepnote
      </span>
     </a>
    </li>
    <li>
     <button class="headerbtn headerbtn-launch-thebe" data-placement="left" data-toggle="tooltip" onclick="initThebeSBT()" title="Launch Thebe">
-     <span class="headerbtn__icon-container">
+     <span class="btn__icon-container">
       <i class="fas fa-play">
       </i>
      </span>
-     <span class="headerbtn__text-container">
+     <span class="btn__text-container">
       Live Code
      </span>
     </button>

From e0846ba66713ca6909508c5b70fce21fa4e5fc76 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Mon, 16 May 2022 15:29:36 +0200
Subject: [PATCH 06/17] More image updates

---
 docs/_data/config-header.yml         |   8 +-
 docs/customize/header.md             |   4 +-
 src/sphinx_book_theme/_components.py | 205 +++++++++++++++------------
 3 files changed, 119 insertions(+), 98 deletions(-)

diff --git a/docs/_data/config-header.yml b/docs/_data/config-header.yml
index c4c1f514..6666e32f 100644
--- a/docs/_data/config-header.yml
+++ b/docs/_data/config-header.yml
@@ -1,6 +1,6 @@
 brand:
-  type: image
-  src: https://executablebooks.org/en/latest/_static/logo.svg
+  type: link
+  image: https://executablebooks.org/en/latest/_static/logo.svg
   url: https://sphinx-book-theme.readthedocs.io
 start:
   - type: dropdown
@@ -23,8 +23,10 @@ start:
     - content: Feature Voting
       url: https://executablebooks.org/en/latest/feature-vote.html
 
-  - type: button
+  - type: link
     content: Book gallery
+    external: true
+    newwindow: true
     url: http://gallery.jupyterbook.org/
 
 
diff --git a/docs/customize/header.md b/docs/customize/header.md
index 0d2a6fdc..45d670c7 100644
--- a/docs/customize/header.md
+++ b/docs/customize/header.md
@@ -67,9 +67,9 @@ html_theme_options = {
   "header": {
     "brand": {
       # Specifies that the brand area will use an image logo
-      "type": "image",
+      "type": "link",
       # Source of the image to be used
-      "src": "https://executablebooks.org/en/latest/_static/logo.svg",
+      "image": "https://executablebooks.org/en/latest/_static/logo.svg",
       # Link for the image
       "url": "https://sphinx-book-theme.readthedocs.io",
     },
diff --git a/src/sphinx_book_theme/_components.py b/src/sphinx_book_theme/_components.py
index adb69fc3..785e37bd 100644
--- a/src/sphinx_book_theme/_components.py
+++ b/src/sphinx_book_theme/_components.py
@@ -14,20 +14,115 @@
 
 
 # Add functions to render header components
-def component_text(app, context, content="", url="", classes=[]):
-    classes = " ".join(classes)
-    html = f"<span class='component-text {classes}'>{content}</span>"
-    if url:
-        html = f'<a href="{url}" class="link-primary">{html}</a>'
+def component_link(
+    app,
+    context,
+    content="",
+    icon="",
+    image="",
+    doc="",
+    url="",
+    newwindow=False,
+    external=False,
+    classes=[],
+):
+    kwargs = {"class": classes.copy()}
+    if external is True:
+        kwargs["target"] = "_blank"
+    if newwindow is True:
+        classes.append("external-link")
+
+    html = component_button(
+        app,
+        context,
+        content=content,
+        icon=icon,
+        image=image,
+        classes=classes,
+        url=url,
+        kwargs=kwargs,
+    )
+    return html
+
+
+def component_dropdown(
+    app, context, content="", icon="", side="left", items=[], **kwargs
+):
+    # Items to go inside dropdown
+    dropdown_items = []
+    for component in items:
+        # Pop the `button` type in case it was incorrectly given, since we force button
+        if "type" in component:
+            component.pop("type")
+        dropdown_items.append(
+            component_button(
+                app,
+                context,
+                **component,
+            )
+        )
+    dropdown_items = "\n".join(dropdown_items)
+
+    # These control the look of the button
+    button_classes = []
+    if content:
+        button_classes.append("dropdown-toggle")
+
+    # Unique ID to trigger the show event
+    dropdown_id = "menu-dropdown-"
+    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
+
+    # Generate the button HTML
+    dropdown_kwargs = {
+        "data-toggle": "dropdown",
+        "aria-haspopup": "true",
+        "aria-expanded": "false",
+        "type": "button",
+    }
+    html_button = component_button(
+        app,
+        context,
+        content=content,
+        icon=icon,
+        kwargs=dropdown_kwargs,
+        classes=button_classes,
+        button_id=dropdown_id,
+        **kwargs,
+    )
+
+    dropdown_classes = ["dropdown-menu"]
+    if side == "right":
+        dropdown_classes.append("dropdown-menu-right")
+    dropdown_classes = " ".join(dropdown_classes)
+
+    html_dropdown = f"""
+    <div class="dropdown">
+        {html_button}
+        <div class="{dropdown_classes}" aria-labelledby="{dropdown_id}">
+            {dropdown_items}
+        </div>
+    </div>
+    """  # noqa
+    return html_dropdown
+
+
+def component_html(app, context, html=""):
     return html
 
 
+def component_icon_links(app, context, icons, classes=[]):
+    context = {"theme_icon_links": icons}
+    # Add the pydata theme icon-links macro as a function we can re-use
+    return app.builder.templates.render("icon-links.html", context)
+
+
 def component_button(
     app,
     context,
     content="",
     title="",
     icon="",
+    image="",
     url="",
     onclick="",
     button_id="",
@@ -39,13 +134,13 @@ def component_button(
 ):
     kwargs = kwargs.copy()
     kwargs.update({"type": "button", "class": ["btn", "icon-button"]})
-    kwargs["class"].extend(classes)
+    kwargs["class"].extend(classes.copy())
     btn_content = ""
     if url and onclick:
         raise Exception("Button component cannot have both url and onclick specified.")
 
-    if not (icon or content):
-        raise Exception("Button must have either icon or content specified.")
+    if not (icon or content or image):
+        raise Exception("Button must have either icon, content, or image specified.")
 
     if onclick:
         kwargs["onclick"] = onclick
@@ -62,6 +157,13 @@ def component_button(
             icon = f'<img src="{icon}">'
         btn_content += f'<span class="btn__icon-container">{icon}</span>'
 
+    if image:
+        if not image.startswith("http"):
+            image = context["pathto"](image, 1)
+        btn_content += f"""
+        <span class="btn__image-container"><img src="{image}" /></span>
+        """
+
     if not content:
         kwargs["class"].append("icon-button-no-content")
     else:
@@ -116,93 +218,10 @@ def component_button(
     return html
 
 
-def component_dropdown(
-    app, context, content="", icon="", side="left", items=[], **kwargs
-):
-    # Items to go inside dropdown
-    dropdown_items = []
-    for component in items:
-        # Pop the `button` type in case it was incorrectly given, since we force button
-        if "type" in component:
-            component.pop("type")
-        dropdown_items.append(
-            component_button(
-                app,
-                context,
-                **component,
-            )
-        )
-    dropdown_items = "\n".join(dropdown_items)
-
-    # These control the look of the button
-    button_classes = []
-    if content:
-        button_classes.append("dropdown-toggle")
-
-    # Unique ID to trigger the show event
-    dropdown_id = "menu-dropdown-"
-    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
-
-    # Generate the button HTML
-    dropdown_kwargs = {
-        "data-toggle": "dropdown",
-        "aria-haspopup": "true",
-        "aria-expanded": "false",
-        "type": "button",
-    }
-    html_button = component_button(
-        app,
-        context,
-        content=content,
-        icon=icon,
-        kwargs=dropdown_kwargs,
-        classes=button_classes,
-        button_id=dropdown_id,
-        **kwargs,
-    )
-
-    dropdown_classes = ["dropdown-menu"]
-    if side == "right":
-        dropdown_classes.append("dropdown-menu-right")
-    dropdown_classes = " ".join(dropdown_classes)
-
-    html_dropdown = f"""
-    <div class="dropdown">
-        {html_button}
-        <div class="{dropdown_classes}" aria-labelledby="{dropdown_id}">
-            {dropdown_items}
-        </div>
-    </div>
-    """  # noqa
-    return html_dropdown
-
-
-def component_image(app, context, src="", url="", classes=[]):
-    if not src.startswith("http"):
-        src = context["pathto"](src, 1)
-    html = f"""
-    <img src={src}>
-    """
-    if url:
-        html = f"<a href={url}>{html}</a>"
-    return html
-
-
-def component_html(app, context, html=""):
-    return html
-
-
-def component_icon_links(app, context, icons, classes=[]):
-    context = {"theme_icon_links": icons}
-    # Add the pydata theme icon-links macro as a function we can re-use
-    return app.builder.templates.render("icon-links.html", context)
-
-
 COMPONENT_FUNCS = {
-    "text": component_text,
+    "link": component_link,
     "button": component_button,
-    "html": component_html,
-    "image": component_image,
     "icon-links": component_icon_links,
     "dropdown": component_dropdown,
+    "html": component_html,
 }

From 44cd965e33f54fc5b6cf7e0d4650fab7f66e5e87 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Mon, 16 May 2022 20:38:50 +0200
Subject: [PATCH 07/17] Fixing script

---
 src/sphinx_book_theme/assets/scripts/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sphinx_book_theme/assets/scripts/index.js b/src/sphinx_book_theme/assets/scripts/index.js
index 187ca6bc..794cb936 100644
--- a/src/sphinx_book_theme/assets/scripts/index.js
+++ b/src/sphinx_book_theme/assets/scripts/index.js
@@ -56,7 +56,7 @@ var toggleFullScreen = () => {
  * the screen.
  */
 var scrollToActive = () => {
-  var navbar = document.getElementById("site-navigation");
+  var navbar = document.querySelector("#site-navigation .bd-sidebar__content");
   var active_pages = navbar.querySelectorAll(".active");
   var active_page = active_pages[active_pages.length - 1];
   // Only scroll the navbar if the active link is lower than 50% of the page

From 1ce96e74b90ea498f95ef4d422dda71e431f4610 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Tue, 17 May 2022 10:05:42 +0200
Subject: [PATCH 08/17] Updates

---
 docs/_data/config-header.yml                  |  25 +-
 docs/customize/header.md                      | 172 +++++++------
 src/sphinx_book_theme/_components.py          | 226 ++++++++----------
 .../assets/styles/sections/_header.scss       |  61 +++--
 .../theme/sphinx_book_theme/layout.html       |  12 +-
 .../sphinx_book_theme/sections/header.html    |  61 +++--
 6 files changed, 283 insertions(+), 274 deletions(-)

diff --git a/docs/_data/config-header.yml b/docs/_data/config-header.yml
index 6666e32f..0a3b9432 100644
--- a/docs/_data/config-header.yml
+++ b/docs/_data/config-header.yml
@@ -1,5 +1,5 @@
 brand:
-  type: link
+  type: button
   image: https://executablebooks.org/en/latest/_static/logo.svg
   url: https://sphinx-book-theme.readthedocs.io
 start:
@@ -23,22 +23,23 @@ start:
     - content: Feature Voting
       url: https://executablebooks.org/en/latest/feature-vote.html
 
-  - type: link
+  - type: button
     content: Book gallery
-    external: true
-    newwindow: true
     url: http://gallery.jupyterbook.org/
 
 
 end:
-  - type: icon-links
-    icons:
-    - icon: fab fa-twitter-square
-      name: Twitter
+  - type: group
+    items:
+    - type: button
+      icon: fab fa-twitter-square
+      title: Twitter
       url: https://twitter.com/executablebooks
-    - icon: fab fa-github-square
-      name: GitHub
+    - type: button
+      icon: fab fa-github-square
+      title: GitHub
       url: https://github.com/executablebooks
-    - icon: fas fa-comments
-      name: Forum
+    - type: button
+      icon: fas fa-comments
+      title: Forum
       url: https://github.com/orgs/executablebooks/discussions
diff --git a/docs/customize/header.md b/docs/customize/header.md
index 45d670c7..7dde68a7 100644
--- a/docs/customize/header.md
+++ b/docs/customize/header.md
@@ -161,26 +161,101 @@ html_theme_options = {
 
 The rest of these sections describe the components you can use:
 
-### Link and text components
+### Buttons
+
+Buttons are flexible UI components that trigger various actions when clicked.
+They can be links, or they can trigger arbitrary JavaScript that you provide.
+Use them as call-to-action items, or as a way to trigger events on your page if you are using custom JavaScript.
+
+Clicking a button can trigger one of two actions:
+
+- **Link to an internal or external page**
+- **Trigger a JavaScript function**
+
+Buttons have three visual sections that you may control, that roughly follow this structure:
+
+```html
+<button>
+  <button-icon><button-image><button-content>
+</button>
+```
+
+- **`icon`**: A small, square icon. May be configured with **FontAwesome** icons or a path to an image (local or remove).
+- **`image`**: A larger image that may be rectangular. May be configured with **FontAwesome** icons or a path to an image (local or remove).
+- **`content`**: Arbitrary text (or extra HTML) to put inside the button.
 
-To add text and link components to header sections, use the following component configuration:
+To add buttons components to header sections, use the following component configuration:
 
 ```python
 
 # Provided as a list item to `start:` or `end:`
 {
-  # Specifies a `text` component
-  "type": "text",
-  # The URL to which the link points
-  "url": "https://jupyterbook.org",
-  # The text to be displayed
-  "content": "Jupyter Book",
+  # Specifies the `button` component
+  "type": "button",
+
+  ## Controls button behavior ##
+  # If provided, the button will be a link to another page.
+  "url": "https://google.com",
+  # If provided, clicking the button will trigger this JavaScript.
+  "onclick": "SomeFunction()",
+
+  ## Controls button style ##
+  # An icon that will be displayed before the text
+  # Can be a set of fontawesome classes, or a path to an image
+  "icon": "fas fa-bars",
+  # An image path that will be displayed before the text
+  "image": "https://executablebooks.org/en/latest/_static/logo.svg",
+  # The text that will be displayed inside the button.
+  "content": "My button's text",
   # An optional list of classes to add
   "classes": ["one", "two"]
-},
+}
 ```
 
-To add text without a link, simply omit the `url:` parameter.
+Note tha **url** and **onclick** cannot both be provided in the same button's configuration.
+
+#### Button icons
+
+There are two kinds of icons you can control with the `icon` parameter:
+
+- **FontAwesome icons**: FontAwesome icon classes like `fas fa-arrow-right`. See [the FontAwesome documentation](https://fontawesome.com/icons) for a list of classes and icons. For example:
+
+  ```python
+  # Provided as a list item to `start:` or `end:`
+  {
+    # Specifies the `button` component
+    "type": "button",
+    "icon": "fab fa-github"
+    "url": "https://github.com"
+  }
+  ```
+- **A path to an image**: Any local image you include with your documentation.
+
+  For example, with a remote image:
+
+  ```python
+  # Provided as a list item to `start:` or `end:`
+  {
+    # Specifies the `button` component
+    "type": "button",
+    "image": "https://executablebooks.org/en/latest/_static/logo.svg"
+    "url": "https://executablebooks.org"
+  }
+  ```
+
+  With a local image:
+
+  ```python
+  # Provided as a list item to `start:` or `end:`
+  {
+    # Specifies the `button` component
+    "type": "button",
+    "image": "./_static/myimage.png"
+    "url": "https://executablebooks.org"
+  }
+  ```
+
+Finally, if a button is configured **only with an icon**, it will have a special class `icon-button` added to it that will make it contract slightly in size and spacing.
 
 ### Dropdown menus
 
@@ -196,7 +271,7 @@ To add dropdown components to header sections, use the following component confi
   "type": "dropdown",
   # Text to be displayed on the button
   "content": "EBP Projects",
-  # A list of dropdown links. Each defines a content string and a url
+  # A list of dropdown links. Each is a configuration for a button.
   "items": [
     {
       "url": "https://executablebooks.org",
@@ -212,79 +287,38 @@ To add dropdown components to header sections, use the following component confi
 },
 ```
 
-### Icon links
+### Groups
 
-You can add a list of icon links to your header that link to external sites and services.
-These are often used to link to social media accoutns like GitHub, Twitter, discussion forums, etc.
-They will be displayed horizontally whether on wide or narrow screens.
+Groups are a way of telling the theme that several UI components should be grouped together.
+They will have a wrapping container, will have less spacing between them, and will be displayed _horizontally_ on narrow screens.
 
-There are two kinds of icons you can control with `icon-links`:
-
-- **FontAwesome icons**: FontAwesome icon classes like `fas fa-arrow-right`. See [the FontAwesome documentation](https://fontawesome.com/icons) for a list of classes and icons.
-- **A path to an image**: Any local image you include with your documentation.
-
-To add icon link components to header sections, use the following component configuration:
+For example, to group several icon buttons together use a configuration like so:
 
 ```python
 # Provided as a list item to `start:` or `end:`
 {
-  # Specifies the `icon-links` component
-  "type": "icon-links",
-  # A list of icon links to include
-  "icons": [
-    # Configuration for icon one uses FontAwesome
+  # Specifies a `group` type
+  "type": "group",
+  # A list of group items. Each is a configuration for a button.
+  "items": [
     {
-        # Specifies that this icon is a FontAwesome icon
-        "type": "fontawesome",
-        # A url for icon one
-        "url": "https://twitter.com/executablebooks",
-        # A tooltip for icon one
-        "name": "Twitter",
-        # A FontAwesome icon class
-        "icon": "fab fa-twitter-square",
+      "icon": "fab fa-github",
+      "url": "https://github.com
     },
-    # Configuration for icon two uses a local image path
     {
-        # Specifies that this icon is a local image
-        "type": "local",
-        # A url for icon two
-        "url": "https://github.com/orgs/executablebooks/discussions",
-        # A tooltip for icon two
-        "name": "Discussions image",
-        # A path to a local image relative to conf.py
-        "icon": "./path/to/image.png",
+      "icon": "fab fa-twitter",
+      "url": "https://twitter.com
+    },
+    {
+      "icon": "fab fa-discourse",
+      "url": "https://discourse.com
     },
   ],
-},
-```
-
-### Buttons
-
-Buttons are larger and more visually-noticeable.
-They can either be links, or they can trigger arbitrary JavaScript that you provide.
-Use them as call-to-action items, or as a way to trigger events on your page if you are using custom JavaScript.
-
-To add buttons components to header sections, use the following component configuration:
-
-```python
-
-# Provided as a list item to `start:` or `end:`
-{
-  # Specifies the `button` component
-  "type": "button",
-  # The text that will be displayed inside the button.
-  "content": "end",
-  # If provided, the button will be a link to another page.
-  "url": "https://google.com",
-  # If provided, clicking the button will trigger this JavaScript.
-  "onclick": "SomeFunction()",
   # An optional list of classes to add
   "classes": ["one", "two"]
-}
+},
 ```
 
-Note tha **url** and **onclick** cannot both be provided in the same button's configuration.
-
 ### HTML Snippets
 
 You may provide custom HTML snippets that are inserted into the header as-is.
diff --git a/src/sphinx_book_theme/_components.py b/src/sphinx_book_theme/_components.py
index 785e37bd..b6726917 100644
--- a/src/sphinx_book_theme/_components.py
+++ b/src/sphinx_book_theme/_components.py
@@ -13,109 +13,6 @@
 SPHINX_LOGGER = logging.getLogger(__name__)
 
 
-# Add functions to render header components
-def component_link(
-    app,
-    context,
-    content="",
-    icon="",
-    image="",
-    doc="",
-    url="",
-    newwindow=False,
-    external=False,
-    classes=[],
-):
-    kwargs = {"class": classes.copy()}
-    if external is True:
-        kwargs["target"] = "_blank"
-    if newwindow is True:
-        classes.append("external-link")
-
-    html = component_button(
-        app,
-        context,
-        content=content,
-        icon=icon,
-        image=image,
-        classes=classes,
-        url=url,
-        kwargs=kwargs,
-    )
-    return html
-
-
-def component_dropdown(
-    app, context, content="", icon="", side="left", items=[], **kwargs
-):
-    # Items to go inside dropdown
-    dropdown_items = []
-    for component in items:
-        # Pop the `button` type in case it was incorrectly given, since we force button
-        if "type" in component:
-            component.pop("type")
-        dropdown_items.append(
-            component_button(
-                app,
-                context,
-                **component,
-            )
-        )
-    dropdown_items = "\n".join(dropdown_items)
-
-    # These control the look of the button
-    button_classes = []
-    if content:
-        button_classes.append("dropdown-toggle")
-
-    # Unique ID to trigger the show event
-    dropdown_id = "menu-dropdown-"
-    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
-
-    # Generate the button HTML
-    dropdown_kwargs = {
-        "data-toggle": "dropdown",
-        "aria-haspopup": "true",
-        "aria-expanded": "false",
-        "type": "button",
-    }
-    html_button = component_button(
-        app,
-        context,
-        content=content,
-        icon=icon,
-        kwargs=dropdown_kwargs,
-        classes=button_classes,
-        button_id=dropdown_id,
-        **kwargs,
-    )
-
-    dropdown_classes = ["dropdown-menu"]
-    if side == "right":
-        dropdown_classes.append("dropdown-menu-right")
-    dropdown_classes = " ".join(dropdown_classes)
-
-    html_dropdown = f"""
-    <div class="dropdown">
-        {html_button}
-        <div class="{dropdown_classes}" aria-labelledby="{dropdown_id}">
-            {dropdown_items}
-        </div>
-    </div>
-    """  # noqa
-    return html_dropdown
-
-
-def component_html(app, context, html=""):
-    return html
-
-
-def component_icon_links(app, context, icons, classes=[]):
-    context = {"theme_icon_links": icons}
-    # Add the pydata theme icon-links macro as a function we can re-use
-    return app.builder.templates.render("icon-links.html", context)
-
-
 def component_button(
     app,
     context,
@@ -129,12 +26,12 @@ def component_button(
     label_for="",
     id="",
     tooltip_placement="",
-    kwargs={},
+    attributes={},
     classes=[],
 ):
-    kwargs = kwargs.copy()
-    kwargs.update({"type": "button", "class": ["btn", "icon-button"]})
-    kwargs["class"].extend(classes.copy())
+    attributes = attributes.copy()
+    attributes.update({"type": "button", "class": ["btn", "icon-button"]})
+    attributes["class"].extend(classes.copy())
     btn_content = ""
     if url and onclick:
         raise Exception("Button component cannot have both url and onclick specified.")
@@ -143,10 +40,10 @@ def component_button(
         raise Exception("Button must have either icon, content, or image specified.")
 
     if onclick:
-        kwargs["onclick"] = onclick
+        attributes["onclick"] = onclick
 
     if id:
-        kwargs["id"] = id
+        attributes["id"] = id
 
     if icon:
         if icon.startswith("fa"):
@@ -165,14 +62,14 @@ def component_button(
         """
 
     if not content:
-        kwargs["class"].append("icon-button-no-content")
+        attributes["class"].append("icon-button-no-content")
     else:
         btn_content += content
 
     if button_id:
-        kwargs["id"] = button_id
+        attributes["id"] = button_id
 
-    kwargs["aria-label"] = title
+    attributes["aria-label"] = title
 
     # Handle tooltips
     title = context["translate"](title)
@@ -180,30 +77,30 @@ def component_button(
 
     # If we're already using data-toggle, wrap the button content in a span.
     # This lets us use another data-toggle.
-    if "data-toggle" in kwargs:
+    if "data-toggle" in attributes:
         btn_content = f"""
         <span data-toggle="tooltip" data-placement="{tooltip_placement}" title="{title}">
             {btn_content}
         </span>
         """  # noqa
     else:
-        kwargs["data-placement"] = tooltip_placement
-        kwargs["title"] = title
+        attributes["data-placement"] = tooltip_placement
+        attributes["title"] = title
 
-    # Convert all the options for the button into a string of HTML kwargs
-    kwargs["class"] = " ".join(kwargs["class"])
-    kwargs_str = " ".join([f'{key}="{val}"' for key, val in kwargs.items()])
+    # Convert all the options for the button into a string of HTML attributes
+    attributes["class"] = " ".join(attributes["class"])
+    attributes_str = " ".join([f'{key}="{val}"' for key, val in attributes.items()])
 
     # Generate the button HTML
     if label_for:
         html = f"""
-        <label for="{label_for}" {kwargs_str}>
+        <label for="{label_for}" {attributes_str}>
             {btn_content}
         </label>
         """
     else:
         html = f"""
-        <button {kwargs_str}>
+        <button {attributes_str}>
             {btn_content}
         </button>
         """
@@ -218,10 +115,95 @@ def component_button(
     return html
 
 
+def component_group(app, context, items=None, **kwargs):
+    # Items to go inside dropdown
+    group_items = []
+    for component in items:
+        # Pop the `button` type in case it was incorrectly given, since we force button
+        if "type" in component:
+            component.pop("type")
+        group_items.append(
+            component_button(
+                app,
+                context,
+                **component,
+            )
+        )
+    group_items = "\n".join(group_items)
+    html = f"""
+    <div class="component-group">{group_items}</div>
+    """
+    return html
+
+
+def component_dropdown(
+    app, context, content="", icon="", side="left", items=[], **kwargs
+):
+    # Items to go inside dropdown
+    dropdown_items = []
+    for component in items:
+        # Pop the `button` type in case it was incorrectly given, since we force button
+        if "type" in component:
+            component.pop("type")
+        dropdown_items.append(
+            component_button(
+                app,
+                context,
+                **component,
+            )
+        )
+    dropdown_items = "\n".join(dropdown_items)
+
+    # These control the look of the button
+    button_classes = []
+    if content:
+        button_classes.append("dropdown-toggle")
+
+    # Unique ID to trigger the show event
+    dropdown_id = "menu-dropdown-"
+    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
+
+    # Generate the button HTML
+    dropdown_attributes = {
+        "data-toggle": "dropdown",
+        "aria-haspopup": "true",
+        "aria-expanded": "false",
+        "type": "button",
+    }
+    html_button = component_button(
+        app,
+        context,
+        content=content,
+        icon=icon,
+        attributes=dropdown_attributes,
+        classes=button_classes,
+        button_id=dropdown_id,
+        **kwargs,
+    )
+
+    dropdown_classes = ["dropdown-menu"]
+    if side == "right":
+        dropdown_classes.append("dropdown-menu-right")
+    dropdown_classes = " ".join(dropdown_classes)
+
+    html_dropdown = f"""
+    <div class="dropdown">
+        {html_button}
+        <div class="{dropdown_classes}" aria-labelledby="{dropdown_id}">
+            {dropdown_items}
+        </div>
+    </div>
+    """  # noqa
+    return html_dropdown
+
+
+def component_html(app, context, html=""):
+    return html
+
+
 COMPONENT_FUNCS = {
-    "link": component_link,
     "button": component_button,
-    "icon-links": component_icon_links,
     "dropdown": component_dropdown,
+    "group": component_group,
     "html": component_html,
 }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header.scss b/src/sphinx_book_theme/assets/styles/sections/_header.scss
index 3b3ad2f8..a4a8baf8 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header.scss
@@ -13,18 +13,28 @@ $header-default-height-narrow: 3rem;
   }
 }
 
-// The parent div that will expand / contract
+// Header container places the collapse button properly
 .header {
   display: flex;
   border-bottom: $border-thin;
+}
 
-  // On narrow screens, cap the height unless you click the hamburger menu
+// Header content contains the components
+.header__content {
+  display: flex;
+  flex-grow: 1;
+  max-width: 1400px; // Bootstrap max-width for xl container, to match article
+  margin: 0 auto;
+  padding: 0 0.5rem;
   @include max-height-header;
+
+  // On narrow screens, cap the height unless you click the hamburger menu
   min-height: $header-default-height-wide;
   @media (max-width: $breakpoint-md) {
     min-height: $header-default-height-narrow;
     transition: max-height $animation-time ease-out;
     overflow-y: hidden;
+    padding-bottom: 0.5rem;
   }
 
   // Navigation links
@@ -50,14 +60,6 @@ $header-default-height-narrow: 3rem;
   }
 }
 
-// Header content should take up the whole remaining horizontal space
-.header__content {
-  display: flex;
-  flex-grow: 1;
-  max-width: 1400px; // Bootstrap max-width for xl container, to match article
-  margin: 0 auto;
-}
-
 .header__content,
 .header__brand,
 .header__start,
@@ -76,15 +78,11 @@ $header-default-height-narrow: 3rem;
   padding: 0 1.5rem;
 }
 
-// Ensure the header items don't touch the screen edge
-.header__start {
-  padding-left: 1rem;
-}
-
-@media (max-width: $breakpoint-md) {
-  .header__brand,
-  .header__start,
-  .header__end {
+.header__brand,
+.header__start,
+.header__end {
+  // On narrow screens the header content sections display vertically
+  @media (max-width: $breakpoint-md) {
     padding-left: 0.5rem;
   }
 }
@@ -94,9 +92,9 @@ $header-default-height-narrow: 3rem;
   display: none;
   @media (max-width: $breakpoint-md) {
     display: block;
+    margin-right: 0.5rem;
     // HACK to keep it centered in a way that won't move when expanded
     margin-top: 0.2rem;
-    margin-right: 0.5rem;
   }
 }
 
@@ -105,18 +103,13 @@ input#__header {
   display: none;
 
   // On narrow screens, checking the button opens the header
-  &:checked ~ div.header {
+  &:checked ~ div.header__content {
     @media (max-width: $breakpoint-md) {
       max-height: 20em;
     }
   }
 }
 
-// Header content contains the components
-.header__content {
-  flex-grow: 1;
-}
-
 // This is the logo or a bold docs title
 .header__brand {
   font-size: 1.5em;
@@ -129,14 +122,9 @@ input#__header {
 }
 
 .header__end {
-  @media (max-width: $breakpoint-md) {
-    padding-bottom: 1rem;
-  }
-
+  // Header end is right-justified on wide screens
   @media (min-width: $breakpoint-md) {
-    // Header end is right-justified
     margin-left: auto;
-    padding-right: 1.5rem;
   }
 }
 
@@ -149,15 +137,20 @@ ul#navbar-icon-links {
   display: flex;
   align-items: center;
 
+  // Ensure that the items don't break out of their containers
+  @include max-height-header;
+
   // Spacing is horizontal on wide, vertical on narrow
   // Items should snap to left on mobile
   @media (max-width: $breakpoint-md) {
     align-items: start;
   }
 
+  // Images are capped a bit smaller so they have whitespace in the header
   img {
-    padding: 0.4rem 0em;
-    @include max-height-header;
+    @media (max-width: $breakpoint-md) {
+      max-height: 2rem;
+    }
   }
 
   .dropdown-menu {
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
index 41f8c6e9..37f19bce 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
@@ -16,12 +16,12 @@
     <div class="visually-hidden">Toggle in-page Table of Contents</div>
 </label>
 <!-- Headers at the top -->
-<div class="announcement noprint">
+<div class="announcement header-item noprint">
     {%- include "sections/announcement.html" -%}
 </div>
-
-{%- include "sections/header.html" -%}
-
+<div class="header header-item noprint">
+    {%- include "sections/header.html" -%}
+</div>
 {{ super() }}
 {% endblock %}
 
@@ -49,11 +49,11 @@
 {% endblock %}
 
 {% block docs_main %}
+<!-- A tiny helper pixel to detect if we've scrolled -->
+<div class="sbt-scroll-pixel-helper"></div>
 <!-- Main content -->
 <div class="col py-0 content-container">
     {% block docs_body %}
-    <!-- A tiny helper pixel to detect if we've scrolled past the top -->
-    <div class="sbt-scroll-pixel-helper"></div>
     <div class="header-article row sticky-top noprint">
         {% include "sections/header-article.html" %}
     </div>
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
index f026f000..80666f72 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
@@ -4,44 +4,43 @@
 
 {%- if start_items or middle_items or end_items %}
 <input type="checkbox" class="header-toggle" name="__header" id="__header" aria-label="Toggle header">
-<div id="theme-header" class="header noprint">
-  <div class="header__content">
-    <!-- If given, the brand will be the same width as sidebar -->
-    {% if theme_header.get("brand") %}
-    <div class="header__brand">
-      <div class="header-content-item">
-        {{ theme_render_component(theme_header.get("brand")) }}
-      </div>
+<div class="header__content">
+  <!-- If given, the brand will be the same width as sidebar -->
+  {% if theme_header.get("brand") %}
+  <div class="header__brand">
+    <div class="header-content-item">
+      {{ theme_render_component(theme_header.get("brand")) }}
     </div>
-    {% endif %}
+  </div>
+  {% endif %}
 
-    <!-- Start is left-aligned -->
-    <div class="header__start">
-      {% for item in start_items %}
-      <div class="header-content-item">
-        {{ theme_render_component(item) }}
-      </div>
-      {% endfor %}
+  <!-- Start is left-aligned -->
+  <div class="header__start">
+    {% for item in start_items %}
+    <div class="header-content-item">
+      {{ theme_render_component(item) }}
     </div>
+    {% endfor %}
+  </div>
 
-    <!-- End is right-aligned -->
-    <div class="header__end">
-      {% for item in end_items %}
-      <div class="header-content-item">
-        {{ theme_render_component(item) }}
-      </div>
-      {% endfor %}
+  <!-- End is right-aligned -->
+  <div class="header__end">
+    {% for item in end_items %}
+    <div class="header-content-item">
+      {{ theme_render_component(item) }}
     </div>
+    {% endfor %}
   </div>
-  {# Dropdown button for mobile, will show on the right #}
-  {{ theme_render_component({
-    "type": "button",
-    "label_for": "__header",
-    "icon": "fas fa-bars",
-    "title": "Toggle Header",
-    "id": "header-toggle-button"
-  }) }}
 </div>
+
+<!-- Dropdown button for mobile, will show on the right -->
+{{ theme_render_component({
+  "type": "button",
+  "label_for": "__header",
+  "icon": "fas fa-bars",
+  "title": "Toggle Header",
+  "id": "header-toggle-button"
+}) }}
 {% endif -%}
 
 {% endif %}

From f1418c19d637877cff90e130c921a58f3c94860b Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Fri, 20 May 2022 22:14:24 +0200
Subject: [PATCH 09/17] More tweaks

---
 docs/_data/config-header.yml                  |  10 +-
 docs/_static/custom.css                       |   5 +-
 src/sphinx_book_theme/__init__.py             |   3 +-
 src/sphinx_book_theme/_components.py          | 100 ++++++++++++------
 .../assets/styles/components/_buttons.scss    |  91 +++++++++++-----
 .../styles/sections/_header-article.scss      |   7 +-
 .../header_buttons/__init__.py                |   2 -
 .../header_buttons/launch.py                  |   1 -
 8 files changed, 148 insertions(+), 71 deletions(-)

diff --git a/docs/_data/config-header.yml b/docs/_data/config-header.yml
index 0a3b9432..afae02e1 100644
--- a/docs/_data/config-header.yml
+++ b/docs/_data/config-header.yml
@@ -39,7 +39,9 @@ end:
       icon: fab fa-github-square
       title: GitHub
       url: https://github.com/executablebooks
-    - type: button
-      icon: fas fa-comments
-      title: Forum
-      url: https://github.com/orgs/executablebooks/discussions
+  - type: button
+    icon: fas fa-comments
+    outline: true
+    content: Discussion
+    classes: text-primary
+    url: https://github.com/orgs/executablebooks/discussions
diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index f0483400..ac67b7b1 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -1,3 +1,6 @@
 :root {
-  --sd-color-primary: #f37726;
+  /* WONT WORK UNTIL THE NEXT PYDATA THEME IS RELEASED
+  --sbt-color-primary: #f37726;
+  --sd-color-primary: var(--sbt-color-primary);
+  */
 }
diff --git a/src/sphinx_book_theme/__init__.py b/src/sphinx_book_theme/__init__.py
index cc305967..ae17a4c4 100644
--- a/src/sphinx_book_theme/__init__.py
+++ b/src/sphinx_book_theme/__init__.py
@@ -76,9 +76,8 @@ def render_component(component):
             output = COMPONENT_FUNCS[kind](app, context, **component_copy)
         except Exception as exc:
             msg = f"Component render failure for:\n{component}\n\n"
-            msg += f"Exception: {exc}"
             SPHINX_LOGGER.warn(msg)
-            return
+            raise exc
         return output
 
     context["theme_render_component"] = render_component
diff --git a/src/sphinx_book_theme/_components.py b/src/sphinx_book_theme/_components.py
index b6726917..fb375eaf 100644
--- a/src/sphinx_book_theme/_components.py
+++ b/src/sphinx_book_theme/_components.py
@@ -16,22 +16,66 @@
 def component_button(
     app,
     context,
-    content="",
-    title="",
-    icon="",
-    image="",
-    url="",
-    onclick="",
-    button_id="",
-    label_for="",
-    id="",
-    tooltip_placement="",
+    content=None,
+    title=None,
+    icon=None,
+    image=None,
+    outline=None,
+    id=None,
+    tooltip_placement=None,
+    url=None,
+    onclick=None,
+    button_id=None,
+    label_for=None,
     attributes={},
     classes=[],
 ):
+    """Render a clickable button.
+
+    There are three possible actions that will be triggered,
+    corresponding to different kwargs having values.
+
+    Meta Parameters
+    ---------------
+    app: An instance of sphinx.Application
+    context: A Sphinx build context dictionary
+
+    General parameters
+    ------------------
+    content: Content to populate inside the button.
+    title: A tooltip / accessibility-friendly title.
+    icon: A tiny square icon. A set of FontAwesome icon classes, or path to an image.
+    image: A larger image of any aspect ratio. A path to a local or remote image.
+    button_id: The ID to be added to this button.
+    outline: Whether to outline the button.
+    tooltip_placement: Whether the tooltip will be to the left, right, top, or bottom.
+    attributes: A dictionary of any key:val attributes to add to the button.
+    classes: A list of CSS classes to add to the button.
+
+    Action-specific parameters
+    --------------------------
+    url: The URL to which a button will direct when clicked.
+    onclick: JavaScript that will be called when a person clicks.
+    label_for: The input this label should trigger when clicked (button is a label).
+    """
+    # Set up attributes and classes that will be used to create HTML attributes at end
     attributes = attributes.copy()
-    attributes.update({"type": "button", "class": ["btn", "icon-button"]})
-    attributes["class"].extend(classes.copy())
+    attributes.update({"type": "button"})
+
+    # Update classes with custom added ones
+    default_classes = ["btn", "icon-button"]
+    if classes:
+        if isinstance(classes, str):
+            classes = [classes]
+    else:
+        classes = []
+    classes.extend(default_classes)
+
+    # Give an outline if desired.
+    if outline:
+        classes.append("btn-outline")
+
+    # Checks for proper arguments
     btn_content = ""
     if url and onclick:
         raise Exception("Button component cannot have both url and onclick specified.")
@@ -62,33 +106,23 @@ def component_button(
         """
 
     if not content:
-        attributes["class"].append("icon-button-no-content")
+        classes.append("icon-button-no-content")
     else:
-        btn_content += content
+        btn_content += f'<span class="btn__content-container">{content}</span>'
 
     if button_id:
         attributes["id"] = button_id
 
-    attributes["aria-label"] = title
-
-    # Handle tooltips
-    title = context["translate"](title)
-    tooltip_placement = "bottom" if not tooltip_placement else tooltip_placement
-
-    # If we're already using data-toggle, wrap the button content in a span.
-    # This lets us use another data-toggle.
-    if "data-toggle" in attributes:
-        btn_content = f"""
-        <span data-toggle="tooltip" data-placement="{tooltip_placement}" title="{title}">
-            {btn_content}
-        </span>
-        """  # noqa
-    else:
+    # Handle tooltips if a title is given
+    if title:
+        title = context["translate"](title)
+        tooltip_placement = "bottom" if not tooltip_placement else tooltip_placement
+        attributes["aria-label"] = title
         attributes["data-placement"] = tooltip_placement
         attributes["title"] = title
 
     # Convert all the options for the button into a string of HTML attributes
-    attributes["class"] = " ".join(attributes["class"])
+    attributes["class"] = " ".join(classes)
     attributes_str = " ".join([f'{key}="{val}"' for key, val in attributes.items()])
 
     # Generate the button HTML
@@ -163,13 +197,17 @@ def component_dropdown(
     dropdown_id = "menu-dropdown-"
     dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
 
-    # Generate the button HTML
+    # Generate the dropdown button HTML
     dropdown_attributes = {
         "data-toggle": "dropdown",
         "aria-haspopup": "true",
         "aria-expanded": "false",
         "type": "button",
     }
+    if "title" in kwargs:
+        SPHINX_LOGGER.warn("Cannot use title / tooltip with dropdown menu. Removing.")
+        kwargs.pop("title")
+
     html_button = component_button(
         app,
         context,
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index 5f54e592..00bbe507 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -13,14 +13,6 @@
   }
 }
 
-// TODO NEW RULES THAT I NEED TO INCORPORATE ABOVE and in other places
-// Used when there's a solo icon with no text, so make the icon a bit bigger
-
-div.dropdown-menu button.btn {
-  display: flex;
-  align-items: center;
-}
-
 .icon-button {
   padding: 0.2em 0.2em;
   margin-bottom: 0;
@@ -39,32 +31,73 @@ div.dropdown-menu button.btn {
   font-size: 1.3rem;
 }
 
-.dropdown-menu {
-  // Copied from dropdown menu style above
-  border-radius: $box-border-radius;
-  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
+div.dropdown {
+  // Control the dropdown menu display
 
-  button {
-    padding-left: 0.5rem;
-    width: 100%;
-    border-radius: 0;
-
-    &:hover {
-      background-color: #eee;
-    }
+  // First, overwrite the Bootstrap default so we can make nicer animations
+  // These make it "displayed" but hidden
+  .dropdown-menu {
+    display: block;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 50ms ease-out, opacity 150ms ease-out 50ms;
   }
-  a:hover {
-    text-decoration: none;
+
+  // On hover, we display the contents via visibility and opacity
+  &:hover div.dropdown-menu,
+  div.dropdown-menu:hover {
+    visibility: visible;
+    opacity: 1;
+    // Remove the delay when hovering, which makes it appear instantly, but delay in disappear
+    transition-delay: 0ms;
   }
 
-  span.btn__icon-container {
-    display: flex;
-    margin-right: 0.5rem;
+  // Other styling on the dropdown menu
+  .dropdown-menu {
+    // Copied from dropdown menu style above
+    border-radius: $box-border-radius;
+    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
+
+    button {
+      display: flex;
+      align-items: center;
+      padding-left: 0.5rem;
+      width: 100%;
+      border-radius: 0;
+
+      &:hover {
+        background-color: #eee;
+      }
+    }
 
-    img,
-    i {
-      width: 1.2rem; // Slightly wider to make the font match the images
-      font-size: 1rem;
+    a:hover {
+      text-decoration: none;
     }
+
+    span.btn__icon-container {
+      display: flex;
+      margin-right: 0.5rem;
+
+      img,
+      i {
+        width: 1.2rem; // Slightly wider to make the font match the images
+        font-size: 1rem;
+      }
+    }
+  }
+}
+
+// Extra spacing when we have both icons and content
+span.btn__icon-container ~ .btn__content-container {
+  margin-left: 0.5em;
+}
+
+// Outline buttons need extra spacing
+button.btn-outline {
+  outline: 1px solid $non-content-grey;
+  padding: 0.3rem 0.5rem;
+
+  &:hover {
+    background-color: #ededed;
   }
 }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
index dc763366..055ea700 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
@@ -22,11 +22,16 @@
     .header-article__right {
       display: flex;
       align-items: center;
-      gap: 0.5rem;
     }
 
     .header-article__right {
       margin-left: auto;
+
+      button,
+      label,
+      div {
+        padding-left: 0.25rem;
+      }
     }
   }
 }
diff --git a/src/sphinx_book_theme/header_buttons/__init__.py b/src/sphinx_book_theme/header_buttons/__init__.py
index 1a61c005..47131aa7 100644
--- a/src/sphinx_book_theme/header_buttons/__init__.py
+++ b/src/sphinx_book_theme/header_buttons/__init__.py
@@ -118,7 +118,6 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
             header_buttons.append(
                 {
                     "type": "dropdown",
-                    "title": "Source repositories",
                     "icon": "fab fa-github",
                     "items": repo_buttons,
                     "side": "right",
@@ -171,7 +170,6 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
         header_buttons.append(
             {
                 "type": "dropdown",
-                "title": "Download this page",
                 "icon": "fas fa-download",
                 "items": download_buttons,
                 "side": "right",
diff --git a/src/sphinx_book_theme/header_buttons/launch.py b/src/sphinx_book_theme/header_buttons/launch.py
index 2a5dfada..678bf13c 100644
--- a/src/sphinx_book_theme/header_buttons/launch.py
+++ b/src/sphinx_book_theme/header_buttons/launch.py
@@ -180,7 +180,6 @@ def add_launch_buttons(
     header_buttons.append(
         {
             "type": "dropdown",
-            "title": "Launch interactive content",
             "icon": "fas fa-rocket",
             "items": launch_buttons_list,
             "side": "right",

From c3bd6a20d7e6792acb61c746d6fc8ba6d1b55e85 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sat, 21 May 2022 03:49:27 +0200
Subject: [PATCH 10/17] Improving header behavior

---
 docs/_data/config-header.yml                  |  2 +
 .../assets/styles/components/_buttons.scss    |  2 +-
 .../styles/sections/_header-article.scss      |  2 +-
 .../assets/styles/sections/_header.scss       | 84 +++++++++----------
 .../sphinx_book_theme/sections/header.html    | 25 +++---
 5 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/docs/_data/config-header.yml b/docs/_data/config-header.yml
index afae02e1..6471d85d 100644
--- a/docs/_data/config-header.yml
+++ b/docs/_data/config-header.yml
@@ -2,6 +2,8 @@ brand:
   type: button
   image: https://executablebooks.org/en/latest/_static/logo.svg
   url: https://sphinx-book-theme.readthedocs.io
+  # For testing
+  # content: Test site name
 start:
   - type: dropdown
     content: Projects
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index 00bbe507..30d82077 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -14,7 +14,7 @@
 }
 
 .icon-button {
-  padding: 0.2em 0.2em;
+  padding: 0 0.2em;
   margin-bottom: 0;
   color: var(--theme-header-button-color);
 
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
index 055ea700..f032e3e9 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
@@ -30,7 +30,7 @@
       button,
       label,
       div {
-        padding-left: 0.25rem;
+        padding-left: 0.3rem;
       }
     }
   }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header.scss b/src/sphinx_book_theme/assets/styles/sections/_header.scss
index a4a8baf8..3f6a7e5b 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header.scss
@@ -2,16 +2,7 @@
  * A few different header CSS rules
  */
 
-$header-default-height-wide: 4rem;
-$header-default-height-narrow: 3rem;
-
-@mixin max-height-header() {
-  // Fix max height so our header items don't spill over
-  max-height: $header-default-height-wide;
-  @media (max-width: $breakpoint-md) {
-    max-height: $header-default-height-narrow;
-  }
-}
+$header-default-height: 4rem;
 
 // Header container places the collapse button properly
 .header {
@@ -26,12 +17,10 @@ $header-default-height-narrow: 3rem;
   max-width: 1400px; // Bootstrap max-width for xl container, to match article
   margin: 0 auto;
   padding: 0 0.5rem;
-  @include max-height-header;
+  max-height: $header-default-height;
+  min-height: $header-default-height;
 
-  // On narrow screens, cap the height unless you click the hamburger menu
-  min-height: $header-default-height-wide;
   @media (max-width: $breakpoint-md) {
-    min-height: $header-default-height-narrow;
     transition: max-height $animation-time ease-out;
     overflow-y: hidden;
     padding-bottom: 0.5rem;
@@ -61,7 +50,6 @@ $header-default-height-narrow: 3rem;
 }
 
 .header__content,
-.header__brand,
 .header__start,
 .header__end {
   display: flex;
@@ -74,10 +62,6 @@ $header-default-height-narrow: 3rem;
   }
 }
 
-.header__brand {
-  padding: 0 1.5rem;
-}
-
 .header__brand,
 .header__start,
 .header__end {
@@ -87,17 +71,6 @@ $header-default-height-narrow: 3rem;
   }
 }
 
-// Only show up on narrow screens, and push to the far right
-#header-toggle-button {
-  display: none;
-  @media (max-width: $breakpoint-md) {
-    display: block;
-    margin-right: 0.5rem;
-    // HACK to keep it centered in a way that won't move when expanded
-    margin-top: 0.2rem;
-  }
-}
-
 input#__header {
   // Inputs never display, only used to control behavior
   display: none;
@@ -112,20 +85,49 @@ input#__header {
 
 // This is the logo or a bold docs title
 .header__brand {
+  display: flex;
   font-size: 1.5em;
 
-  // Wide screens: header start has same width as the sidebar + center over logo
-  @media (min-width: $breakpoint-md) {
-    width: $leftbar-width-wide;
-    justify-content: center;
+  // Align the brand vertically
+  .header-content-item {
+    height: $header-default-height;
+    align-items: center;
+  }
+
+  // So the brand logo aligns with the toggle button
+  button {
+    padding: 0;
+  }
+
+  // Only show up on narrow screens, and push to the far right
+  #header-toggle-button {
+    display: none;
+    font-size: 1.5rem; // A bit bigger since it's prominent at top
+    @media (max-width: $breakpoint-md) {
+      display: flex;
+      align-items: center;
+      height: $header-default-height;
+      margin-left: auto;
+      margin-right: 0.4rem;
+    }
   }
 }
 
+// Wide screens: header start has same width as the sidebar + center over logo
+@media (min-width: $breakpoint-md) {
+  width: $leftbar-width-wide;
+  justify-content: center;
+}
+
 .header__end {
   // Header end is right-justified on wide screens
   @media (min-width: $breakpoint-md) {
     margin-left: auto;
   }
+
+  @media (max-width: $breakpoint-md) {
+    margin-bottom: 1rem;
+  }
 }
 
 ul#navbar-icon-links {
@@ -138,7 +140,12 @@ ul#navbar-icon-links {
   align-items: center;
 
   // Ensure that the items don't break out of their containers
-  @include max-height-header;
+  max-height: $header-default-height;
+
+  // Images are capped a bit smaller so they have whitespace in the header
+  img {
+    max-height: $header-default-height * 0.8;
+  }
 
   // Spacing is horizontal on wide, vertical on narrow
   // Items should snap to left on mobile
@@ -146,13 +153,6 @@ ul#navbar-icon-links {
     align-items: start;
   }
 
-  // Images are capped a bit smaller so they have whitespace in the header
-  img {
-    @media (max-width: $breakpoint-md) {
-      max-height: 2rem;
-    }
-  }
-
   .dropdown-menu {
     z-index: $zindex-sticky + 1;
   }
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
index 80666f72..534b3348 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header.html
@@ -6,13 +6,23 @@
 <input type="checkbox" class="header-toggle" name="__header" id="__header" aria-label="Toggle header">
 <div class="header__content">
   <!-- If given, the brand will be the same width as sidebar -->
-  {% if theme_header.get("brand") %}
   <div class="header__brand">
+    {% if theme_header.get("brand") %}
     <div class="header-content-item">
       {{ theme_render_component(theme_header.get("brand")) }}
     </div>
+    {% endif %}
+
+    <!-- Dropdown button for mobile, will show on the right -->
+    {{ theme_render_component({
+      "type": "button",
+      "label_for": "__header",
+      "icon": "fas fa-bars",
+      "title": "Toggle Header",
+      "id": "header-toggle-button"
+    }) }}
+    {% endif -%}
   </div>
-  {% endif %}
 
   <!-- Start is left-aligned -->
   <div class="header__start">
@@ -32,15 +42,4 @@
     {% endfor %}
   </div>
 </div>
-
-<!-- Dropdown button for mobile, will show on the right -->
-{{ theme_render_component({
-  "type": "button",
-  "label_for": "__header",
-  "icon": "fas fa-bars",
-  "title": "Toggle Header",
-  "id": "header-toggle-button"
-}) }}
-{% endif -%}
-
 {% endif %}

From a7a57fce069f5934c43e40703c8f9ea53c14721e Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sat, 21 May 2022 03:56:38 +0200
Subject: [PATCH 11/17] Safari bug

---
 .../assets/styles/components/_buttons.scss    | 47 +++++++++++++------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index 30d82077..a34b7f22 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -13,22 +13,16 @@
   }
 }
 
-.icon-button {
-  padding: 0 0.2em;
-  margin-bottom: 0;
-  color: var(--theme-header-button-color);
-
-  // Over-ride bootstrap defaults for clicking
-  &:hover,
-  &:focus {
-    color: var(--theme-header-button-color-hover);
-    box-shadow: none;
-    text-decoration: none;
-  }
-}
+/**
+ * Header sections
+ */
 
-.icon-button-no-content {
-  font-size: 1.3rem;
+// Reset default styling of labels and buttons so we can customize
+label {
+  border-radius: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
 div.dropdown {
@@ -92,6 +86,29 @@ span.btn__icon-container ~ .btn__content-container {
   margin-left: 0.5em;
 }
 
+/*
+ * Button types classes
+ */
+// Basic button class
+.icon-button {
+  padding: 0 0.2em;
+  margin-bottom: 0;
+  color: var(--theme-header-button-color);
+
+  // Over-ride bootstrap defaults for clicking
+  &:hover,
+  &:focus {
+    color: var(--theme-header-button-color-hover);
+    box-shadow: none;
+    text-decoration: none;
+  }
+}
+
+// If no content, make the icon a bit bigger
+.icon-button-no-content {
+  font-size: 1.3rem;
+}
+
 // Outline buttons need extra spacing
 button.btn-outline {
   outline: 1px solid $non-content-grey;

From f2589a4b22d2ecc00209e2d3ef5f72c8fb5058ca Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sat, 21 May 2022 04:04:39 +0200
Subject: [PATCH 12/17] Safari

---
 src/sphinx_book_theme/assets/styles/components/_buttons.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index a34b7f22..c2fdce98 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -18,7 +18,7 @@
  */
 
 // Reset default styling of labels and buttons so we can customize
-label {
+[type="button"] {
   border-radius: 0;
   -webkit-appearance: none;
   -moz-appearance: none;

From 9de14aedee8fc4d710b4a0e0e6e195a39f702d04 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sat, 21 May 2022 04:10:19 +0200
Subject: [PATCH 13/17] Safari

---
 src/sphinx_book_theme/assets/styles/components/_buttons.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index c2fdce98..eb5b4b00 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -17,12 +17,9 @@
  * Header sections
  */
 
-// Reset default styling of labels and buttons so we can customize
+// Reset default button styling on Safari because it has opinionated / clashing design
 [type="button"] {
-  border-radius: 0;
   -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
 }
 
 div.dropdown {

From 5da99b30f583c875448aba583a6e61c9aa288c1d Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sun, 22 May 2022 07:50:52 +0200
Subject: [PATCH 14/17] Button spacing

---
 .../assets/styles/abstracts/_variables.scss   |  1 +
 .../assets/styles/components/_buttons.scss    | 11 +++++------
 .../styles/sections/_header-article.scss      |  9 ++-------
 .../assets/styles/sections/_header.scss       | 19 ++++++++++++++-----
 .../styles/sections/_sidebar-primary.scss     |  2 +-
 .../theme/sphinx_book_theme/layout.html       |  2 +-
 6 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
index b4a2127e..2dc3e3ba 100644
--- a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
+++ b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
@@ -72,4 +72,5 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
   --theme-header-article-font-size: var(--sbt-font-size-small-1);
   --theme-header-button-color: #5a5a5a;
   --theme-header-button-color-hover: black;
+  --theme-header-background-color: white;
 }
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index eb5b4b00..9b9a5cc9 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -67,7 +67,6 @@ div.dropdown {
 
     span.btn__icon-container {
       display: flex;
-      margin-right: 0.5rem;
 
       img,
       i {
@@ -78,11 +77,6 @@ div.dropdown {
   }
 }
 
-// Extra spacing when we have both icons and content
-span.btn__icon-container ~ .btn__content-container {
-  margin-left: 0.5em;
-}
-
 /*
  * Button types classes
  */
@@ -99,6 +93,11 @@ span.btn__icon-container ~ .btn__content-container {
     box-shadow: none;
     text-decoration: none;
   }
+
+  // Spacing for the icon if it's present with text
+  .btn__icon-container + .btn__content-container {
+    margin-left: 0.5rem;
+  }
 }
 
 // If no content, make the icon a bit bigger
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
index f032e3e9..62b815a1 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
@@ -4,7 +4,7 @@
 *********************************************/
 .header-article {
   height: $header-article-height; // Fix the height so the TOC doesn't grow it
-  background-color: white;
+  background-color: var(--theme-header-background-color);
   transition: left 0.2s;
   font-size: var(--theme-header-article-font-size);
 
@@ -26,12 +26,7 @@
 
     .header-article__right {
       margin-left: auto;
-
-      button,
-      label,
-      div {
-        padding-left: 0.3rem;
-      }
+      gap: 0.5rem;
     }
   }
 }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header.scss b/src/sphinx_book_theme/assets/styles/sections/_header.scss
index 3f6a7e5b..c1bf5092 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header.scss
@@ -8,6 +8,7 @@ $header-default-height: 4rem;
 .header {
   display: flex;
   border-bottom: $border-thin;
+  background-color: var(--theme-header-background-color);
 }
 
 // Header content contains the components
@@ -113,10 +114,18 @@ input#__header {
   }
 }
 
-// Wide screens: header start has same width as the sidebar + center over logo
-@media (min-width: $breakpoint-md) {
-  width: $leftbar-width-wide;
-  justify-content: center;
+.header__start,
+.header__end {
+  // Increase the text size on mobile
+  @media (max-width: $breakpoint-md) {
+    button {
+      font-size: 1.1rem;
+    }
+
+    button.icon-button-no-content {
+      font-size: 1.5rem;
+    }
+  }
 }
 
 .header__end {
@@ -144,7 +153,7 @@ ul#navbar-icon-links {
 
   // Images are capped a bit smaller so they have whitespace in the header
   img {
-    max-height: $header-default-height * 0.8;
+    max-height: $header-default-height * 0.7;
   }
 
   // Spacing is horizontal on wide, vertical on narrow
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
index d90c183a..4a391746 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
@@ -5,7 +5,7 @@
   padding-top: 0;
   width: $leftbar-width-wide;
   font-size: var(--sbt-sidebar-font-size);
-  top: 0px !important;
+  top: 0px;
   background: white;
   border-right: $border-thin;
   transition: margin-left $animation-time ease 0s,
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
index 37f19bce..af0588e8 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
@@ -19,7 +19,7 @@
 <div class="announcement header-item noprint">
     {%- include "sections/announcement.html" -%}
 </div>
-<div class="header header-item noprint">
+<div class="header header-item noprint {{ header_classes }}">
     {%- include "sections/header.html" -%}
 </div>
 {{ super() }}

From 0bce8472c010bee9a106c41486e28e09dccff2e6 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sun, 22 May 2022 08:49:38 +0200
Subject: [PATCH 15/17] Header spacing

---
 .../assets/styles/abstracts/_variables.scss               | 2 ++
 src/sphinx_book_theme/assets/styles/sections/_header.scss | 3 ++-
 .../assets/styles/sections/_sidebar-primary.scss          | 2 +-
 .../assets/styles/sections/_sidebar-secondary.scss        | 8 ++++----
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
index 2dc3e3ba..92155c58 100644
--- a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
+++ b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
@@ -67,6 +67,8 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
   --sbt-sidebar-font-size: var(--sbt-font-size-small-1);
   --sbt-prevnext-font-size: var(--sbt-font-size-small-1);
   --sbt-footer-font-size: var(--sbt-font-size-small-1);
+  --sbt-header-font-size: var(--sbt-font-size-regular);
+  --sbt-font-size-menu-mobile: 1.1rem;
 
   // Header variables
   --theme-header-article-font-size: var(--sbt-font-size-small-1);
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header.scss b/src/sphinx_book_theme/assets/styles/sections/_header.scss
index c1bf5092..898ab234 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header.scss
@@ -119,7 +119,7 @@ input#__header {
   // Increase the text size on mobile
   @media (max-width: $breakpoint-md) {
     button {
-      font-size: 1.1rem;
+      font-size: var(--sbt-font-size-menu-mobile);
     }
 
     button.icon-button-no-content {
@@ -162,6 +162,7 @@ ul#navbar-icon-links {
     align-items: start;
   }
 
+  // To put this on top of other sticky content on the page
   .dropdown-menu {
     z-index: $zindex-sticky + 1;
   }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
index 4a391746..82b4c813 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
@@ -18,7 +18,7 @@
     position: fixed;
     width: $leftbar-width-mobile;
     max-width: 300px;
-    font-size: 1.2em;
+    font-size: var(--sbt-font-size-menu-mobile);
     z-index: $zindex-offcanvas;
   }
 
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss
index da6e8fd5..b11cc539 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss
@@ -27,11 +27,11 @@
     background-color: white;
     border-left: $border-thin;
 
-    // Fonts are a bit bigger on mobile, and nested headers get smaller
-    font-size: 1.4em;
-
+    // Fonts and spacing
+    font-size: var(--sbt-font-size-menu-mobile);
     li {
-      font-size: 0.8em;
+      // This makes the nested list items smaller
+      font-size: 0.9em;
     }
   }
 

From a304b27f0cf54c8acec27bb6a2a18685a9b42771 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Tue, 24 May 2022 15:27:27 +0200
Subject: [PATCH 16/17] Passing tests

---
 docs/_data/config-header.yml                  |   1 -
 src/sphinx_book_theme/_components.py          |  14 +-
 .../assets/styles/components/_buttons.scss    |   2 +-
 .../assets/styles/sections/_article.scss      |   5 +
 .../styles/sections/_footer-content.scss      |   4 +
 .../assets/styles/sections/_header.scss       |  19 ++-
 .../header_buttons/__init__.py                |   3 +-
 .../header_buttons/launch.py                  |   3 +-
 tests/test_build.py                           |  44 +++---
 ....html => article__margin--marginnote.html} |   0
 ...te.html => article__margin--sidenote.html} |   0
 tests/test_build/build__header-article.html   | 116 ---------------
 tests/test_build/header-article.html          | 112 ++++++++++++++
 .../header-article__launch-buttons.html       |  51 +++++++
 ...-article__repo-buttons--custom-branch.html |  66 +++++++++
 .../header__repo-buttons--all-off.html        |  58 ++++----
 .../header__repo-buttons--all-on.html         | 138 +++++++++---------
 .../header__repo-buttons--custom-branch.html  |  66 ---------
 .../header__repo-buttons--one-on.html         |  70 ++++-----
 ...ry__nav.html => sidebar-primary__nav.html} |   0
 ...debar-secondary--page-multipletitles.html} |   0
 ... => sidebar-secondary--page-onetitle.html} |   0
 ...r-secondary--page-onetitlenoheadings.html} |   0
 ... sidebar-secondary__toc--customtitle.html} |   0
 tests/test_build/test_header_launchbtns.html  |  61 --------
 tests/test_build/test_topbar_launchbtns.html  |  61 --------
 26 files changed, 421 insertions(+), 473 deletions(-)
 rename tests/test_build/{test_marginnote.html => article__margin--marginnote.html} (100%)
 rename tests/test_build/{test_sidenote.html => article__margin--sidenote.html} (100%)
 delete mode 100644 tests/test_build/build__header-article.html
 create mode 100644 tests/test_build/header-article.html
 create mode 100644 tests/test_build/header-article__launch-buttons.html
 create mode 100644 tests/test_build/header-article__repo-buttons--custom-branch.html
 delete mode 100644 tests/test_build/header__repo-buttons--custom-branch.html
 rename tests/test_build/{build__sidebar-primary__nav.html => sidebar-primary__nav.html} (100%)
 rename tests/test_build/{build__pagetoc--page-multipletitles.html => sidebar-secondary--page-multipletitles.html} (100%)
 rename tests/test_build/{build__pagetoc--page-onetitle.html => sidebar-secondary--page-onetitle.html} (100%)
 rename tests/test_build/{build__pagetoc--page-onetitlenoheadings.html => sidebar-secondary--page-onetitlenoheadings.html} (100%)
 rename tests/test_build/{test_right_sidebar_title.html => sidebar-secondary__toc--customtitle.html} (100%)
 delete mode 100644 tests/test_build/test_header_launchbtns.html
 delete mode 100644 tests/test_build/test_topbar_launchbtns.html

diff --git a/docs/_data/config-header.yml b/docs/_data/config-header.yml
index 6471d85d..da60fbd5 100644
--- a/docs/_data/config-header.yml
+++ b/docs/_data/config-header.yml
@@ -45,5 +45,4 @@ end:
     icon: fas fa-comments
     outline: true
     content: Discussion
-    classes: text-primary
     url: https://github.com/orgs/executablebooks/discussions
diff --git a/src/sphinx_book_theme/_components.py b/src/sphinx_book_theme/_components.py
index fb375eaf..a1e6d822 100644
--- a/src/sphinx_book_theme/_components.py
+++ b/src/sphinx_book_theme/_components.py
@@ -117,6 +117,7 @@ def component_button(
     if title:
         title = context["translate"](title)
         tooltip_placement = "bottom" if not tooltip_placement else tooltip_placement
+        attributes["data-toggle"] = "tooltip"
         attributes["aria-label"] = title
         attributes["data-placement"] = tooltip_placement
         attributes["title"] = title
@@ -171,9 +172,9 @@ def component_group(app, context, items=None, **kwargs):
 
 
 def component_dropdown(
-    app, context, content="", icon="", side="left", items=[], **kwargs
+    app, context, content="", icon="", side="left", classes=None, items=[], **kwargs
 ):
-    # Items to go inside dropdown
+    # Render the items inside the dropdown
     dropdown_items = []
     for component in items:
         # Pop the `button` type in case it was incorrectly given, since we force button
@@ -188,10 +189,10 @@ def component_dropdown(
         )
     dropdown_items = "\n".join(dropdown_items)
 
-    # These control the look of the button
-    button_classes = []
+    # Set up the classes for the dropdown
+    classes = [] if not classes else classes
     if content:
-        button_classes.append("dropdown-toggle")
+        classes.append("dropdown-toggle")
 
     # Unique ID to trigger the show event
     dropdown_id = "menu-dropdown-"
@@ -199,7 +200,6 @@ def component_dropdown(
 
     # Generate the dropdown button HTML
     dropdown_attributes = {
-        "data-toggle": "dropdown",
         "aria-haspopup": "true",
         "aria-expanded": "false",
         "type": "button",
@@ -214,7 +214,7 @@ def component_dropdown(
         content=content,
         icon=icon,
         attributes=dropdown_attributes,
-        classes=button_classes,
+        classes=classes,
         button_id=dropdown_id,
         **kwargs,
     )
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index 9b9a5cc9..899a5c9d 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -52,7 +52,7 @@ div.dropdown {
     button {
       display: flex;
       align-items: center;
-      padding-left: 0.5rem;
+      padding-left: 1rem;
       width: 100%;
       border-radius: 0;
 
diff --git a/src/sphinx_book_theme/assets/styles/sections/_article.scss b/src/sphinx_book_theme/assets/styles/sections/_article.scss
index b87e9c89..a7b5290c 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_article.scss
@@ -12,6 +12,11 @@ body {
   padding-top: 1.5em;
 }
 
+.content-container {
+  display: flex;
+  flex-direction: column;
+}
+
 // On wide screens, make space for the right margin
 @media (min-width: $breakpoint-md) {
   #main-content {
diff --git a/src/sphinx_book_theme/assets/styles/sections/_footer-content.scss b/src/sphinx_book_theme/assets/styles/sections/_footer-content.scss
index 6c147a44..97865889 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_footer-content.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_footer-content.scss
@@ -1,6 +1,10 @@
 /*********************************************
 * Footer - content *
 *********************************************/
+div.footer-content {
+  margin-top: auto;
+}
+
 footer {
   font-size: var(--sbt-font-size-small-1);
 }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header.scss b/src/sphinx_book_theme/assets/styles/sections/_header.scss
index 898ab234..2dcd27cf 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header.scss
@@ -17,7 +17,7 @@ $header-default-height: 4rem;
   flex-grow: 1;
   max-width: 1400px; // Bootstrap max-width for xl container, to match article
   margin: 0 auto;
-  padding: 0 0.5rem;
+  padding: 0 1rem;
   max-height: $header-default-height;
   min-height: $header-default-height;
 
@@ -55,7 +55,6 @@ $header-default-height: 4rem;
 .header__end {
   display: flex;
   flex-wrap: nowrap;
-  gap: 0.75rem;
 
   // On narrow screens, the header items show flow vertically and snap to left
   @media (max-width: $breakpoint-md) {
@@ -63,9 +62,16 @@ $header-default-height: 4rem;
   }
 }
 
+// More rem for the content container
+.header__content {
+  gap: 1rem;
+}
+
 .header__brand,
 .header__start,
 .header__end {
+  gap: 0.75rem;
+
   // On narrow screens the header content sections display vertically
   @media (max-width: $breakpoint-md) {
     padding-left: 0.5rem;
@@ -116,15 +122,16 @@ input#__header {
 
 .header__start,
 .header__end {
+  // Solo icon buttons should be a bit bigger
+  .icon-button-no-content {
+    font-size: 1.5rem;
+  }
+
   // Increase the text size on mobile
   @media (max-width: $breakpoint-md) {
     button {
       font-size: var(--sbt-font-size-menu-mobile);
     }
-
-    button.icon-button-no-content {
-      font-size: 1.5rem;
-    }
   }
 }
 
diff --git a/src/sphinx_book_theme/header_buttons/__init__.py b/src/sphinx_book_theme/header_buttons/__init__.py
index 47131aa7..d9b38a89 100644
--- a/src/sphinx_book_theme/header_buttons/__init__.py
+++ b/src/sphinx_book_theme/header_buttons/__init__.py
@@ -121,11 +121,12 @@ def add_header_buttons(app, pagename, templatename, context, doctree):
                     "icon": "fab fa-github",
                     "items": repo_buttons,
                     "side": "right",
+                    "classes": ["repo-buttons"],
                 }
             )
         elif len(repo_buttons) == 1:
             # Remove the text since it's just a single button, want just an icon.
-            repo_buttons[0]["text"] = ""
+            repo_buttons[0]["content"] = ""
             header_buttons.extend(repo_buttons)
 
     # Download buttons for various source content.
diff --git a/src/sphinx_book_theme/header_buttons/launch.py b/src/sphinx_book_theme/header_buttons/launch.py
index 678bf13c..af58ac8e 100644
--- a/src/sphinx_book_theme/header_buttons/launch.py
+++ b/src/sphinx_book_theme/header_buttons/launch.py
@@ -181,8 +181,9 @@ def add_launch_buttons(
         {
             "type": "dropdown",
             "icon": "fas fa-rocket",
-            "items": launch_buttons_list,
             "side": "right",
+            "classes": ["launch-buttons"],
+            "items": launch_buttons_list,
         }
     )
 
diff --git a/tests/test_build.py b/tests/test_build.py
index 6accf30f..7f1054e3 100644
--- a/tests/test_build.py
+++ b/tests/test_build.py
@@ -1,6 +1,6 @@
 import os
 from pathlib import Path
-from shutil import copytree, rmtree
+from shutil import copytree
 from subprocess import check_call
 
 from bs4 import BeautifulSoup
@@ -94,7 +94,7 @@ def test_build_book(sphinx_build_factory, file_regression):
         sidebar = index_html.find(attrs={"id": "bd-docs-nav"})
         file_regression.check(
             sidebar.prettify(),
-            basename="build__sidebar-primary__nav",
+            basename="sidebar-primary__nav",
             extension=".html",
             encoding="utf8",
         )
@@ -114,7 +114,7 @@ def test_build_book(sphinx_build_factory, file_regression):
 
     file_regression.check(
         header_article.prettify(),
-        basename="build__header-article",
+        basename="header-article",
         extension=".html",
         encoding="utf8",
     )
@@ -130,7 +130,7 @@ def test_build_book(sphinx_build_factory, file_regression):
         page_toc = page_html.find("div", attrs={"class": "bd-toc"})
         file_regression.check(
             page_toc.prettify(),
-            basename=f"build__pagetoc--{page.with_suffix('').name}",
+            basename=f"sidebar-secondary--{page.with_suffix('').name}",
             extension=".html",
             encoding="utf8",
         )
@@ -215,13 +215,18 @@ def test_header_repository_buttons(
     )
 
 
-def test_header_launchbtns(sphinx_build_factory, file_regression):
+def test_header_article_launchbtns(sphinx_build_factory, file_regression):
     """Test launch buttons."""
     sphinx_build = sphinx_build_factory("base").build(assert_pass=True)
     launch_btns = sphinx_build.html_tree("section1", "ntbk.html").select(
-        ".menu-dropdown-launch-buttons"
+        ".launch-buttons + .dropdown-menu"
+    )
+    file_regression.check(
+        launch_btns[0].prettify(),
+        basename="header-article__launch-buttons",
+        extension=".html",
+        encoding="utf8",
     )
-    file_regression.check(launch_btns[0].prettify(), extension=".html", encoding="utf8")
 
 
 def test_repo_custombranch(sphinx_build_factory, file_regression):
@@ -243,7 +248,7 @@ def test_repo_custombranch(sphinx_build_factory, file_regression):
     # The Binder link should point to `foo`, as should the `edit` button
     file_regression.check(
         header[0].prettify(),
-        basename="header__repo-buttons--custom-branch",
+        basename="header-article__repo-buttons--custom-branch",
         extension=".html",
         encoding="utf8",
     )
@@ -320,13 +325,12 @@ def test_right_sidebar_title(sphinx_build_factory, file_regression):
     sidebar_title = sphinx_build.html_tree("page1.html").find_all(
         "div", attrs={"class": "tocsection"}
     )[0]
-
-    file_regression.check(sidebar_title.prettify(), extension=".html", encoding="utf8")
-
-    # Testing the exception for empty title
-    rmtree(str(sphinx_build.src))
-
-    confoverrides = {"html_theme_options.toc_title": ""}
+    file_regression.check(
+        sidebar_title.prettify(),
+        basename="sidebar-secondary__toc--customtitle",
+        extension=".html",
+        encoding="utf8",
+    )
 
 
 def test_logo_only(sphinx_build_factory):
@@ -351,7 +355,10 @@ def test_sidenote(sphinx_build_factory, file_regression):
 
     sidenote_html = page2.select("section > #sidenotes")
     file_regression.check(
-        sidenote_html[0].prettify(), extension=".html", encoding="utf8"
+        sidenote_html[0].prettify(),
+        basename="article__margin--sidenote",
+        extension=".html",
+        encoding="utf8",
     )
 
 
@@ -365,5 +372,8 @@ def test_marginnote(sphinx_build_factory, file_regression):
 
     marginnote_html = page2.select("section > #marginnotes")
     file_regression.check(
-        marginnote_html[0].prettify(), extension=".html", encoding="utf8"
+        marginnote_html[0].prettify(),
+        basename="article__margin--marginnote",
+        extension=".html",
+        encoding="utf8",
     )
diff --git a/tests/test_build/test_marginnote.html b/tests/test_build/article__margin--marginnote.html
similarity index 100%
rename from tests/test_build/test_marginnote.html
rename to tests/test_build/article__margin--marginnote.html
diff --git a/tests/test_build/test_sidenote.html b/tests/test_build/article__margin--sidenote.html
similarity index 100%
rename from tests/test_build/test_sidenote.html
rename to tests/test_build/article__margin--sidenote.html
diff --git a/tests/test_build/build__header-article.html b/tests/test_build/build__header-article.html
deleted file mode 100644
index fd19d29d..00000000
--- a/tests/test_build/build__header-article.html
+++ /dev/null
@@ -1,116 +0,0 @@
-<div class="header-article row sticky-top noprint">
- <div class="col py-1 d-flex header-article-main">
-  <div class="header-article__left">
-   <label class="headerbtn" data-placement="right" data-toggle="tooltip" for="__navigation" title="Toggle navigation">
-    <span class="btn__icon-container">
-     <i class="fas fa-bars">
-     </i>
-    </span>
-   </label>
-  </div>
-  <div class="header-article__right">
-   <div class="menu-dropdown menu-dropdown-launch-buttons">
-    <button aria-label="Launch interactive content" class="headerbtn menu-dropdown__trigger">
-     <i class="fas fa-rocket">
-     </i>
-    </button>
-    <div class="menu-dropdown__content">
-     <ul>
-      <li>
-       <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" title="Launch on Binder">
-        <span class="btn__icon-container">
-         <img src="../_static/images/logo_binder.svg"/>
-        </span>
-        <span class="btn__text-container">
-         Binder
-        </span>
-       </a>
-      </li>
-      <li>
-       <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" title="Launch on JupyterHub">
-        <span class="btn__icon-container">
-         <img src="../_static/images/logo_jupyterhub.svg"/>
-        </span>
-        <span class="btn__text-container">
-         JupyterHub
-        </span>
-       </a>
-      </li>
-      <li>
-       <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" title="Launch on Colab">
-        <span class="btn__icon-container">
-         <img src="../_static/images/logo_colab.png"/>
-        </span>
-        <span class="btn__text-container">
-         Colab
-        </span>
-       </a>
-      </li>
-      <li>
-       <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" title="Launch on Deepnote">
-        <span class="btn__icon-container">
-         <img src="../_static/images/logo_deepnote.svg"/>
-        </span>
-        <span class="btn__text-container">
-         Deepnote
-        </span>
-       </a>
-      </li>
-      <li>
-       <button class="headerbtn headerbtn-launch-thebe" data-placement="left" data-toggle="tooltip" onclick="initThebeSBT()" title="Launch Thebe">
-        <span class="btn__icon-container">
-         <i class="fas fa-play">
-         </i>
-        </span>
-        <span class="btn__text-container">
-         Live Code
-        </span>
-       </button>
-      </li>
-     </ul>
-    </div>
-   </div>
-   <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
-    <span class="btn__icon-container">
-     <i class="fas fa-expand">
-     </i>
-    </span>
-   </button>
-   <div class="menu-dropdown menu-dropdown-download-buttons">
-    <button aria-label="Download this page" class="headerbtn menu-dropdown__trigger">
-     <i class="fas fa-download">
-     </i>
-    </button>
-    <div class="menu-dropdown__content">
-     <ul>
-      <li>
-       <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-        <span class="btn__icon-container">
-         <i class="fas fa-file">
-         </i>
-        </span>
-        <span class="btn__text-container">
-         .ipynb
-        </span>
-       </a>
-      </li>
-      <li>
-       <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-        <span class="btn__icon-container">
-         <i class="fas fa-file-pdf">
-         </i>
-        </span>
-        <span class="btn__text-container">
-         .pdf
-        </span>
-       </button>
-      </li>
-     </ul>
-    </div>
-   </div>
-  </div>
- </div>
- <!-- Table of contents -->
- <div class="col-md-3 bd-toc show noprint">
- </div>
-</div>
diff --git a/tests/test_build/header-article.html b/tests/test_build/header-article.html
new file mode 100644
index 00000000..b53e1ab6
--- /dev/null
+++ b/tests/test_build/header-article.html
@@ -0,0 +1,112 @@
+<div class="header-article row sticky-top noprint">
+ <div class="col py-1 d-flex header-article-main">
+  <div class="header-article__left">
+   <label aria-label="Toggle navigation" class="btn icon-button icon-button-no-content" data-placement="bottom" for="__navigation" title="Toggle navigation" type="button">
+    <span class="btn__icon-container">
+     <i class="fas fa-bars">
+     </i>
+    </span>
+   </label>
+  </div>
+  <div class="header-article__right">
+   <div class="dropdown">
+    <button aria-expanded="false" aria-haspopup="true" class="launch-buttons btn icon-button icon-button-no-content" id="menu-dropdown-e2dcd" type="button">
+     <span class="btn__icon-container">
+      <i class="fas fa-rocket">
+      </i>
+     </span>
+    </button>
+    <div aria-labelledby="menu-dropdown-e2dcd" class="dropdown-menu dropdown-menu-right">
+     <a href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb">
+      <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" title="Launch on Binder" type="button">
+       <span class="btn__icon-container">
+        <img src="../_static/images/logo_binder.svg"/>
+       </span>
+       <span class="btn__content-container">
+        Binder
+       </span>
+      </button>
+     </a>
+     <a href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master">
+      <button aria-label="Launch on JupyterHub" class="btn icon-button" data-placement="left" title="Launch on JupyterHub" type="button">
+       <span class="btn__icon-container">
+        <img src="../_static/images/logo_jupyterhub.svg"/>
+       </span>
+       <span class="btn__content-container">
+        JupyterHub
+       </span>
+      </button>
+     </a>
+     <a href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb">
+      <button aria-label="Launch on Colab" class="btn icon-button" data-placement="left" title="Launch on Colab" type="button">
+       <span class="btn__icon-container">
+        <img src="../_static/images/logo_colab.png"/>
+       </span>
+       <span class="btn__content-container">
+        Colab
+       </span>
+      </button>
+     </a>
+     <a href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb">
+      <button aria-label="Launch on Deepnote" class="btn icon-button" data-placement="left" title="Launch on Deepnote" type="button">
+       <span class="btn__icon-container">
+        <img src="../_static/images/logo_deepnote.svg"/>
+       </span>
+       <span class="btn__content-container">
+        Deepnote
+       </span>
+      </button>
+     </a>
+     <button aria-label="Launch Thebe" class="btn icon-button" data-placement="left" onclick="initThebeSBT()" title="Launch Thebe" type="button">
+      <span class="btn__icon-container">
+       <i class="fas fa-play">
+       </i>
+      </span>
+      <span class="btn__content-container">
+       Live Code
+      </span>
+     </button>
+    </div>
+   </div>
+   <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
+    <span class="btn__icon-container">
+     <i class="fas fa-expand">
+     </i>
+    </span>
+   </button>
+   <div class="dropdown">
+    <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+     <span class="btn__icon-container">
+      <i class="fas fa-download">
+      </i>
+     </span>
+    </button>
+    <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+     <a href="../../_sources/section1/ntbk.ipynb.html">
+      <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+       <span class="btn__icon-container">
+        <i class="fas fa-file">
+        </i>
+       </span>
+       <span class="btn__content-container">
+        .ipynb
+       </span>
+      </button>
+     </a>
+     <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+      <span class="btn__icon-container">
+       <i class="fas fa-file-pdf">
+       </i>
+      </span>
+      <span class="btn__content-container">
+       .pdf
+      </span>
+     </button>
+    </div>
+   </div>
+  </div>
+ </div>
+ <!-- Table of contents -->
+ <div class="col-md-3 bd-toc show noprint">
+ </div>
+</div>
diff --git a/tests/test_build/header-article__launch-buttons.html b/tests/test_build/header-article__launch-buttons.html
new file mode 100644
index 00000000..b8861350
--- /dev/null
+++ b/tests/test_build/header-article__launch-buttons.html
@@ -0,0 +1,51 @@
+<div aria-labelledby="menu-dropdown-e2dcd" class="dropdown-menu dropdown-menu-right">
+ <a href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb">
+  <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" title="Launch on Binder" type="button">
+   <span class="btn__icon-container">
+    <img src="../_static/images/logo_binder.svg"/>
+   </span>
+   <span class="btn__content-container">
+    Binder
+   </span>
+  </button>
+ </a>
+ <a href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master">
+  <button aria-label="Launch on JupyterHub" class="btn icon-button" data-placement="left" title="Launch on JupyterHub" type="button">
+   <span class="btn__icon-container">
+    <img src="../_static/images/logo_jupyterhub.svg"/>
+   </span>
+   <span class="btn__content-container">
+    JupyterHub
+   </span>
+  </button>
+ </a>
+ <a href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb">
+  <button aria-label="Launch on Colab" class="btn icon-button" data-placement="left" title="Launch on Colab" type="button">
+   <span class="btn__icon-container">
+    <img src="../_static/images/logo_colab.png"/>
+   </span>
+   <span class="btn__content-container">
+    Colab
+   </span>
+  </button>
+ </a>
+ <a href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb">
+  <button aria-label="Launch on Deepnote" class="btn icon-button" data-placement="left" title="Launch on Deepnote" type="button">
+   <span class="btn__icon-container">
+    <img src="../_static/images/logo_deepnote.svg"/>
+   </span>
+   <span class="btn__content-container">
+    Deepnote
+   </span>
+  </button>
+ </a>
+ <button aria-label="Launch Thebe" class="btn icon-button" data-placement="left" onclick="initThebeSBT()" title="Launch Thebe" type="button">
+  <span class="btn__icon-container">
+   <i class="fas fa-play">
+   </i>
+  </span>
+  <span class="btn__content-container">
+   Live Code
+  </span>
+ </button>
+</div>
diff --git a/tests/test_build/header-article__repo-buttons--custom-branch.html b/tests/test_build/header-article__repo-buttons--custom-branch.html
new file mode 100644
index 00000000..51548ce6
--- /dev/null
+++ b/tests/test_build/header-article__repo-buttons--custom-branch.html
@@ -0,0 +1,66 @@
+<div class="header-article__right">
+ <div class="dropdown">
+  <button aria-expanded="false" aria-haspopup="true" class="launch-buttons btn icon-button icon-button-no-content" id="menu-dropdown-f533c" type="button">
+   <span class="btn__icon-container">
+    <i class="fas fa-rocket">
+    </i>
+   </span>
+  </button>
+  <div aria-labelledby="menu-dropdown-f533c" class="dropdown-menu dropdown-menu-right">
+   <a href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/foo?urlpath=tree/section1/ntbk.ipynb">
+    <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" title="Launch on Binder" type="button">
+     <span class="btn__icon-container">
+      <img src="../_static/images/logo_binder.svg"/>
+     </span>
+     <span class="btn__content-container">
+      Binder
+     </span>
+    </button>
+   </a>
+  </div>
+ </div>
+ <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
+  <span class="btn__icon-container">
+   <i class="fas fa-expand">
+   </i>
+  </span>
+ </button>
+ <a href="https://github.com/executablebooks/sphinx-book-theme/edit/foo/section1/ntbk.ipynb">
+  <button aria-label="Edit this page" class="btn icon-button icon-button-no-content" data-placement="bottom" title="Edit this page" type="button">
+   <span class="btn__icon-container">
+    <i class="fas fa-pencil-alt">
+    </i>
+   </span>
+  </button>
+ </a>
+ <div class="dropdown">
+  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+   <span class="btn__icon-container">
+    <i class="fas fa-download">
+    </i>
+   </span>
+  </button>
+  <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+   <a href="../../_sources/section1/ntbk.ipynb.html">
+    <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+     <span class="btn__icon-container">
+      <i class="fas fa-file">
+      </i>
+     </span>
+     <span class="btn__content-container">
+      .ipynb
+     </span>
+    </button>
+   </a>
+   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+    <span class="btn__icon-container">
+     <i class="fas fa-file-pdf">
+     </i>
+    </span>
+    <span class="btn__content-container">
+     .pdf
+    </span>
+   </button>
+  </div>
+ </div>
+</div>
diff --git a/tests/test_build/header__repo-buttons--all-off.html b/tests/test_build/header__repo-buttons--all-off.html
index 8a31bf57..1d2252d5 100644
--- a/tests/test_build/header__repo-buttons--all-off.html
+++ b/tests/test_build/header__repo-buttons--all-off.html
@@ -1,40 +1,38 @@
 <div class="header-article__right">
- <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
+ <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
   <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
- <div class="menu-dropdown menu-dropdown-download-buttons">
-  <button aria-label="Download this page" class="headerbtn menu-dropdown__trigger">
-   <i class="fas fa-download">
-   </i>
+ <div class="dropdown">
+  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+   <span class="btn__icon-container">
+    <i class="fas fa-download">
+    </i>
+   </span>
   </button>
-  <div class="menu-dropdown__content">
-   <ul>
-    <li>
-     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-      <span class="btn__icon-container">
-       <i class="fas fa-file">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       .ipynb
-      </span>
-     </a>
-    </li>
-    <li>
-     <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-      <span class="btn__icon-container">
-       <i class="fas fa-file-pdf">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       .pdf
-      </span>
-     </button>
-    </li>
-   </ul>
+  <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+   <a href="../../_sources/section1/ntbk.ipynb.html">
+    <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+     <span class="btn__icon-container">
+      <i class="fas fa-file">
+      </i>
+     </span>
+     <span class="btn__content-container">
+      .ipynb
+     </span>
+    </button>
+   </a>
+   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+    <span class="btn__icon-container">
+     <i class="fas fa-file-pdf">
+     </i>
+    </span>
+    <span class="btn__content-container">
+     .pdf
+    </span>
+   </button>
   </div>
  </div>
 </div>
diff --git a/tests/test_build/header__repo-buttons--all-on.html b/tests/test_build/header__repo-buttons--all-on.html
index 5c64b3a8..8e7c2159 100644
--- a/tests/test_build/header__repo-buttons--all-on.html
+++ b/tests/test_build/header__repo-buttons--all-on.html
@@ -1,83 +1,81 @@
 <div class="header-article__right">
- <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
+ <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
   <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
- <div class="menu-dropdown menu-dropdown-repository-buttons">
-  <button aria-label="Source repositories" class="headerbtn menu-dropdown__trigger">
-   <i class="fab fa-github">
-   </i>
+ <div class="dropdown">
+  <button aria-expanded="false" aria-haspopup="true" class="repo-buttons btn icon-button icon-button-no-content" id="menu-dropdown-a2522" type="button">
+   <span class="btn__icon-container">
+    <i class="fab fa-github">
+    </i>
+   </span>
   </button>
-  <div class="menu-dropdown__content">
-   <ul>
-    <li>
-     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme" title="Source repository">
-      <span class="btn__icon-container">
-       <i class="fab fa-github">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       repository
-      </span>
-     </a>
-    </li>
-    <li>
-     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme/issues/new?title=Issue%20on%20page%20%2Fsection1/ntbk.html&amp;body=Your%20issue%20content%20here." title="Open an issue">
-      <span class="btn__icon-container">
-       <i class="fas fa-lightbulb">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       open issue
-      </span>
-     </a>
-    </li>
-    <li>
-     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme/edit/master/section1/ntbk.ipynb" title="Edit this page">
-      <span class="btn__icon-container">
-       <i class="fas fa-pencil-alt">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       suggest edit
-      </span>
-     </a>
-    </li>
-   </ul>
+  <div aria-labelledby="menu-dropdown-a2522" class="dropdown-menu dropdown-menu-right">
+   <a href="https://github.com/executablebooks/sphinx-book-theme">
+    <button aria-label="Source repository" class="btn icon-button" data-placement="left" title="Source repository" type="button">
+     <span class="btn__icon-container">
+      <i class="fab fa-github">
+      </i>
+     </span>
+     <span class="btn__content-container">
+      repository
+     </span>
+    </button>
+   </a>
+   <a href="https://github.com/executablebooks/sphinx-book-theme/issues/new?title=Issue%20on%20page%20%2Fsection1/ntbk.html&amp;body=Your%20issue%20content%20here.">
+    <button aria-label="Open an issue" class="btn icon-button" data-placement="left" title="Open an issue" type="button">
+     <span class="btn__icon-container">
+      <i class="fas fa-lightbulb">
+      </i>
+     </span>
+     <span class="btn__content-container">
+      open issue
+     </span>
+    </button>
+   </a>
+   <a href="https://github.com/executablebooks/sphinx-book-theme/edit/master/section1/ntbk.ipynb">
+    <button aria-label="Edit this page" class="btn icon-button" data-placement="left" title="Edit this page" type="button">
+     <span class="btn__icon-container">
+      <i class="fas fa-pencil-alt">
+      </i>
+     </span>
+     <span class="btn__content-container">
+      suggest edit
+     </span>
+    </button>
+   </a>
   </div>
  </div>
- <div class="menu-dropdown menu-dropdown-download-buttons">
-  <button aria-label="Download this page" class="headerbtn menu-dropdown__trigger">
-   <i class="fas fa-download">
-   </i>
+ <div class="dropdown">
+  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+   <span class="btn__icon-container">
+    <i class="fas fa-download">
+    </i>
+   </span>
   </button>
-  <div class="menu-dropdown__content">
-   <ul>
-    <li>
-     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-      <span class="btn__icon-container">
-       <i class="fas fa-file">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       .ipynb
-      </span>
-     </a>
-    </li>
-    <li>
-     <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-      <span class="btn__icon-container">
-       <i class="fas fa-file-pdf">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       .pdf
-      </span>
-     </button>
-    </li>
-   </ul>
+  <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+   <a href="../../_sources/section1/ntbk.ipynb.html">
+    <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+     <span class="btn__icon-container">
+      <i class="fas fa-file">
+      </i>
+     </span>
+     <span class="btn__content-container">
+      .ipynb
+     </span>
+    </button>
+   </a>
+   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+    <span class="btn__icon-container">
+     <i class="fas fa-file-pdf">
+     </i>
+    </span>
+    <span class="btn__content-container">
+     .pdf
+    </span>
+   </button>
   </div>
  </div>
 </div>
diff --git a/tests/test_build/header__repo-buttons--custom-branch.html b/tests/test_build/header__repo-buttons--custom-branch.html
deleted file mode 100644
index 93f07b58..00000000
--- a/tests/test_build/header__repo-buttons--custom-branch.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<div class="header-article__right">
- <div class="menu-dropdown menu-dropdown-launch-buttons">
-  <button aria-label="Launch interactive content" class="headerbtn menu-dropdown__trigger">
-   <i class="fas fa-rocket">
-   </i>
-  </button>
-  <div class="menu-dropdown__content">
-   <ul>
-    <li>
-     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/foo?urlpath=tree/section1/ntbk.ipynb" title="Launch on Binder">
-      <span class="btn__icon-container">
-       <img src="../_static/images/logo_binder.svg"/>
-      </span>
-      <span class="btn__text-container">
-       Binder
-      </span>
-     </a>
-    </li>
-   </ul>
-  </div>
- </div>
- <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
-  <span class="btn__icon-container">
-   <i class="fas fa-expand">
-   </i>
-  </span>
- </button>
- <a class="headerbtn" data-placement="bottom" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme/edit/foo/section1/ntbk.ipynb" title="Edit this page">
-  <span class="btn__icon-container">
-   <i class="fas fa-pencil-alt">
-   </i>
-  </span>
- </a>
- <div class="menu-dropdown menu-dropdown-download-buttons">
-  <button aria-label="Download this page" class="headerbtn menu-dropdown__trigger">
-   <i class="fas fa-download">
-   </i>
-  </button>
-  <div class="menu-dropdown__content">
-   <ul>
-    <li>
-     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-      <span class="btn__icon-container">
-       <i class="fas fa-file">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       .ipynb
-      </span>
-     </a>
-    </li>
-    <li>
-     <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-      <span class="btn__icon-container">
-       <i class="fas fa-file-pdf">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       .pdf
-      </span>
-     </button>
-    </li>
-   </ul>
-  </div>
- </div>
-</div>
diff --git a/tests/test_build/header__repo-buttons--one-on.html b/tests/test_build/header__repo-buttons--one-on.html
index b5f8eb4e..70ea484d 100644
--- a/tests/test_build/header__repo-buttons--one-on.html
+++ b/tests/test_build/header__repo-buttons--one-on.html
@@ -1,46 +1,46 @@
 <div class="header-article__right">
- <button class="headerbtn" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode">
+ <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
   <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
- <a class="headerbtn" data-placement="bottom" data-toggle="tooltip" href="https://github.com/executablebooks/sphinx-book-theme/edit/master/section1/ntbk.ipynb" title="Edit this page">
-  <span class="btn__icon-container">
-   <i class="fas fa-pencil-alt">
-   </i>
-  </span>
+ <a href="https://github.com/executablebooks/sphinx-book-theme/edit/master/section1/ntbk.ipynb">
+  <button aria-label="Edit this page" class="btn icon-button icon-button-no-content" data-placement="bottom" title="Edit this page" type="button">
+   <span class="btn__icon-container">
+    <i class="fas fa-pencil-alt">
+    </i>
+   </span>
+  </button>
  </a>
- <div class="menu-dropdown menu-dropdown-download-buttons">
-  <button aria-label="Download this page" class="headerbtn menu-dropdown__trigger">
-   <i class="fas fa-download">
-   </i>
+ <div class="dropdown">
+  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+   <span class="btn__icon-container">
+    <i class="fas fa-download">
+    </i>
+   </span>
   </button>
-  <div class="menu-dropdown__content">
-   <ul>
-    <li>
-     <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="../_sources/section1/ntbk.ipynb" title="Download source file">
-      <span class="btn__icon-container">
-       <i class="fas fa-file">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       .ipynb
-      </span>
-     </a>
-    </li>
-    <li>
-     <button class="headerbtn" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF">
-      <span class="btn__icon-container">
-       <i class="fas fa-file-pdf">
-       </i>
-      </span>
-      <span class="btn__text-container">
-       .pdf
-      </span>
-     </button>
-    </li>
-   </ul>
+  <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+   <a href="../../_sources/section1/ntbk.ipynb.html">
+    <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+     <span class="btn__icon-container">
+      <i class="fas fa-file">
+      </i>
+     </span>
+     <span class="btn__content-container">
+      .ipynb
+     </span>
+    </button>
+   </a>
+   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+    <span class="btn__icon-container">
+     <i class="fas fa-file-pdf">
+     </i>
+    </span>
+    <span class="btn__content-container">
+     .pdf
+    </span>
+   </button>
   </div>
  </div>
 </div>
diff --git a/tests/test_build/build__sidebar-primary__nav.html b/tests/test_build/sidebar-primary__nav.html
similarity index 100%
rename from tests/test_build/build__sidebar-primary__nav.html
rename to tests/test_build/sidebar-primary__nav.html
diff --git a/tests/test_build/build__pagetoc--page-multipletitles.html b/tests/test_build/sidebar-secondary--page-multipletitles.html
similarity index 100%
rename from tests/test_build/build__pagetoc--page-multipletitles.html
rename to tests/test_build/sidebar-secondary--page-multipletitles.html
diff --git a/tests/test_build/build__pagetoc--page-onetitle.html b/tests/test_build/sidebar-secondary--page-onetitle.html
similarity index 100%
rename from tests/test_build/build__pagetoc--page-onetitle.html
rename to tests/test_build/sidebar-secondary--page-onetitle.html
diff --git a/tests/test_build/build__pagetoc--page-onetitlenoheadings.html b/tests/test_build/sidebar-secondary--page-onetitlenoheadings.html
similarity index 100%
rename from tests/test_build/build__pagetoc--page-onetitlenoheadings.html
rename to tests/test_build/sidebar-secondary--page-onetitlenoheadings.html
diff --git a/tests/test_build/test_right_sidebar_title.html b/tests/test_build/sidebar-secondary__toc--customtitle.html
similarity index 100%
rename from tests/test_build/test_right_sidebar_title.html
rename to tests/test_build/sidebar-secondary__toc--customtitle.html
diff --git a/tests/test_build/test_header_launchbtns.html b/tests/test_build/test_header_launchbtns.html
deleted file mode 100644
index 2c356c99..00000000
--- a/tests/test_build/test_header_launchbtns.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<div class="menu-dropdown menu-dropdown-launch-buttons">
- <button aria-label="Launch interactive content" class="headerbtn menu-dropdown__trigger">
-  <i class="fas fa-rocket">
-  </i>
- </button>
- <div class="menu-dropdown__content">
-  <ul>
-   <li>
-    <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" title="Launch on Binder">
-     <span class="btn__icon-container">
-      <img src="../_static/images/logo_binder.svg"/>
-     </span>
-     <span class="btn__text-container">
-      Binder
-     </span>
-    </a>
-   </li>
-   <li>
-    <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" title="Launch on JupyterHub">
-     <span class="btn__icon-container">
-      <img src="../_static/images/logo_jupyterhub.svg"/>
-     </span>
-     <span class="btn__text-container">
-      JupyterHub
-     </span>
-    </a>
-   </li>
-   <li>
-    <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" title="Launch on Colab">
-     <span class="btn__icon-container">
-      <img src="../_static/images/logo_colab.png"/>
-     </span>
-     <span class="btn__text-container">
-      Colab
-     </span>
-    </a>
-   </li>
-   <li>
-    <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" title="Launch on Deepnote">
-     <span class="btn__icon-container">
-      <img src="../_static/images/logo_deepnote.svg"/>
-     </span>
-     <span class="btn__text-container">
-      Deepnote
-     </span>
-    </a>
-   </li>
-   <li>
-    <button class="headerbtn headerbtn-launch-thebe" data-placement="left" data-toggle="tooltip" onclick="initThebeSBT()" title="Launch Thebe">
-     <span class="btn__icon-container">
-      <i class="fas fa-play">
-      </i>
-     </span>
-     <span class="btn__text-container">
-      Live Code
-     </span>
-    </button>
-   </li>
-  </ul>
- </div>
-</div>
diff --git a/tests/test_build/test_topbar_launchbtns.html b/tests/test_build/test_topbar_launchbtns.html
deleted file mode 100644
index 2c356c99..00000000
--- a/tests/test_build/test_topbar_launchbtns.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<div class="menu-dropdown menu-dropdown-launch-buttons">
- <button aria-label="Launch interactive content" class="headerbtn menu-dropdown__trigger">
-  <i class="fas fa-rocket">
-  </i>
- </button>
- <div class="menu-dropdown__content">
-  <ul>
-   <li>
-    <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" title="Launch on Binder">
-     <span class="btn__icon-container">
-      <img src="../_static/images/logo_binder.svg"/>
-     </span>
-     <span class="btn__text-container">
-      Binder
-     </span>
-    </a>
-   </li>
-   <li>
-    <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" title="Launch on JupyterHub">
-     <span class="btn__icon-container">
-      <img src="../_static/images/logo_jupyterhub.svg"/>
-     </span>
-     <span class="btn__text-container">
-      JupyterHub
-     </span>
-    </a>
-   </li>
-   <li>
-    <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" title="Launch on Colab">
-     <span class="btn__icon-container">
-      <img src="../_static/images/logo_colab.png"/>
-     </span>
-     <span class="btn__text-container">
-      Colab
-     </span>
-    </a>
-   </li>
-   <li>
-    <a class="headerbtn" data-placement="left" data-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" title="Launch on Deepnote">
-     <span class="btn__icon-container">
-      <img src="../_static/images/logo_deepnote.svg"/>
-     </span>
-     <span class="btn__text-container">
-      Deepnote
-     </span>
-    </a>
-   </li>
-   <li>
-    <button class="headerbtn headerbtn-launch-thebe" data-placement="left" data-toggle="tooltip" onclick="initThebeSBT()" title="Launch Thebe">
-     <span class="btn__icon-container">
-      <i class="fas fa-play">
-      </i>
-     </span>
-     <span class="btn__text-container">
-      Live Code
-     </span>
-    </button>
-   </li>
-  </ul>
- </div>
-</div>

From 79ae4b5a34879143227e8b10bcb695dd33e107f6 Mon Sep 17 00:00:00 2001
From: Chris Holdgraf <choldgraf@berkeley.edu>
Date: Sat, 4 Jun 2022 20:33:05 +0200
Subject: [PATCH 17/17] More rearrangement

---
 docs/conf.py                                  |  39 ++-
 docs/launch.md                                | 182 +++++-----
 src/sphinx_book_theme/__init__.py             |  44 +--
 .../assets/styles/abstracts/_variables.scss   |   6 +-
 .../assets/styles/components/_buttons.scss    |   9 +
 .../assets/styles/sections/_header.scss       |   1 -
 .../styles/sections/_sidebar-primary.scss     |   6 +-
 .../styles/sections/_sidebars-toggle.scss     |   6 +-
 .../{ => header_buttons}/_components.py       |   0
 .../header_buttons/_launch.py                 | 322 ++++++++++++++++++
 .../header_buttons/launch.py                  | 221 ------------
 src/sphinx_book_theme/margin/__init__.py      |   0
 .../{ => margin}/_transforms.py               |   2 +-
 src/sphinx_book_theme/{ => margin}/nodes.py   |   0
 tests/test_build.py                           |  68 +++-
 tests/test_build/header-article.html          |  26 +-
 .../header-article__launch-buttons.html       |  12 +-
 ...eader-article__repo-buttons--all-off.html} |  10 +-
 ...header-article__repo-buttons--all-on.html} |  20 +-
 ...-article__repo-buttons--custom-branch.html |  18 +-
 ...header-article__repo-buttons--one-on.html} |  12 +-
 ...ar-secondary--page-onetitlenoheadings.html |   2 -
 22 files changed, 581 insertions(+), 425 deletions(-)
 rename src/sphinx_book_theme/{ => header_buttons}/_components.py (100%)
 create mode 100644 src/sphinx_book_theme/header_buttons/_launch.py
 delete mode 100644 src/sphinx_book_theme/header_buttons/launch.py
 create mode 100644 src/sphinx_book_theme/margin/__init__.py
 rename src/sphinx_book_theme/{ => margin}/_transforms.py (100%)
 rename src/sphinx_book_theme/{ => margin}/nodes.py (100%)
 rename tests/test_build/{header__repo-buttons--all-off.html => header-article__repo-buttons--all-off.html} (68%)
 rename tests/test_build/{header__repo-buttons--all-on.html => header-article__repo-buttons--all-on.html} (75%)
 rename tests/test_build/{header__repo-buttons--one-on.html => header-article__repo-buttons--one-on.html} (68%)
 delete mode 100644 tests/test_build/sidebar-secondary--page-onetitlenoheadings.html

diff --git a/docs/conf.py b/docs/conf.py
index bf99fb73..dcf1a66f 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -99,25 +99,40 @@
 html_static_path = ["_static"]
 html_css_files = ["custom.css"]
 jupyter_execute_notebooks = "cache"
-thebe_config = {
-    "repository_url": "https://github.com/binder-examples/jupyter-stacks-datascience",
-    "repository_branch": "master",
-}
 
 header_config = safe_load(Path("./_data/config-header.yml").read_text())
 
 html_theme_options = {
     "path_to_docs": "docs",
     "repository_url": "https://github.com/executablebooks/sphinx-book-theme",
+    "repository_branch": "master",
     # "repository_branch": "gh-pages",  # For testing
-    "launch_buttons": {
-        "binderhub_url": "https://mybinder.org",
-        "colab_url": "https://colab.research.google.com/",
-        "deepnote_url": "https://deepnote.com/",
-        "notebook_interface": "jupyterlab",
-        "thebe": True,
-        # "jupyterhub_url": "https://datahub.berkeley.edu",  # For testing
-    },
+    "launch_buttons": [
+        {
+            "type": "binderhub",
+            "hub_url": "https://mybinder.org",
+            "notebook_interface": "jupyterlab",
+            "content": "Launch in Lab",
+        },
+        {
+            "type": "binderhub",
+            "hub_url": "https://mybinder.org",
+            "notebook_interface": "classic",
+            "content": "Launch in Notebook",
+        },
+        {
+            "type": "jupyterhub",
+            "hub_url": "https://datahub.berkeley.edu",
+        },  # For testing
+        {"type": "colab"},
+        {"type": "deepnote"},
+        {
+            "type": "thebe",
+            "hub_url": "https://mybinder.org",
+            "repository_url": "https://github.com/binder-examples/jupyter-stacks-datascience",  # noqa
+            "repository_branch": "master",
+        },
+    ],
     "use_edit_page_button": True,
     "use_issues_button": True,
     "use_repository_button": True,
diff --git a/docs/launch.md b/docs/launch.md
index 476f8077..ca6ff301 100644
--- a/docs/launch.md
+++ b/docs/launch.md
@@ -1,19 +1,25 @@
 (customize:launch)=
 # Launch buttons for interactivity
 
-You can automatically add buttons that allow users to interact with your
-book's content. This is either by directing them to a BinderHub or JupyterHub
-that runs in the cloud, or by making your page interactive using Thebe.
+Launch buttons are a way to connect pages have computational content with environments that let readers execute and edit code interactively.
+These use a variety of services that connect the user with a live kernel.
 
-To use either Binder or JupyterHub links, you'll first need to configure your
-documentation's repository url:
+## Common configuration
+
+There is some configuration that will be applied to almost all launch buttons.
+To **over-ride these global values for each button**, you can manually specify different values within each launch button's configuration.
+
+Here are the global configuration variables:
 
 ```python
 html_theme_options = {
     ...
+    # The location of your documentation relative to the repository root
+    "path_to_docs": "docs/",
+    # The URL where your documentation's content exists
     "repository_url": "https://github.com/{your-docs-url}",
+    # The branch where your documentation's content exists
     "repository_branch": "{your-branch}",
-    "path_to_docs": "{path-relative-to-site-root},
     ...
 }
 ```
@@ -26,110 +32,102 @@ folder as your content, then Binder/JupyterHub links will point to the ipynb
 file instead of the text file.
 ```
 
-## Binder / BinderHub
-
-To add Binder links your page, add the following configuration:
-
-```python
-html_theme_options = {
-    ...
-    "launch_buttons": {
-        "binderhub_url": "https://{your-binderhub-url}"
-    },
-    ...
-}
-```
+## Launch button configuration structure
 
-## JupyterHub
+Add launch buttons added by providing a **list of launch button configuration dictionaries** to the `html_theme_options.launch_buttons` configuration.
 
-To add JupyterHub links to your page, add the following configuration:
+For example, the following configuration specifies two different kinds of JupyterHub buttons:
 
 ```python
 html_theme_options = {
-    ...
-    "launch_buttons": {
-        "jupyterhub_url": "https://{your-binderhub-url}"
-    },
-    ...
+    "launch_buttons": [
+        {
+            "type": "jupyterhubhub",
+            "hub_url": "https://myjupyterhub.org",
+        },
+        {
+            "type": "jupyterhub",
+            "hub_url": "https://myotherjupyterhub.org",,
+        },
+    ]
 }
 ```
 
-## Google Colab
+There is some configuration that is specific to a given launch button, described below.
+The remaining sections of this page describe how to add various launch buttons.
 
-To add Google Colab links to your page, add the following configuration:
+## Binder / BinderHub
+
+To add Binder links your page, add the following configuration:
 
 ```python
 html_theme_options = {
-    ...
-    "launch_buttons": {
-        "colab_url": "https://{your-colab-url}"
-    },
-    ...
+    "launch_buttons": [
+        ...,
+        {
+            # Specifies a binderhub launch button
+            "type": "binderhub",
+            # The URL of the binderhub where a session is launched
+            "hub_url": "https://{your-binderhub-url}",
+            # The notebook interface used when somebody clicks on a launch button.
+            # Must be one of `jupyterlab` or `classic`
+            "notebook_interface": "jupyterlab",
+        },
+        ...
+    ]
 }
 ```
-## Deepnote
 
-To add [Deepnote](https://deepnote.com) links to your page, add the following configuration:
+## JupyterHub
+
+To add JupyterHub links to your page, add the following configuration:
 
 ```python
 html_theme_options = {
-    ...
-    "launch_buttons": {
-        "deepnote_url": "https://deepnote.com"
-    },
-    ...
+    "launch_buttons": [
+        ...,
+        {
+            # Specifies a jupyterhub launch button
+            "type": "jupyterhub",
+            # The URL of the hub where a session is launched
+            "hub_url": "https://{your-jupyterhub-url}",
+            # The notebook interface used when somebody clicks on a launch button.
+            # Must be one of `jupyterlab` or `classic`
+            "notebook_interface": "jupyterlab",
+        },
+        ...
+    ]
 }
 ```
 
-```{warning}
-This will create a new Deepnote project every time you click the launch button.
-```
-
 
-## Live code cells with Thebe
+## Interactive code cells with Thebe
 
 [Thebe](http://thebe.readthedocs.org/) converts your static code blocks into
-*interactive* code blocks powered by a Jupyter kernel. It does this by asking for a BinderHub kernel
-*under the hood* and converts all of your
-code cells into *interactive* code cells. This allows users to run the code on
-your page without leaving the page.
+*interactive* code blocks powered by a Jupyter kernel.
+It does this by asking for a BinderHub kernel *under the hood* and converts all of your code cells into *interactive* code cells.
+This allows users to run the code on your page without leaving the page.
 
-You can use the Sphinx extension
-[`sphinx-thebe`](https://sphinx-thebe.readthedocs.io/en/latest/) to add
-live code functionality to your documentation. You can install `sphinx-thebe` from `pip`,
-then activate it by putting it in your `conf.py` extensions list:
+To use interactive code cells, first ensure that [`sphinx-thebe`](https://sphinx-thebe.readthedocs.io/en/latest/) is installed:
 
-```python
-extensions = [
-    ...
-    "sphinx_thebe"
-    ...
-]
+```console
+$ pip install sphinx-thebe
 ```
 
-If you'd like to activate UI elements for `sphinx-thebe` in the `sphinx-book-theme`,
-add the following theme configuration:
+To add a {guilabel}`Interactive Code` button to your launch buttons, use the following configuration:
 
 ```python
 html_theme_options = {
-    ...
-    "launch_buttons": {
-        "thebe": True,
-    },
-    ...
-}
-```
-
-This will add a custom launch button and some UI elements will be added for Thebe.
-
-If you also specify a `repository_url` with your theme configuration, `sphinx-thebe`
-will use this repository for its environment:
-
-```python
-html_theme_options = {
-    ...
-    "repository_url": "https://github.com/{your-docs-url}",
-    ...
+    "launch_buttons": [
+        ...,
+        {
+            # Specifies a jupyterhub launch button
+            "type": "thebe",
+            # The URL of the binderhub that will serve your kernel
+            "hub_url": "https://{your-jupyterhub-url}",
+        },
+        ...
+    ]
 }
 ```
 
@@ -140,29 +138,37 @@ configuration. See the [`sphinx-thebe`](https://sphinx-thebe.readthedocs.io/en/l
 documentation for what you can configure.
 ```
 
-## Configure a relative path to your source file
 
-To configure a relative path to your documentation, add the following configuration:
+## Google Colab
+
+To add Google Colab links to your page, add the following configuration:
 
 ```python
 html_theme_options = {
-    ...
-    "path_to_docs" = "{path-relative-to-repo-root}"
-    ...
+    "launch_buttons": [
+        ...,
+        {
+            "type": "colab",
+        },
+        ...
+    ]
 }
 ```
 
-## Control the user interface that is opened
+## Deepnote
 
-You can control the interface that is opened when somebody clicks on a launch button.
-To do so, add the following configuration:
+To add [Deepnote](https://deepnote.com) links to your page, add the following configuration:
 
 ```python
 html_theme_options = {
     ...
     "launch_buttons": {
-        "notebook_interface": "jupyterlab",
+        "type": "deepnote",
     },
     ...
 }
 ```
+
+```{warning}
+This will create a new Deepnote project every time you click the launch button.
+```
diff --git a/src/sphinx_book_theme/__init__.py b/src/sphinx_book_theme/__init__.py
index ae17a4c4..1e15ed6f 100644
--- a/src/sphinx_book_theme/__init__.py
+++ b/src/sphinx_book_theme/__init__.py
@@ -10,11 +10,11 @@
 from sphinx.locale import get_translation
 from sphinx.util import logging
 
-from .nodes import SideNoteNode
+from .margin.nodes import SideNoteNode
 from .header_buttons import prep_header_buttons, add_header_buttons
-from .header_buttons.launch import add_launch_buttons
-from ._transforms import HandleFootnoteTransform
-from ._components import COMPONENT_FUNCS
+from .header_buttons._launch import add_launch_buttons, update_launch_button_config
+from .margin._transforms import HandleFootnoteTransform
+from .header_buttons._components import COMPONENT_FUNCS
 
 __version__ = "0.3.2"
 """sphinx-book-theme version"""
@@ -131,40 +131,6 @@ def hash_html_assets(app, pagename, templatename, context, doctree):
     hash_assets_for_files(assets, get_html_theme_path() / "static", context)
 
 
-def update_thebe_config(app):
-    """Update thebe configuration with SBT-specific values"""
-    theme_options = app.env.config.html_theme_options
-    if theme_options.get("launch_buttons", {}).get("thebe") is True:
-        if not hasattr(app.env.config, "thebe_config"):
-            SPHINX_LOGGER.warning(
-                (
-                    "Thebe is activated but not added to extensions list. "
-                    "Add `sphinx_thebe` to your site's extensions list."
-                )
-            )
-            return
-        # Will be empty if it doesn't exist
-        thebe_config = app.env.config.thebe_config
-    else:
-        return
-
-    if not theme_options.get("launch_buttons", {}).get("thebe"):
-        return
-
-    # Update the repository branch and URL
-    # Assume that if there's already a thebe_config, then we don't want to over-ride
-    if "repository_url" not in thebe_config:
-        thebe_config["repository_url"] = theme_options.get("repository_url")
-    if "repository_branch" not in thebe_config:
-        branch = theme_options.get("repository_branch")
-        if not branch:
-            # Explicitly check in case branch is ""
-            branch = "master"
-        thebe_config["repository_branch"] = branch
-
-    app.env.config.thebe_config = thebe_config
-
-
 class Margin(Sidebar):
     """Goes in the margin to the right of the page."""
 
@@ -195,7 +161,7 @@ def setup(app: Sphinx):
     app.add_message_catalog(MESSAGE_CATALOG_NAME, locale_dir)
 
     # Events
-    app.connect("builder-inited", update_thebe_config)
+    app.connect("builder-inited", update_launch_button_config)
     app.connect("html-page-context", add_metadata_to_page)
     app.connect("html-page-context", hash_html_assets)
 
diff --git a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
index 92155c58..5e61c927 100644
--- a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
+++ b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
@@ -20,9 +20,9 @@ $zindex-offcanvas: 1100; // We increase this to be over the tooltips
 
 // Spacing
 $header-article-height: 3em;
-$leftbar-width-mobile: 75%;
-$leftbar-width-wide: 275px;
-$leftbar-padding: 1rem 1rem 0 1.5rem;
+$sidebar-primary-width-mobile: 75%;
+$sidebar-primary-width-wide: 275px;
+$sidebar-primary-padding: 1rem 1rem 0 1.5rem;
 $toc-width-mobile: 75%;
 // Main content, to leave room for the margin
 $content-max-width: 70%;
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index 899a5c9d..8c66e692 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -48,6 +48,10 @@ div.dropdown {
     // Copied from dropdown menu style above
     border-radius: $box-border-radius;
     box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
+    min-width: 13rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
 
     button {
       display: flex;
@@ -98,6 +102,11 @@ div.dropdown {
   .btn__icon-container + .btn__content-container {
     margin-left: 0.5rem;
   }
+
+  // Over-rides a pydata theme default to center it
+  .btn__content-container {
+    text-align: left;
+  }
 }
 
 // If no content, make the icon a bit bigger
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header.scss b/src/sphinx_book_theme/assets/styles/sections/_header.scss
index 2dcd27cf..aabda23e 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header.scss
@@ -122,7 +122,6 @@ input#__header {
 
 .header__start,
 .header__end {
-  // Solo icon buttons should be a bit bigger
   .icon-button-no-content {
     font-size: 1.5rem;
   }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
index 82b4c813..eaaa5634 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
@@ -3,7 +3,7 @@
 *********************************************/
 #site-navigation {
   padding-top: 0;
-  width: $leftbar-width-wide;
+  width: $sidebar-primary-width-wide;
   font-size: var(--sbt-sidebar-font-size);
   top: 0px;
   background: white;
@@ -16,7 +16,7 @@
   // On mobile, behave like a slide-out drawer
   @media (max-width: $breakpoint-md) {
     position: fixed;
-    width: $leftbar-width-mobile;
+    width: $sidebar-primary-width-mobile;
     max-width: 300px;
     font-size: var(--sbt-font-size-menu-mobile);
     z-index: $zindex-offcanvas;
@@ -35,7 +35,7 @@
   // Apply some basic padding so the dropdown buttons don't overlap w/ scrollbar
   .bd-sidebar__top,
   .bd-sidebar__bottom {
-    padding: $leftbar-padding;
+    padding: $sidebar-primary-padding;
   }
 
   // This should always snap to the bottom even if there's no sidebar content
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss
index 4d1ecbe9..1f24faac 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss
@@ -13,7 +13,7 @@ input#__navigation {
       & ~ .container-xl #site-navigation {
         visibility: hidden;
         opacity: 0;
-        margin-left: -$leftbar-width-wide;
+        margin-left: -$sidebar-primary-width-wide;
       }
 
       // When we hide the sidebar on widescreen, add some padding to content
@@ -29,7 +29,7 @@ input#__navigation {
     &:not(:checked) ~ .container-xl #site-navigation {
       visibility: hidden;
       opacity: 0;
-      margin-left: -$leftbar-width-mobile;
+      margin-left: -$sidebar-primary-width-mobile;
     }
   }
 }
@@ -40,7 +40,7 @@ input#__page-toc {
     &:not(:checked) ~ .container-xl .bd-toc {
       visibility: hidden;
       opacity: 0;
-      margin-right: -$leftbar-width-mobile;
+      margin-right: -$sidebar-primary-width-mobile;
     }
   }
 }
diff --git a/src/sphinx_book_theme/_components.py b/src/sphinx_book_theme/header_buttons/_components.py
similarity index 100%
rename from src/sphinx_book_theme/_components.py
rename to src/sphinx_book_theme/header_buttons/_components.py
diff --git a/src/sphinx_book_theme/header_buttons/_launch.py b/src/sphinx_book_theme/header_buttons/_launch.py
new file mode 100644
index 00000000..1a2201aa
--- /dev/null
+++ b/src/sphinx_book_theme/header_buttons/_launch.py
@@ -0,0 +1,322 @@
+from pathlib import Path
+from typing import Any, Dict, Optional
+from urllib.parse import urlencode
+
+from docutils.nodes import document
+from sphinx.application import Sphinx
+from sphinx.util import logging
+from shutil import copy2
+
+
+SPHINX_LOGGER = logging.getLogger(__name__)
+
+
+def add_launch_buttons(
+    app: Sphinx,
+    pagename: str,
+    templatename: str,
+    context: Dict[str, Any],
+    doctree: Optional[document],
+):
+    """Builds a binder link and inserts it in HTML context for use in templating.
+
+    This is a ``html-page-context`` sphinx event (see :ref:`sphinx:events`).
+
+    :param pagename: The sphinx docname related to the page
+    :param context: A dictionary of values that are given to the template engine,
+        to render the page and can be modified to include custom values.
+    :param doctree: A doctree when the page is created from a reST documents;
+        it will be None when the page is created from an HTML template alone.
+
+    """
+
+    # We only need to run this if the page is a notebook
+    config_theme = app.config["html_theme_options"]
+    launch_buttons = config_theme.get("launch_buttons", {})
+    if not launch_buttons or not _is_notebook(app, pagename):
+        return
+
+    # If we have a Jupytext markdown notebook
+    # Check whether an .ipynb version exists and add a link if so
+    if context["sourcename"].endswith(".md") or context["sourcename"].endswith(
+        ".md.txt"
+    ):
+        # Figure out the folders we want
+        out_dir = Path(app.outdir)
+        build_dir = out_dir.parent
+        ntbk_dir = build_dir.joinpath("jupyter_execute")
+        sources_dir = out_dir.joinpath("_sources")
+        # Paths to old and new notebooks
+        path_ntbk = ntbk_dir.joinpath(pagename).with_suffix(".ipynb")
+        path_new_notebook = sources_dir.joinpath(pagename).with_suffix(".ipynb")
+        # Copy the notebook to `_sources` dir so it can be downloaded
+        path_new_notebook.parent.mkdir(exist_ok=True, parents=True)
+        copy2(path_ntbk, path_new_notebook)
+        context["ipynb_source"] = pagename + ".ipynb"
+
+    # Check if we have a non-ipynb file, but an ipynb of same name exists
+    # If so, we'll use the ipynb extension instead of the text extension
+    path = app.env.doc2path(pagename)
+    extension = Path(path).suffix
+    if extension != ".ipynb" and Path(path).with_suffix(".ipynb").exists():
+        extension = ".ipynb"
+
+    # Theme-level configuration for repository location
+    repo_parts = _get_repo_parts(config_theme)
+    # Check for missing branch and default to main
+    if not repo_parts.get("branch"):
+        repo_parts["branch"] = "main"
+
+    # Path to the source file relative to the repository root
+    book_relpath = config_theme.get("path_to_docs", "").strip("/")
+    if book_relpath != "":
+        book_relpath += "/"
+    path_rel_repo = f"{book_relpath}{pagename}{extension}"
+
+    # Iterate through launch buttons and generate button config for them
+    launch_buttons_configs = []
+    for button in launch_buttons:
+        if button.get("type") == "binderhub":
+            hub_url = button.get("hub_url")
+            if not hub_url:
+                raise ValueError(f"No `hub_url` given: {button}")
+            interface = button.get("notebook_interface", "classic")
+
+            # This will only update keys if they've been given
+            repo_parts.update(_get_repo_parts(button))
+            repo_url, org, repo, branch = _check_repo_parts(repo_parts)
+
+            ui_pre = _get_notebook_interface_prefix(interface)
+            url = (
+                f"{hub_url}/v2/gh/{org}/{repo}/{branch}?"
+                f"urlpath={ui_pre}/{path_rel_repo}"
+            )
+            launch_buttons_configs.append(
+                {
+                    "type": "button",
+                    "content": button.get("content", "Binder"),
+                    "title": button.get("title", "Launch on Binder"),
+                    "icon": "_static/images/logo_binder.svg",
+                    "url": url,
+                }
+            )
+
+        if button.get("type") == "jupyterhub":
+            hub_url = button.get("hub_url")
+            if not hub_url:
+                raise ValueError(f"No `hub_url` given: {button}")
+            interface = button.get("notebook_interface", "classic")
+            ui_pre = _get_notebook_interface_prefix(interface)
+
+            # This will only update keys if they've been given
+            repo_parts.update(_get_repo_parts(button))
+            repo_url, org, repo, branch = _check_repo_parts(repo_parts)
+
+            url_params = urlencode(
+                dict(
+                    repo=repo_url,
+                    urlpath=f"{ui_pre}/{repo}/{path_rel_repo}",
+                    branch=branch,
+                ),
+                safe="/",
+            )
+            url = f"{hub_url}/hub/user-redirect/git-pull?{url_params}"
+            launch_buttons_configs.append(
+                {
+                    "type": "button",
+                    "content": button.get("content", "JupyterHub"),
+                    "title": button.get("title", "Launch on JupyterHub"),
+                    "icon": "_static/images/logo_jupyterhub.svg",
+                    "url": url,
+                }
+            )
+
+        if button.get("type") == "colab":
+            url = f"https://colab.research.google.com/github/{org}/{repo}/blob/{branch}/{path_rel_repo}"  # noqa
+            launch_buttons_configs.append(
+                {
+                    "type": "button",
+                    "content": "Colab",
+                    "title": "Launch on Colab",
+                    "icon": "_static/images/logo_colab.png",
+                    "url": url,
+                }
+            )
+
+        if button.get("type") == "deepnote":
+            github_path = f"%2F{org}%2F{repo}%2Fblob%2F{branch}%2F{path_rel_repo}"
+            url = (
+                f"https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com{github_path}"
+            )
+            launch_buttons_configs.append(
+                {
+                    "type": "button",
+                    "content": "Deepnote",
+                    "title": "Launch on Deepnote",
+                    "icon": "_static/images/logo_deepnote.svg",
+                    "url": url,
+                }
+            )
+
+        if button.get("type") == "thebe":
+            # Note that the thebe config will have already been initialized.
+            launch_buttons_configs.append(
+                {
+                    "type": "button",
+                    "content": "Interactive code",
+                    "title": "Interactive code",
+                    "onclick": "initThebeSBT()",
+                    "icon": "fas fa-play",
+                }
+            )
+            context["use_thebe"] = True
+
+    # Add the dropdown to our header buttons list
+    for lb in launch_buttons_configs:
+        lb["tooltip_placement"] = "left"
+
+    context["header_buttons"].append(
+        {
+            "type": "dropdown",
+            "icon": "fas fa-rocket",
+            "side": "right",
+            "classes": ["launch-buttons"],
+            "items": launch_buttons_configs,
+        }
+    )
+
+
+def _split_repo_url(url):
+    """Split a repository URL into an org / repo combination."""
+    if "github.com/" in url:
+        end = url.split("github.com/")[-1]
+        org, repo = end.split("/")[:2]
+    else:
+        SPHINX_LOGGER.warning(
+            f"Currently Binder/JupyterHub repositories must be on GitHub, got {url}"
+        )
+        org = repo = None
+    return org, repo
+
+
+def _get_repo_parts(config):
+    """Return metadata about a repository based on a configuration file.
+
+    Used to generate launch button URLs.
+    """
+    # Use an empty config so we only add key/vals if the val exists
+    repo_parts = {}
+
+    # Repository URL is used to infer the org/repo
+    repo_url = config.get("repository_url")
+
+    # Check to make sure that the URL is properly formed
+    if repo_url:
+        repo_parts["url"] = repo_url
+        org, repo = _split_repo_url(repo_url)
+        if org is None or repo is None:
+            # Skip the rest because the repo_url isn't right
+            SPHINX_LOGGER.warn(f"Repository URL {repo_url} is not properly structured.")
+            return
+        repo_parts["org"] = org
+        repo_parts["repo"] = repo
+
+    # The branch is given separately
+    branch = config.get("repository_branch")
+    if branch:
+        repo_parts["branch"] = branch
+
+    return repo_parts
+
+
+def _is_notebook(app, pagename):
+    return app.env.metadata[pagename].get("kernelspec")
+
+
+def _check_repo_parts(parts):
+    """Check that all parts of a launch button URL are present."""
+    if not parts.get("url"):
+        raise ValueError(
+            "You must provide the key: `repository_url` to use launch buttons."
+        )
+    elif not parts.get("org") or not parts.get("repo"):
+        raise ValueError(
+            (
+                "Couldn't infer an org / repo from the repo url. "
+                f"Check it is correct: {parts}"
+            )
+        )
+    elif not parts.get("branch"):
+        raise ValueError("No branch specified for launch buttons.")
+
+    return parts.get("url"), parts.get("org"), parts.get("repo"), parts.get("branch")
+
+
+def _get_notebook_interface_prefix(interface):
+    """Generate the correct URL prefix for a Binder/Hub URL given an interface."""
+    # Construct the extra URL parts (app and relative path)
+    notebook_interface_prefixes = {"classic": "tree", "jupyterlab": "lab/tree"}
+    if interface not in notebook_interface_prefixes:
+        raise ValueError(
+            (
+                "Notebook UI for Binder/JupyterHub links must be one"
+                f"of {tuple(notebook_interface_prefixes.keys())},"
+                f"not {interface}"
+            )
+        )
+    ui_pre = notebook_interface_prefixes[interface]
+    return ui_pre
+
+
+def update_launch_button_config(app):
+    """If a thebe launch button is specified, activate thebe and add configuration."""
+    theme_options = app.env.config.html_theme_options
+    launch_buttons = theme_options.get("launch_buttons", [])
+
+    # DEPRECATE after 0.5
+    # Old versions had people give dictionary to configure launch buttons
+    # New versions use a list of launch button configuration
+    # So we check for the old-style dictionary and convert it to new style
+    if isinstance(launch_buttons, dict):
+        SPHINX_LOGGER.warn(
+            "Launch buttons are now configured with a list of buttons, rather than a dictionary. Dictionary config will be deprecated in v0.5"  # noqa
+        )
+        launch_buttons_new = []
+        for kind, url in launch_buttons.items():
+            if kind == "thebe":
+                url = theme_options.get("repository_url")
+
+            # Convert the type:url dict into a generic key:val dict we use later
+            launch_buttons_new.append(
+                {"type": kind.split("_")[0], "url": url.strip("/")}
+            )
+        theme_options["launch_buttons"] = launch_buttons = launch_buttons_new
+
+    # If any of our launch buttons adds thebe, configure sphinx-thebe here
+    for button in launch_buttons:
+        # If the button isn't a thebe type, we have nothing to do
+        if not button["type"] == "thebe":
+            continue
+
+        # Make sure the sphinx-thebe extension is activated
+        app.setup_extension("sphinx_thebe")
+
+        # This is either the default values or will have config if the user defined it
+        thebe_config = app.env.config.thebe_config
+
+        # Update the thebe config with values given in theme options or button config
+        thebe_config["repository_url"] = theme_options.get("repository_url")
+        if button.get("repository_url"):
+            thebe_config["repository_url"] = button.get("repository_url")
+
+        branch = theme_options.get("repository_url")
+        if button.get("repository_branch"):
+            branch = button.get("repository_branch")
+        if not branch:
+            # Explicitly check in case branch is ""
+            SPHINX_LOGGER.warn("No thebe branch specified. Using 'main'.")
+            branch = "main"
+        thebe_config["repository_branch"] = branch
+
+        # Update the thebe_config with the new values
+        app.env.config.thebe_config = thebe_config
diff --git a/src/sphinx_book_theme/header_buttons/launch.py b/src/sphinx_book_theme/header_buttons/launch.py
deleted file mode 100644
index af58ac8e..00000000
--- a/src/sphinx_book_theme/header_buttons/launch.py
+++ /dev/null
@@ -1,221 +0,0 @@
-from pathlib import Path
-from typing import Any, Dict, Optional
-from urllib.parse import urlencode
-
-from docutils.nodes import document
-from sphinx.application import Sphinx
-from sphinx.util import logging
-from shutil import copy2
-
-
-SPHINX_LOGGER = logging.getLogger(__name__)
-
-
-def add_launch_buttons(
-    app: Sphinx,
-    pagename: str,
-    templatename: str,
-    context: Dict[str, Any],
-    doctree: Optional[document],
-):
-    """Builds a binder link and inserts it in HTML context for use in templating.
-
-    This is a ``html-page-context`` sphinx event (see :ref:`sphinx:events`).
-
-    :param pagename: The sphinx docname related to the page
-    :param context: A dictionary of values that are given to the template engine,
-        to render the page and can be modified to include custom values.
-    :param doctree: A doctree when the page is created from a reST documents;
-        it will be None when the page is created from an HTML template alone.
-
-    """
-
-    # First decide if we'll insert any links
-    path = app.env.doc2path(pagename)
-    extension = Path(path).suffix
-
-    # If so, insert the URLs depending on the configuration
-    config_theme = app.config["html_theme_options"]
-    launch_buttons = config_theme.get("launch_buttons", {})
-    if not launch_buttons or not _is_notebook(app, pagename):
-        return
-
-    # Grab the header buttons from context as it should already exist.
-    header_buttons = context["header_buttons"]
-
-    # Check if we have a markdown notebook, and if so then add a link to the context
-    if _is_notebook(app, pagename) and (
-        context["sourcename"].endswith(".md")
-        or context["sourcename"].endswith(".md.txt")
-    ):
-        # Figure out the folders we want
-        out_dir = Path(app.outdir)
-        build_dir = out_dir.parent
-        ntbk_dir = build_dir.joinpath("jupyter_execute")
-        sources_dir = out_dir.joinpath("_sources")
-        # Paths to old and new notebooks
-        path_ntbk = ntbk_dir.joinpath(pagename).with_suffix(".ipynb")
-        path_new_notebook = sources_dir.joinpath(pagename).with_suffix(".ipynb")
-        # Copy the notebook to `_sources` dir so it can be downloaded
-        path_new_notebook.parent.mkdir(exist_ok=True, parents=True)
-        copy2(path_ntbk, path_new_notebook)
-        context["ipynb_source"] = pagename + ".ipynb"
-
-    repo_url = _get_repo_url(config_theme)
-
-    # Parse the repo parts from the URL
-    org, repo = _split_repo_url(repo_url)
-    if org is None and repo is None:
-        # Skip the rest because the repo_url isn't right
-        return
-
-    branch = _get_branch(config_theme)
-
-    # Construct the extra URL parts (app and relative path)
-    notebook_interface_prefixes = {"classic": "tree", "jupyterlab": "lab/tree"}
-    notebook_interface = launch_buttons.get("notebook_interface", "classic")
-    if notebook_interface not in notebook_interface_prefixes:
-        raise ValueError(
-            (
-                "Notebook UI for Binder/JupyterHub links must be one"
-                f"of {tuple(notebook_interface_prefixes.keys())},"
-                f"not {notebook_interface}"
-            )
-        )
-    ui_pre = notebook_interface_prefixes[notebook_interface]
-
-    # Check if we have a non-ipynb file, but an ipynb of same name exists
-    # If so, we'll use the ipynb extension instead of the text extension
-    if extension != ".ipynb" and Path(path).with_suffix(".ipynb").exists():
-        extension = ".ipynb"
-
-    # Construct a path to the file relative to the repository root
-    book_relpath = config_theme.get("path_to_docs", "").strip("/")
-    if book_relpath != "":
-        book_relpath += "/"
-    path_rel_repo = f"{book_relpath}{pagename}{extension}"
-
-    # Container for launch buttons
-    launch_buttons_list = []
-
-    # Now build infrastructure-specific links
-    jupyterhub_url = launch_buttons.get("jupyterhub_url", "").strip("/")
-    binderhub_url = launch_buttons.get("binderhub_url", "").strip("/")
-    colab_url = launch_buttons.get("colab_url", "").strip("/")
-    deepnote_url = launch_buttons.get("deepnote_url", "").strip("/")
-    if binderhub_url:
-        url = (
-            f"{binderhub_url}/v2/gh/{org}/{repo}/{branch}?"
-            f"urlpath={ui_pre}/{path_rel_repo}"
-        )
-        launch_buttons_list.append(
-            {
-                "type": "button",
-                "content": "Binder",
-                "title": "Launch on Binder",
-                "icon": "_static/images/logo_binder.svg",
-                "url": url,
-            }
-        )
-
-    if jupyterhub_url:
-        url_params = urlencode(
-            dict(
-                repo=repo_url, urlpath=f"{ui_pre}/{repo}/{path_rel_repo}", branch=branch
-            ),
-            safe="/",
-        )
-        url = f"{jupyterhub_url}/hub/user-redirect/git-pull?{url_params}"
-        launch_buttons_list.append(
-            {
-                "type": "button",
-                "content": "JupyterHub",
-                "title": "Launch on JupyterHub",
-                "icon": "_static/images/logo_jupyterhub.svg",
-                "url": url,
-            }
-        )
-
-    if colab_url:
-        url = f"{colab_url}/github/{org}/{repo}/blob/{branch}/{path_rel_repo}"
-        launch_buttons_list.append(
-            {
-                "type": "button",
-                "content": "Colab",
-                "title": "Launch on Colab",
-                "icon": "_static/images/logo_colab.png",
-                "url": url,
-            }
-        )
-
-    if deepnote_url:
-        github_path = f"%2F{org}%2F{repo}%2Fblob%2F{branch}%2F{path_rel_repo}"
-        url = f"{deepnote_url}/launch?url=https%3A%2F%2Fgithub.com{github_path}"
-        launch_buttons_list.append(
-            {
-                "type": "button",
-                "content": "Deepnote",
-                "title": "Launch on Deepnote",
-                "icon": "_static/images/logo_deepnote.svg",
-                "url": url,
-            }
-        )
-
-    # Add thebe flag in context
-    if launch_buttons.get("thebe", False):
-        launch_buttons_list.append(
-            {
-                "type": "button",
-                "content": "Live Code",
-                "title": "Launch Thebe",
-                "onclick": "initThebeSBT()",
-                "icon": "fas fa-play",
-            }
-        )
-        context["use_thebe"] = True
-
-    # Add the buttons to header_buttons
-    for lb in launch_buttons_list:
-        lb["tooltip_placement"] = "left"
-    header_buttons.append(
-        {
-            "type": "dropdown",
-            "icon": "fas fa-rocket",
-            "side": "right",
-            "classes": ["launch-buttons"],
-            "items": launch_buttons_list,
-        }
-    )
-
-
-def _split_repo_url(url):
-    """Split a repository URL into an org / repo combination."""
-    if "github.com/" in url:
-        end = url.split("github.com/")[-1]
-        org, repo = end.split("/")[:2]
-    else:
-        SPHINX_LOGGER.warning(
-            f"Currently Binder/JupyterHub repositories must be on GitHub, got {url}"
-        )
-        org = repo = None
-    return org, repo
-
-
-def _get_repo_url(config):
-    repo_url = config.get("repository_url")
-    if not repo_url:
-        raise ValueError(
-            "You must provide the key: `repository_url` to use launch buttons."
-        )
-    return repo_url
-
-
-def _is_notebook(app, pagename):
-    return app.env.metadata[pagename].get("kernelspec")
-
-
-def _get_branch(config_theme):
-    branch = config_theme.get("repository_branch")
-    if not branch:
-        branch = "master"
-    return branch
diff --git a/src/sphinx_book_theme/margin/__init__.py b/src/sphinx_book_theme/margin/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/src/sphinx_book_theme/_transforms.py b/src/sphinx_book_theme/margin/_transforms.py
similarity index 100%
rename from src/sphinx_book_theme/_transforms.py
rename to src/sphinx_book_theme/margin/_transforms.py
index 1b5dc2d1..6d73721a 100644
--- a/src/sphinx_book_theme/_transforms.py
+++ b/src/sphinx_book_theme/margin/_transforms.py
@@ -2,8 +2,8 @@
 from typing import Any
 from docutils import nodes as docutil_nodes
 from sphinx import addnodes as sphinx_nodes
-from .nodes import SideNoteNode
 import copy
+from .nodes import SideNoteNode
 
 
 class HandleFootnoteTransform(SphinxPostTransform):
diff --git a/src/sphinx_book_theme/nodes.py b/src/sphinx_book_theme/margin/nodes.py
similarity index 100%
rename from src/sphinx_book_theme/nodes.py
rename to src/sphinx_book_theme/margin/nodes.py
diff --git a/tests/test_build.py b/tests/test_build.py
index 7f1054e3..19800e85 100644
--- a/tests/test_build.py
+++ b/tests/test_build.py
@@ -188,7 +188,7 @@ def test_navbar_options(sphinx_build_factory, option, value):
         (False, False, False, "all-off"),
     ],
 )
-def test_header_repository_buttons(
+def test_header_article_repository_buttons(
     sphinx_build_factory, file_regression, edit, repo, issues, name
 ):
     # All buttons on
@@ -209,7 +209,7 @@ def test_header_repository_buttons(
     )
     file_regression.check(
         header[0].prettify(),
-        basename=f"header__repo-buttons--{name}",
+        basename=f"header-article__repo-buttons--{name}",
         extension=".html",
         encoding="utf8",
     )
@@ -288,7 +288,7 @@ def test_show_navbar_depth(sphinx_build_factory):
         assert "checked" not in checkbox.attrs
 
 
-def test_header_download_button_off(sphinx_build_factory):
+def test_header_article_download_button_off(sphinx_build_factory):
     """Download button should not show up in the header when configured as False."""
     confoverrides = {
         "html_theme_options.use_download_button": False,
@@ -377,3 +377,65 @@ def test_marginnote(sphinx_build_factory, file_regression):
         extension=".html",
         encoding="utf8",
     )
+
+
+def test_header(sphinx_build_factory, file_regression):
+    header_config = {
+        "logo": {
+            "type": "button",
+            "image": "https://executablebooks.org/en/latest/_static/logo.svg",
+            "url": "https://sphinx-book-theme.readthedocs.io",
+        },
+        # Split our component tests between start and end semi-randomly
+        "start": [
+            # Dropdown button
+            {
+                "type": "dropdown",
+                "classes": ["one", "two"],
+                "items": [
+                    {
+                        "type": "link",
+                        "url": "https://google.com",
+                        "content": "Test content 1",
+                    },
+                    {
+                        "type": "link",
+                        "url": "https://google.com/two",
+                        "icon": "fas fa-bars",
+                        "content": "Test content 2",
+                    },
+                ],
+            },
+            # JS button
+            {"type": "button", "onclick": "somejs()", "content": "Some content"},
+        ],
+        "end": [
+            # Link image
+            {"type": "button", "url": "https://google.com", "image": "noimage"},
+            # Icon image (FA)
+            {"type": "button", "url": "https://google.com", "icon": "fas fa-bars"},
+            # Icon image (local)
+            {"type": "button", "url": "https://google.com", "icon": "hi/there.png"},
+            # Local image
+            {"type": "button", "url": "https://google.com", "image": "hi/there.png"},
+            # Remote image
+            {
+                "type": "button",
+                "url": "https://google.com",
+                "icon": "https://google.com/hi/there.png",
+            },
+        ],
+    }
+    confoverrides = {"html_theme_options.header": header_config}
+    sphinx_build = sphinx_build_factory("base", confoverrides=confoverrides).build(
+        assert_pass=True
+    )
+
+    index = sphinx_build.html_tree("index.html")
+    header_html = index.select(".header__content")[0]
+    file_regression.check(
+        header_html.prettify(),
+        basename="header",
+        extension=".html",
+        encoding="utf8",
+    )
diff --git a/tests/test_build/header-article.html b/tests/test_build/header-article.html
index b53e1ab6..d0161dee 100644
--- a/tests/test_build/header-article.html
+++ b/tests/test_build/header-article.html
@@ -1,7 +1,7 @@
 <div class="header-article row sticky-top noprint">
  <div class="col py-1 d-flex header-article-main">
   <div class="header-article__left">
-   <label aria-label="Toggle navigation" class="btn icon-button icon-button-no-content" data-placement="bottom" for="__navigation" title="Toggle navigation" type="button">
+   <label aria-label="Toggle navigation" class="btn icon-button icon-button-no-content" data-placement="bottom" data-toggle="tooltip" for="__navigation" title="Toggle navigation" type="button">
     <span class="btn__icon-container">
      <i class="fas fa-bars">
      </i>
@@ -10,15 +10,15 @@
   </div>
   <div class="header-article__right">
    <div class="dropdown">
-    <button aria-expanded="false" aria-haspopup="true" class="launch-buttons btn icon-button icon-button-no-content" id="menu-dropdown-e2dcd" type="button">
+    <button aria-expanded="false" aria-haspopup="true" class="launch-buttons btn icon-button icon-button-no-content" id="menu-dropdown-de7ea" type="button">
      <span class="btn__icon-container">
       <i class="fas fa-rocket">
       </i>
      </span>
     </button>
-    <div aria-labelledby="menu-dropdown-e2dcd" class="dropdown-menu dropdown-menu-right">
+    <div aria-labelledby="menu-dropdown-de7ea" class="dropdown-menu dropdown-menu-right">
      <a href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb">
-      <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" title="Launch on Binder" type="button">
+      <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on Binder" type="button">
        <span class="btn__icon-container">
         <img src="../_static/images/logo_binder.svg"/>
        </span>
@@ -28,7 +28,7 @@
       </button>
      </a>
      <a href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master">
-      <button aria-label="Launch on JupyterHub" class="btn icon-button" data-placement="left" title="Launch on JupyterHub" type="button">
+      <button aria-label="Launch on JupyterHub" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on JupyterHub" type="button">
        <span class="btn__icon-container">
         <img src="../_static/images/logo_jupyterhub.svg"/>
        </span>
@@ -38,7 +38,7 @@
       </button>
      </a>
      <a href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb">
-      <button aria-label="Launch on Colab" class="btn icon-button" data-placement="left" title="Launch on Colab" type="button">
+      <button aria-label="Launch on Colab" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on Colab" type="button">
        <span class="btn__icon-container">
         <img src="../_static/images/logo_colab.png"/>
        </span>
@@ -48,7 +48,7 @@
       </button>
      </a>
      <a href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb">
-      <button aria-label="Launch on Deepnote" class="btn icon-button" data-placement="left" title="Launch on Deepnote" type="button">
+      <button aria-label="Launch on Deepnote" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on Deepnote" type="button">
        <span class="btn__icon-container">
         <img src="../_static/images/logo_deepnote.svg"/>
        </span>
@@ -57,7 +57,7 @@
        </span>
       </button>
      </a>
-     <button aria-label="Launch Thebe" class="btn icon-button" data-placement="left" onclick="initThebeSBT()" title="Launch Thebe" type="button">
+     <button aria-label="Launch Thebe" class="btn icon-button" data-placement="left" data-toggle="tooltip" onclick="initThebeSBT()" title="Launch Thebe" type="button">
       <span class="btn__icon-container">
        <i class="fas fa-play">
        </i>
@@ -68,22 +68,22 @@
      </button>
     </div>
    </div>
-   <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
+   <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
     <span class="btn__icon-container">
      <i class="fas fa-expand">
      </i>
     </span>
    </button>
    <div class="dropdown">
-    <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+    <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-403a7" type="button">
      <span class="btn__icon-container">
       <i class="fas fa-download">
       </i>
      </span>
     </button>
-    <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+    <div aria-labelledby="menu-dropdown-403a7" class="dropdown-menu dropdown-menu-right">
      <a href="../../_sources/section1/ntbk.ipynb.html">
-      <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+      <button aria-label="Download source file" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Download source file" type="button">
        <span class="btn__icon-container">
         <i class="fas fa-file">
         </i>
@@ -93,7 +93,7 @@
        </span>
       </button>
      </a>
-     <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+     <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF" type="button">
       <span class="btn__icon-container">
        <i class="fas fa-file-pdf">
        </i>
diff --git a/tests/test_build/header-article__launch-buttons.html b/tests/test_build/header-article__launch-buttons.html
index b8861350..4572d60f 100644
--- a/tests/test_build/header-article__launch-buttons.html
+++ b/tests/test_build/header-article__launch-buttons.html
@@ -1,6 +1,6 @@
-<div aria-labelledby="menu-dropdown-e2dcd" class="dropdown-menu dropdown-menu-right">
+<div aria-labelledby="menu-dropdown-de7ea" class="dropdown-menu dropdown-menu-right">
  <a href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb">
-  <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" title="Launch on Binder" type="button">
+  <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on Binder" type="button">
    <span class="btn__icon-container">
     <img src="../_static/images/logo_binder.svg"/>
    </span>
@@ -10,7 +10,7 @@
   </button>
  </a>
  <a href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master">
-  <button aria-label="Launch on JupyterHub" class="btn icon-button" data-placement="left" title="Launch on JupyterHub" type="button">
+  <button aria-label="Launch on JupyterHub" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on JupyterHub" type="button">
    <span class="btn__icon-container">
     <img src="../_static/images/logo_jupyterhub.svg"/>
    </span>
@@ -20,7 +20,7 @@
   </button>
  </a>
  <a href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb">
-  <button aria-label="Launch on Colab" class="btn icon-button" data-placement="left" title="Launch on Colab" type="button">
+  <button aria-label="Launch on Colab" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on Colab" type="button">
    <span class="btn__icon-container">
     <img src="../_static/images/logo_colab.png"/>
    </span>
@@ -30,7 +30,7 @@
   </button>
  </a>
  <a href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb">
-  <button aria-label="Launch on Deepnote" class="btn icon-button" data-placement="left" title="Launch on Deepnote" type="button">
+  <button aria-label="Launch on Deepnote" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on Deepnote" type="button">
    <span class="btn__icon-container">
     <img src="../_static/images/logo_deepnote.svg"/>
    </span>
@@ -39,7 +39,7 @@
    </span>
   </button>
  </a>
- <button aria-label="Launch Thebe" class="btn icon-button" data-placement="left" onclick="initThebeSBT()" title="Launch Thebe" type="button">
+ <button aria-label="Launch Thebe" class="btn icon-button" data-placement="left" data-toggle="tooltip" onclick="initThebeSBT()" title="Launch Thebe" type="button">
   <span class="btn__icon-container">
    <i class="fas fa-play">
    </i>
diff --git a/tests/test_build/header__repo-buttons--all-off.html b/tests/test_build/header-article__repo-buttons--all-off.html
similarity index 68%
rename from tests/test_build/header__repo-buttons--all-off.html
rename to tests/test_build/header-article__repo-buttons--all-off.html
index 1d2252d5..98036f4d 100644
--- a/tests/test_build/header__repo-buttons--all-off.html
+++ b/tests/test_build/header-article__repo-buttons--all-off.html
@@ -1,20 +1,20 @@
 <div class="header-article__right">
- <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
+ <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
   <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
  <div class="dropdown">
-  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-403a7" type="button">
    <span class="btn__icon-container">
     <i class="fas fa-download">
     </i>
    </span>
   </button>
-  <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+  <div aria-labelledby="menu-dropdown-403a7" class="dropdown-menu dropdown-menu-right">
    <a href="../../_sources/section1/ntbk.ipynb.html">
-    <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+    <button aria-label="Download source file" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Download source file" type="button">
      <span class="btn__icon-container">
       <i class="fas fa-file">
       </i>
@@ -24,7 +24,7 @@
      </span>
     </button>
    </a>
-   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF" type="button">
     <span class="btn__icon-container">
      <i class="fas fa-file-pdf">
      </i>
diff --git a/tests/test_build/header__repo-buttons--all-on.html b/tests/test_build/header-article__repo-buttons--all-on.html
similarity index 75%
rename from tests/test_build/header__repo-buttons--all-on.html
rename to tests/test_build/header-article__repo-buttons--all-on.html
index 8e7c2159..53912fb2 100644
--- a/tests/test_build/header__repo-buttons--all-on.html
+++ b/tests/test_build/header-article__repo-buttons--all-on.html
@@ -1,20 +1,20 @@
 <div class="header-article__right">
- <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
+ <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
   <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
  <div class="dropdown">
-  <button aria-expanded="false" aria-haspopup="true" class="repo-buttons btn icon-button icon-button-no-content" id="menu-dropdown-a2522" type="button">
+  <button aria-expanded="false" aria-haspopup="true" class="repo-buttons btn icon-button icon-button-no-content" id="menu-dropdown-888e0" type="button">
    <span class="btn__icon-container">
     <i class="fab fa-github">
     </i>
    </span>
   </button>
-  <div aria-labelledby="menu-dropdown-a2522" class="dropdown-menu dropdown-menu-right">
+  <div aria-labelledby="menu-dropdown-888e0" class="dropdown-menu dropdown-menu-right">
    <a href="https://github.com/executablebooks/sphinx-book-theme">
-    <button aria-label="Source repository" class="btn icon-button" data-placement="left" title="Source repository" type="button">
+    <button aria-label="Source repository" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Source repository" type="button">
      <span class="btn__icon-container">
       <i class="fab fa-github">
       </i>
@@ -25,7 +25,7 @@
     </button>
    </a>
    <a href="https://github.com/executablebooks/sphinx-book-theme/issues/new?title=Issue%20on%20page%20%2Fsection1/ntbk.html&amp;body=Your%20issue%20content%20here.">
-    <button aria-label="Open an issue" class="btn icon-button" data-placement="left" title="Open an issue" type="button">
+    <button aria-label="Open an issue" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Open an issue" type="button">
      <span class="btn__icon-container">
       <i class="fas fa-lightbulb">
       </i>
@@ -36,7 +36,7 @@
     </button>
    </a>
    <a href="https://github.com/executablebooks/sphinx-book-theme/edit/master/section1/ntbk.ipynb">
-    <button aria-label="Edit this page" class="btn icon-button" data-placement="left" title="Edit this page" type="button">
+    <button aria-label="Edit this page" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Edit this page" type="button">
      <span class="btn__icon-container">
       <i class="fas fa-pencil-alt">
       </i>
@@ -49,15 +49,15 @@
   </div>
  </div>
  <div class="dropdown">
-  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-403a7" type="button">
    <span class="btn__icon-container">
     <i class="fas fa-download">
     </i>
    </span>
   </button>
-  <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+  <div aria-labelledby="menu-dropdown-403a7" class="dropdown-menu dropdown-menu-right">
    <a href="../../_sources/section1/ntbk.ipynb.html">
-    <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+    <button aria-label="Download source file" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Download source file" type="button">
      <span class="btn__icon-container">
       <i class="fas fa-file">
       </i>
@@ -67,7 +67,7 @@
      </span>
     </button>
    </a>
-   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF" type="button">
     <span class="btn__icon-container">
      <i class="fas fa-file-pdf">
      </i>
diff --git a/tests/test_build/header-article__repo-buttons--custom-branch.html b/tests/test_build/header-article__repo-buttons--custom-branch.html
index 51548ce6..7e7e21c1 100644
--- a/tests/test_build/header-article__repo-buttons--custom-branch.html
+++ b/tests/test_build/header-article__repo-buttons--custom-branch.html
@@ -1,14 +1,14 @@
 <div class="header-article__right">
  <div class="dropdown">
-  <button aria-expanded="false" aria-haspopup="true" class="launch-buttons btn icon-button icon-button-no-content" id="menu-dropdown-f533c" type="button">
+  <button aria-expanded="false" aria-haspopup="true" class="launch-buttons btn icon-button icon-button-no-content" id="menu-dropdown-ef042" type="button">
    <span class="btn__icon-container">
     <i class="fas fa-rocket">
     </i>
    </span>
   </button>
-  <div aria-labelledby="menu-dropdown-f533c" class="dropdown-menu dropdown-menu-right">
+  <div aria-labelledby="menu-dropdown-ef042" class="dropdown-menu dropdown-menu-right">
    <a href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/foo?urlpath=tree/section1/ntbk.ipynb">
-    <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" title="Launch on Binder" type="button">
+    <button aria-label="Launch on Binder" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Launch on Binder" type="button">
      <span class="btn__icon-container">
       <img src="../_static/images/logo_binder.svg"/>
      </span>
@@ -19,14 +19,14 @@
    </a>
   </div>
  </div>
- <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
+ <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
   <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
  <a href="https://github.com/executablebooks/sphinx-book-theme/edit/foo/section1/ntbk.ipynb">
-  <button aria-label="Edit this page" class="btn icon-button icon-button-no-content" data-placement="bottom" title="Edit this page" type="button">
+  <button aria-label="Edit this page" class="btn icon-button icon-button-no-content" data-placement="bottom" data-toggle="tooltip" title="Edit this page" type="button">
    <span class="btn__icon-container">
     <i class="fas fa-pencil-alt">
     </i>
@@ -34,15 +34,15 @@
   </button>
  </a>
  <div class="dropdown">
-  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-403a7" type="button">
    <span class="btn__icon-container">
     <i class="fas fa-download">
     </i>
    </span>
   </button>
-  <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+  <div aria-labelledby="menu-dropdown-403a7" class="dropdown-menu dropdown-menu-right">
    <a href="../../_sources/section1/ntbk.ipynb.html">
-    <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+    <button aria-label="Download source file" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Download source file" type="button">
      <span class="btn__icon-container">
       <i class="fas fa-file">
       </i>
@@ -52,7 +52,7 @@
      </span>
     </button>
    </a>
-   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF" type="button">
     <span class="btn__icon-container">
      <i class="fas fa-file-pdf">
      </i>
diff --git a/tests/test_build/header__repo-buttons--one-on.html b/tests/test_build/header-article__repo-buttons--one-on.html
similarity index 68%
rename from tests/test_build/header__repo-buttons--one-on.html
rename to tests/test_build/header-article__repo-buttons--one-on.html
index 70ea484d..7e941441 100644
--- a/tests/test_build/header__repo-buttons--one-on.html
+++ b/tests/test_build/header-article__repo-buttons--one-on.html
@@ -1,12 +1,12 @@
 <div class="header-article__right">
- <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
+ <button aria-label="Fullscreen mode" class="btn icon-button icon-button-no-content" data-placement="bottom" data-toggle="tooltip" onclick="toggleFullScreen()" title="Fullscreen mode" type="button">
   <span class="btn__icon-container">
    <i class="fas fa-expand">
    </i>
   </span>
  </button>
  <a href="https://github.com/executablebooks/sphinx-book-theme/edit/master/section1/ntbk.ipynb">
-  <button aria-label="Edit this page" class="btn icon-button icon-button-no-content" data-placement="bottom" title="Edit this page" type="button">
+  <button aria-label="Edit this page" class="btn icon-button icon-button-no-content" data-placement="bottom" data-toggle="tooltip" title="Edit this page" type="button">
    <span class="btn__icon-container">
     <i class="fas fa-pencil-alt">
     </i>
@@ -14,15 +14,15 @@
   </button>
  </a>
  <div class="dropdown">
-  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-fc197" type="button">
+  <button aria-expanded="false" aria-haspopup="true" class="btn icon-button icon-button-no-content" id="menu-dropdown-403a7" type="button">
    <span class="btn__icon-container">
     <i class="fas fa-download">
     </i>
    </span>
   </button>
-  <div aria-labelledby="menu-dropdown-fc197" class="dropdown-menu dropdown-menu-right">
+  <div aria-labelledby="menu-dropdown-403a7" class="dropdown-menu dropdown-menu-right">
    <a href="../../_sources/section1/ntbk.ipynb.html">
-    <button aria-label="Download source file" class="btn icon-button" data-placement="left" title="Download source file" type="button">
+    <button aria-label="Download source file" class="btn icon-button" data-placement="left" data-toggle="tooltip" title="Download source file" type="button">
      <span class="btn__icon-container">
       <i class="fas fa-file">
       </i>
@@ -32,7 +32,7 @@
      </span>
     </button>
    </a>
-   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" onclick="printPdf(this)" title="Print to PDF" type="button">
+   <button aria-label="Print to PDF" class="btn icon-button" data-placement="left" data-toggle="tooltip" onclick="printPdf(this)" title="Print to PDF" type="button">
     <span class="btn__icon-container">
      <i class="fas fa-file-pdf">
      </i>
diff --git a/tests/test_build/sidebar-secondary--page-onetitlenoheadings.html b/tests/test_build/sidebar-secondary--page-onetitlenoheadings.html
deleted file mode 100644
index ec08e7c4..00000000
--- a/tests/test_build/sidebar-secondary--page-onetitlenoheadings.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<div class="col-md-3 bd-toc show noprint">
-</div>