Added fixed height for logo. Jumping issue should be fixed now. Added correct hex color.

apps/block_scout_web/assets/css/components/_navbar.scss

@@ -224,7 +224,7 @@ $navbar-logo-width: auto !default;
 }
 
 .navbar-logo {
-  max-height: $navbar-logo-height;
+  height: $navbar-logo-height;
   width: $navbar-logo-width;
 }
 
@@ -273,7 +273,17 @@ $navbar-logo-width: auto !default;
   margin-right: -7px !important;
   padding-right: 0px;
   height: 20px!important;
-  border-left: 1px solid #828ba0a1!important;
+  border-left: 1px solid #a3a9b5!important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none !important;
+  box-shadow: none !important;
+  transition: .2s ease-in;
   @include media-breakpoint-up(lg) {
       display: none!important;
   }
@@ -381,4 +391,7 @@ $navbar-logo-width: auto !default;
   #toggleImage1 {
     width: 27px!important;
   }
+  .dark-mode-changer {
+    display: none!important;
+  }
 }

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -17,9 +17,9 @@
          <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6">
          <circle cx="3" cy="3" r="3" fill="#80d6a1"></circle>
          </svg> </span>Sokol Testnet</a>
-     <button class="new-button dark-mode-changer" id="dark-mode-changer">
+     <button class="new-button" id="dark-mode-changer">
         <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
-            <path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"></path>
+            <path fill="#a3a9b5" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"></path>
         </svg>
       </button>    
     <script>
@@ -123,6 +123,11 @@
         </li>
       </ul>
       <!-- Dark mode changer was there -->
+      <button class="dark-mode-changer" id="dark-mode-changer">
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
+            <path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"/>
+        </svg>
+      </button>
       <!-- Search navbar -->
       <%= if Application.get_env(:block_scout_web, BlockScoutWeb.WebRouter)[:enabled] do %>
         <div class="search-form d-lg-flex d-inline-block">