fixed issue where close explorer text obscured the search. fixed issue where breadcrumb arrow was poking through the settings menu

wagtail/wagtailadmin/static/wagtailadmin/scss/components/main-nav.scss

@@ -101,13 +101,13 @@ $submenu-color:darken($color-grey-1, 5%);
                 top:0.5em;
                 margin-top:0.15em;
             }
-            
-        }       
+
+        }
 
         .account{
             @include clearfix();
-          
-       
+
+
             .avatar{
                 display:none;
             }
@@ -119,9 +119,9 @@ $submenu-color:darken($color-grey-1, 5%);
         }
     }
 
-    .nav-submenu{ 
+    .nav-submenu{
         background:$submenu-color;
-        
+
         h2{
             display:none;
         }
@@ -145,8 +145,8 @@ $submenu-color:darken($color-grey-1, 5%);
     }
 
     .explorer{
-        position:absolute;
-        margin-top:70px;
+        // position:absolute;
+        // margin-top:70px;
         font-size:0.95em;
     }
 
@@ -186,7 +186,7 @@ $submenu-color:darken($color-grey-1, 5%);
             padding:0;
             width:3em; height:100%;
             overflow:hidden;
-            
+
             &:before{
                 font-family:wagtail;
                 font-weight:200;
@@ -198,7 +198,7 @@ $submenu-color:darken($color-grey-1, 5%);
                 padding:0 1em;
             }
         }
-       
+
     }
 
 /* Navigation open condition */
@@ -215,6 +215,18 @@ body.nav-open{
     }
 }
 
+
+.explorer-close {
+    display: none;
+    padding: .9em;
+    border-bottom:1px solid rgba(200, 200, 200, 0.1);
+    cursor: pointer;
+
+    &:hover {
+        color: white;
+    }
+}
+
 /* Explorer open condition, widens navigation area */
 body.explorer-open {
     .wrapper{
@@ -232,13 +244,15 @@ body.explorer-open {
 
     .explorer{
         display:block;
-        border-top:1px solid rgba(200,200,200,0.1);
+    }
 
-        &:before{
-            position:absolute;
-            top:-3em;
-            content:"Close explorer";
-            padding:0.9em;
+    .explorer-close {
+        display: block;
+    }
+
+    @media screen and (min-width: $breakpoint-mobile) {
+        .explorer-close {
+            display: none;
         }
     }
 }
@@ -280,13 +294,13 @@ body.explorer-open {
             position:fixed;
             width:$menu-width - 7;
             bottom:0;
-           
+
         }
         .account{
             @include clearfix();
             padding-right:0;
             padding-left:15px;
-       
+
             .avatar{
                 display:inline-block;
                 padding:0;
@@ -307,7 +321,7 @@ body.explorer-open {
         }
     }
 
-    .nav-submenu{ 
+    .nav-submenu{
         position:fixed;
         height:100%;
         width:0;
@@ -317,7 +331,7 @@ body.explorer-open {
         overflow:auto;
         max-height:100%;
         border-right:1px solid rgba(0,0,0,0.1);
-        
+
         h2,ul{
             float:right;
             width:$menu-width;
@@ -348,9 +362,9 @@ body.explorer-open {
 
         > a{
             text-shadow:-1px -1px 0px rgba(0,0,0,0.3);
-            
+
             &:hover{
-                background-color:transparent;  
+                background-color:transparent;
             }
         }
         .nav-submenu{

wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss

@@ -80,6 +80,9 @@ body{
         border:0;
         margin-right:1em;
     }
+    &:hover {
+        color: white;
+    }
 }
 
 .content-wrapper{
@@ -187,7 +190,7 @@ footer{
 
             &:after{
                 right:0;
-                z-index:5;
+                // z-index:5;
                 position:absolute;
                 font-family:wagtail;
                 content:"n";

wagtail/wagtailadmin/templates/wagtailadmin/base.html

@@ -10,7 +10,7 @@
                 {% endblock %}
                 <span>{% trans "Dashboard" %}</span>
             </a>
-            
+
             <form class="nav-search" action="{% url 'wagtailadmin_pages_search' %}" method="get">
                 <div>
                     <label for="menu-search-q">{% trans "Search" %}</label>
@@ -22,7 +22,9 @@
             {% main_nav %}
         </div>
 
-        <nav id="explorer" class="explorer"></nav>
+        <span class="explorer-close">Close explorer</span>
+        <nav id="explorer" class="explorer">
+        </nav>
     </div>
 
     <div class="content-wrapper">