diff --git a/doc/sphinx/_static/cantera-logo.png b/doc/sphinx/_static/cantera-logo.png
deleted file mode 100644
index 424d1375b..000000000
Binary files a/doc/sphinx/_static/cantera-logo.png and /dev/null differ
diff --git a/doc/sphinx/_static/favicon.ico b/doc/sphinx/_static/favicon.ico
deleted file mode 100644
index caa70b8e1..000000000
Binary files a/doc/sphinx/_static/favicon.ico and /dev/null differ
diff --git a/doc/sphinx/_templates/layout.html b/doc/sphinx/_templates/layout.html
index b36d477f9..916891eba 100644
--- a/doc/sphinx/_templates/layout.html
+++ b/doc/sphinx/_templates/layout.html
@@ -1,10 +1,158 @@
-{% extends "!layout.html" %}
-
-
-{% block relbar1 %}
-<div style="background-color: white; text-align: left; padding: 10px 10px 15px 15px">
-<a href="{{ pathto('index') }}">
-<img src="{{pathto("_static/cantera-logo.png", 1) }}" border="0" alt="Cantera"/></a>
-</div>
-{{ super() }}
+{%- set render_sidebar = (not embedded) and (not theme_nosidebar|tobool) and (sidebars != []) %}
+{% block doctype %}
+<!DOCTYPE html>
 {% endblock %}
+<html prefix="
+og: http://ogp.me/ns# article: http://ogp.me/ns/article#
+"
+lang="en">
+
+{%- macro script() %}
+    <script type="text/javascript" id="documentation_options" data-url_root="{{ pathto('', 1) }}" src="{{ pathto('_static/documentation_options.js', 1) }}"></script>
+    {%- for scriptfile in script_files %}
+    <script type="text/javascript" src="{{ pathto(scriptfile, 1) }}"></script>
+    {%- endfor %}
+{%- endmacro %}
+
+
+{%- macro css() %}
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous" />
+  <link rel="stylesheet" href="{{ pathto('_static/' + style, 1) }}" type="text/css" />
+  <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}" type="text/css" />
+  {%- for css in css_files %}
+    {%- if css|attr("rel") %}
+  <link rel="{{ css.rel }}" href="{{ pathto(css.filename, 1) }}" type="text/css"{% if css.title is not none %} title="{{ css.title }}"{% endif %} />
+    {%- else %}
+  <link rel="stylesheet" href="{{ pathto(css, 1) }}" type="text/css" />
+    {%- endif %}
+  {%- endfor %}
+{%- endmacro %}
+
+{%- macro sidebar() %}
+  {%- if render_sidebar %}
+  <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
+    <div class="sphinxsidebarwrapper">
+    {%- for sidebartemplate in sidebars %}
+    {%- include sidebartemplate %}
+    {%- endfor %}
+    </div>
+  </div>
+  {%- endif %}
+{%- endmacro %}
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ title|e }} | Cantera </title>
+
+    {%- block csss %}
+    {{- css() }}
+    {%- endblock %}
+    {%- if not embedded %}
+    {%- block scripts %}
+    {{- script() }}
+    {%- endblock %}
+    {%- if use_opensearch %}
+    <link rel="search" type="application/opensearchdescription+xml"
+          title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}"
+          href="{{ pathto('_static/opensearch.xml', 1) }}"/>
+    {%- endif %}
+    <link rel="shortcut icon" href="/assets/img/favicon.ico" sizes="16x16"/>
+    {%- endif %}
+    {% if theme_canonical_url %}
+      <link rel="canonical" href="{{ theme_canonical_url }}{{ pagename }}.html"/>
+    {% endif %}
+    {%- if hasdoc('search') %}
+    <link rel="search" title="{{ _('Search') }}" href="{{ pathto('search') }}" />
+    {%- endif %}
+    {%- if hasdoc('copyright') %}
+    <link rel="copyright" title="{{ _('Copyright') }}" href="{{ pathto('copyright') }}" />
+    {%- endif %}
+    {%- block extrahead %} {% endblock %}
+  </head>
+  <body>
+  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
+
+  <!-- Menubar -->
+
+  <nav class="navbar navbar-expand-md navbar-light bg-light static-top mb-4">
+      <div class="container"><!-- This keeps the margins nice -->
+          <a class="navbar-brand" href="/index.html">
+          <img src="/assets/img/cantera-logo.png" alt="Cantera" id="logo" class="d-inline-block align-top">
+          </a>
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <div class="collapse navbar-collapse" id="bs-navbar">
+            <ul class="navbar-nav ml-auto">
+              <li class="nav-item">
+                <a href="/install/index.html" class="nav-link">Install</a>
+              </li>
+              <li class="nav-item">
+                <a href="/examples/index.html" class="nav-link">Examples</a>
+              </li>
+              <li class="nav-item">
+                <a href="/about.html" class="nav-link">About</a>
+              </li>
+              <li class="nav-item">
+                <a href="/community.html" class="nav-link">Community</a>
+              </li>
+              <li class="nav-item">
+                <a href="/science/index.html" class="nav-link">Science</a>
+              </li>
+              <li class="nav-item">
+                <a href="/documentation/index.html" class="nav-link">Documentation</a>
+              </li>
+              <li class="nav-item">
+                <a href="/blog/index.html" class="nav-link">Blog</a>
+              </li>
+            </ul>
+          </div><!-- /.navbar-collapse -->
+      </div><!-- /.container -->
+  </nav>
+  <!-- End of Menubar -->
+
+  <div class="container" id="content">
+      <div class="body-content">
+          <!--Body content-->
+          {% block content %}
+          <div class="document">
+            {% block document %}
+            <div class="documentwrapper">
+              {%- if render_sidebar %}
+                <div class="bodywrapper">
+              {%- endif %}
+                <div class="body" role="main">
+                  {% block body %} {% endblock %}
+                </div>
+              {%- if render_sidebar %}
+                </div>
+              {%- endif %}
+            </div>
+            {% endblock %} <!-- end of block document -->
+            {%- block sidebar2 %}{{ sidebar() }}{% endblock %}
+                <div class="clearer"></div>
+          </div>
+          {% endblock %} <!--End of block content-->
+
+          <div class="footer">
+            {% if show_copyright %}&copy;{{ copyright }}.{% endif %}
+            {% if theme_show_powered_by|lower == 'true' %}
+            {% if show_copyright %}|{% endif %}
+            Powered by <a href="http://sphinx-doc.org/">Sphinx {{ sphinx_version }}</a>
+            &amp; <a href="https://github.com/bitprophet/alabaster">Alabaster {{ alabaster_version }}</a>
+            {% endif %}
+            {%- if show_source and has_source and sourcename %}
+            {% if show_copyright or theme_show_powered_by %}|{% endif %}
+            <a href="{{ pathto('_sources/' + sourcename, true)|e }}"
+                rel="nofollow">{{ _('Page source') }}</a>
+            {%- endif %}
+          </div>
+      </div>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/doc/sphinx/conf.py b/doc/sphinx/conf.py
index 3caaaf1b2..0d3918fbc 100644
--- a/doc/sphinx/conf.py
+++ b/doc/sphinx/conf.py
@@ -50,8 +50,8 @@ autodoc_default_flags = ['members','show-inheritance','undoc-members']
 autoclass_content = 'both'
 
 doxylink = {
-        'ct' : (os.path.abspath('../../build/docs/Cantera.tag'),
-                '../../doxygen/html/')
+        'ct': (os.path.abspath('../../build/docs/Cantera.tag'),
+               '../../doxygen/html/')
 }
 
 # Ensure that the primary domain is the Python domain, since we've added the
@@ -132,7 +132,36 @@ html_sidebars = {'**': ['localtoc.html', 'relations.html', 'sourcelink.html', 's
 # Theme options are theme-specific and customize the look and feel of a theme
 # further.  For a list of options available for each theme, see the
 # documentation.
-#html_theme_options = {}
+
+# Copy the Bootstrap 4 font families
+font_families = [
+    # Default on Apple
+    '-apple-system',
+    # Default for older versions of Chrome on Mac
+    'BlinkMacSystemFont',
+    # Windows
+    'Segoe UI',
+    # Android
+    'Roboto',
+    # Standard fallbacks
+    'Helvetica Neue', 'Arial', 'sans-serif',
+    # Emoji fonts
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', '!default']
+
+code_font_families = [
+    'SFMono-Regular',
+    'Menlo',
+    'Monaco',
+    'Consolas',
+    'Liberation Mono',
+    'Courier New', 'monospace'
+]
+html_theme_options = {
+    'font_family': font_families,
+    'head_font_family': font_families,
+    'caption_font_family': font_families,
+    'code_font_family': code_font_families,
+}
 
 # Add any paths that contain custom themes here, relative to this directory.
 html_theme_path = ['.']
@@ -151,7 +180,7 @@ html_short_title = "Cantera"
 # The name of an image file (within the static path) to use as favicon of the
 # docs.  This file should be a Windows icon file (.ico) being 16x16 or 32x32
 # pixels large.
-html_favicon = "_static/favicon.ico"
+# html_favicon = "_static/favicon.ico"
 
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,
diff --git a/doc/sphinx/cttheme/static/cantera.css b/doc/sphinx/cttheme/static/cantera.css
index 0d57037f7..6620e75b6 100644
--- a/doc/sphinx/cttheme/static/cantera.css
+++ b/doc/sphinx/cttheme/static/cantera.css
@@ -15,3 +15,5 @@ dl.class, dl.function {
     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
     font-size: 1rem !important;
 }
+
+#logo { width: 250px; }
