diff --git a/assets/static/beeware.css b/assets/static/beeware.css
index d353683..440f7f9 100644
--- a/assets/static/beeware.css
+++ b/assets/static/beeware.css
@@ -63,6 +63,12 @@
 /* Small devices (landscape phones, less than 48em) */
 @media (max-width: 768px) {
 
+  .navbar-brand-block{
+    position: absolute;
+    margin-top: -40px;
+    right: 10px;
+  }
+
   .beeware-logo {
     display: block;
     margin: 15px 0 35px;
@@ -88,6 +94,12 @@
 /* Extra small devices (portrait phones, less than 34em) */
 @media (max-width: 544px) {
 
+  .navbar-brand-block{
+    position: absolute;
+    margin-top: -40px;
+    right: 10px;
+  }
+
   .beeware-logo {
     display: block;
     margin: 15px auto 35px;
diff --git a/templates/layout.html b/templates/layout.html
index 54a189d..67f4d5b 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -76,9 +76,9 @@
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
+    <div class="navbar-brand-block"><a class="navbar-brand" href="{{ '/'|url(alt=this.alt) }}">BeeWare</a></div>
   </div>
   <div class="collapse navbar-collapse" id="navbarsDefault">
-    <div class="navbar-brand-block"><a class="navbar-brand" href="{{ '/'|url(alt=this.alt) }}">BeeWare</a></div>
     <ul class="navbar-nav mr-auto">
       {{ menu_item('project') }}
       {{ menu_item('news') }}