mobile fix

styles/_pages.scss

@@ -832,6 +832,13 @@
   }
 }
 
+
+.page-docs {
+  &::before {
+    background-image: url(../img/backgrounds/bg-docs.png);
+  }
+}
+
 .page-docs-index,
 .page-community {
   #community-heading {
@@ -1302,7 +1309,27 @@
     border-left: none;
     border-right: none;
     border-bottom-color: #454549;
-    z-index: 10;
+  }
+
+  @media (max-width: 767.98px) {
+    .nav-tabs{
+      display: flex;
+      list-style: none;
+      margin-left: 0;
+      padding-left: 0;
+      position:sticky;
+      justify-content: space-between;
+    }
+    .nav-item {
+      display: inline-flex;
+      width: auto;
+      list-style: outside none none;
+    }
+    .nav-link{
+      display: inline-flex;
+      width: auto;
+      padding: 1em 1em;
+    }
   }
   .nav-link.active {
     border-bottom-color: #9a52ff;

styles/xrpl.css

@@ -15275,12 +15275,13 @@ aside {
 }
 @media (max-width: 767.98px) {
   .page-dev-tools .nav-tabs {
-    display: inline-flex;
+    display: flex;
     list-style: none;
     margin-left: 0;
     padding-left: 0;
     position: -webkit-sticky;
     position: sticky;
+    justify-content: space-between;
   }
   .page-dev-tools .nav-item {
     display: inline-flex;
@@ -15290,6 +15291,7 @@ aside {
   .page-dev-tools .nav-link {
     display: inline-flex;
     width: auto;
+    padding: 1em 1em;
   }
 }
 .page-dev-tools .nav-link.active {

template/page-dev-tools.html.jinja

@@ -65,6 +65,7 @@
                   "href": "https://xumm.community/tokens",
                 },
               ] %}
+               <h4> Explorers</h4>
               <div class="row row-cols-1 row-cols-lg-3 card-deck">
               {% for card in exploerers_tools%}
                 <a class="card" href="{{card.href}}" target="_blank" id="{{card.id}}">
@@ -78,6 +79,7 @@
               </div>
           </div>
           <div class="tab-pane" id="api-access" role="tabpanel" aria-labelledby="api-access-tab">
+          <h4> API Access</h4>
             {% set api_access_tools = [
                 {
                   "id": "websocket",
@@ -128,6 +130,7 @@
               </div>
           </div>
           <div class="tab-pane" id="other" role="tabpanel" aria-labelledby="other-tab">
+            <h4> Other</h4>
             {% set other = [
               {
                 "id": "domain",