diff --git a/docs/_includes/_nav.njk b/docs/_includes/_nav.njk
index 5199d80c9d..d177d3ca43 100644
--- a/docs/_includes/_nav.njk
+++ b/docs/_includes/_nav.njk
@@ -2,9 +2,15 @@
   <div class="header-bar">
    {% include "../_snippets/pf-bar-html.md" %}
     <div class="logo-bar">
-      <a href="{{ '/' | url }}" aria-label="PatternFly Elements Home">
-        <img src="{{ '/images/pfe-logo-inverse-white.svg' | url }}" alt="PatternFly Elements">
-      </a>
+      <div class="logo-flex-wrap">
+        <div class="placeholder"></div>
+        <a href="{{ '/' | url }}" aria-label="PatternFly Elements Home">
+          <picture>
+            <source media="(min-width: 420px)" srcset="{{ '/images/pfe-logo-inverse-white.svg' | url }}">
+            <img alt="PatternFly Elements" src="{{ '/images/pfe-logo-icon-white.svg' | url }}">
+          </picture>  
+        </a>
+      </div>
       {# TODO: implement pf-dropdown
       <pf-dropdown id="docs-versions-dropdown" aria-label="Docs Versions" label="Docs Versions">
         {% for version in versions %}
@@ -47,15 +53,12 @@
     </div>
   </div>
 
-  <input id="mobile-menu-toggle" class="menu-toggle element-invisible" type="checkbox"
-    aria-controls="mobile-menu-menu-container" autocomplete="off">
-
+  <input id="mobile-menu-toggle" class="menu-toggle element-invisible" type="checkbox" aria-controls="mobile-menu-menu-container" autocomplete="off">
   <label class="menu-toggle__button l-header__mobile-menu-toggle" for="mobile-menu-toggle"
     data-controls="mobile-menu-menu-container">
     <span class="l-header__burger-icon"></span>
     <span class="menu-toggle-assistive-text element-invisible">Toggle menu visibility</span>
-  </label>
-
+  </label>  
   <div class="menu-toggle__toggleable site-navigation__outer-wrapper">
     <nav class="l-header__site-navigation site-navigation menu-toggle__toggleable-content-wrapper">
       <ul class="site-navigation__wrapper">
diff --git a/docs/images/pfe-logo-icon-white.svg b/docs/images/pfe-logo-icon-white.svg
new file mode 100644
index 0000000000..890450ce6e
--- /dev/null
+++ b/docs/images/pfe-logo-icon-white.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 161 162" style="enable-background:new 0 0 161 162;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M80.1,10.8l0-0.1L80.1,10.8L80.1,10.8L80,10.5l-0.1,0.1l-0.1-0.1l0,0.2l0,0l-0.1-0.1l0,0.1L5.5,83.4l29.4,41.7
+	l22.7-5.2l22.3,31.4l22.3-31.4l22.7,5.2l18.2-25.8l11.2-15.9L80.1,10.8z M77.7,19.3l-10.2,95.1l-19.8-27L77.7,19.3z M46.7,86
+	L34.2,69l43.3-53L46.7,86z M67.1,116.2l-8.9,2l-14.9-21l3.7-8.4L67.1,116.2z M79.7,14.7l0.2-0.5l0.2,0.5l10.5,102.2l0,0l-10.3,15.2
+	l-11.1-15.2l0,0L79.7,14.7z M92.3,114.4L82.2,19.3l30,68L92.3,114.4z M112.8,88.8l3.7,8.4l-14.9,21l-8.9-2L112.8,88.8z M82.3,16
+	l43.3,53l-12.5,17L82.3,16z M35.5,123.5L7.3,83.6l65.5-64.1L32.4,69l13.6,18.6l-4.4,9.9l15,21.1L35.5,123.5z M79.9,148.8l-20.8-29.2
+	l8.9-2l0.2,0.2l-0.1,0.1l12.3,16.8l11.4-16.9l-0.1-0.1l0.1-0.2l8.9,2L79.9,148.8z M142,98.4l-17.7,25l-21.2-4.9l15-21.1l-4.4-9.9
+	l13.6-18.6L87,19.5l65.5,64.1L142,98.4z"/>
+</svg>
diff --git a/docs/main.css b/docs/main.css
index b5a99c77de..0d5bf9b7ea 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -383,12 +383,10 @@ main.blog {
   translate: 6px;
 }
 
-
 .logo-bar {
-  --pf-navigation--Height--actual: 70px;
   display: flex;
+  --pf-navigation--Height--actual: 70px;
   align-items: center;
-  gap: 1em;
   height: 4.375rem; /* old: 3.75rem */
   padding-inline-start: var(--pf-c-masthead--PaddingLeft, var(--pf-c-masthead--inset, 24px));
   padding-inline-end: var(--pf-c-masthead--PaddingRight, var(--pf-c-masthead--inset, 24px));
@@ -398,19 +396,32 @@ main.blog {
   background: var(--pf-theme--color--accent, #0066cc);
 }
 
-.logo-bar > a {
+.logo-flex-wrap {
+  display: flex;
+  gap: 1em;
+  width: 100%;
+  height: 100%;
+}
+
+.logo-flex-wrap > .placeholder {
+  /* 25px is the width of the hamburger */
+  width: 25px;
+  height: 57px;
+}
+
+.logo-flex-wrap > a {
   display: flex;
   align-items: center;
   color: white;
   text-decoration: none;
   font-size: 1.25rem;
   font-weight: bold;
-  margin-left: calc(1.5rem + 16px);
-  height: 100%;
+  gap: 1rem;
 }
 
-.logo-bar > a img {
-  display: none;
+.logo-flex-wrap > a > picture,
+.logo-flex-wrap > a > picture > img {
+  width: 100%;
   height: 100%;
 }
 
@@ -494,7 +505,6 @@ main.blog {
 .l-header__mobile-menu-toggle {
   width: 1.5rem;
   height: 4.375rem;
-  margin-right: 16px;
   color: #fff;
   z-index: 200;
   position: fixed;
@@ -515,6 +525,8 @@ main.blog {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  /* header-bar is set to z-index: 300 */
+  z-index: 301;
 }
 
 .l-header__burger-icon {
@@ -836,6 +848,14 @@ blockquote {
     padding-inline: var(--pf-global--spacer--3xl, 4rem)
   }
 
+  .logo-flex-wrap {
+    gap: 0;
+  }
+
+  .logo-flex-wrap .placeholder:empty {
+    display: none;
+  }
+
   #component-list {
     padding: var(--pf-global--spacer--3xl, 4rem) var(--pf-global--spacer--3xl, 4rem);
   }
@@ -862,11 +882,11 @@ blockquote {
     top: 2rem;
   }
 
-  .logo-bar > a {
+  .logo-flex-wrap > a {
     margin-left: 16px;
   }
 
-  .logo-bar > a img {
+  .logo-flex-wrap > a > picture > img {
     display: inline-block;
     position: relative;
     left: -1rem;