Fix nav

assets/scss/_tor.scss

@@ -479,33 +479,17 @@ a.side-nav.active {
 
 
 // Small devices (landscape phones, less than 768px)
-@include media-breakpoint-down(lg) {
+@include media-breakpoint-down(md) {
     nav.sidetopics {
         display: none !important;
 	visibility: hidden !important;
     }
-    .smalltopics {
+
+    nav.smalltopics {
         display: block;
-	width: 100%;
+	width:100%;
-
+	button.navbar-toggler {
-    }
+            float: right;
-
+	}
-    .burger-menu {
-          display: none;
-    }
-
-    .burger {
-          padding-left: 2em;
-	  font-size: 1.2em;
-	  text-decoration: none;
-	  button {
-              float: right;
-	  }
-    }
-
-    #collapseTopicsNav:target {
-          display: block;
-	  padding: 20px;
-
     }
 }

assets/static/bootstrap.css

@@ -6875,28 +6875,16 @@ a.side-nav.active {
 .smalltopics {
   display: none; }
 
-@media (max-width: 1199px) {
+@media (max-width: 991px) {
   nav.sidetopics {
     display: none !important;
     visibility: hidden !important; }
 
-  .smalltopics {
+  nav.smalltopics {
     display: block;
     width: 100%; }
-
+    nav.smalltopics button.navbar-toggler {
-  .burger-menu {
+      float: right; } }
-    display: none; }
-
-  .burger {
-    padding-left: 2em;
-    font-size: 1.2em;
-    text-decoration: none; }
-    .burger button {
-      float: right; }
-
-  #collapseTopicsNav:target {
-    display: block;
-    padding: 20px; } }
 /* Support Portal Styles
 *
 */

templates/navbar.html

@@ -3,9 +3,9 @@
     <img src="{{ '/static/images/tor-logo.svg' }}" >
     <span class="sr-only">Tor Logo</span>
   </a>
-  <a class="btn navbar-toggler" type="button" data-toggle="collapse" href="#navbarSupportedContent" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+  <button class="btn navbar-toggler" type="button" data-toggle="collapse" href="#navbarSupportedContent" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
-  </a>
+  </button>
   <div class="collapse navbar-collapse hamburger-menu" id="navbarSupportedContent">
     <div class="justify-content-md-center mx-auto pt-2">
       <ul class="navbar-nav">

templates/sidenav.html

@@ -1,25 +1,24 @@
-<nav class="smalltopics no-background navbar navbar-expand-lg navbar-light bg-white">
+<nav class="smalltopics no-background navbar navbar-expand-lg navbar-light bg-white fixed">
-  <div class="justify-content-md-center mx-auto">
+  <a class="text-primary bg-white font-weight-bold navbar-brand" href="#collapseTopicsNav">
-    <a class="text-primary bg-white font-weight-bold d-block burger" href="#collapseTopicsNav">
+    Topics
-      Topics
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedTopicsContent" aria-controls="navbarSupportedTopicsContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  
+  <div class="collapse navbar-collapse" id="navbarSupportedTopicsContent">
+    <ul class="nav nav-pills flex-column">
+      {% set topicbag = 'topics+' + this.alt %}
+      {% for id, item in bag(topicbag).items() %}
+      <li{% if this.is_child_of(item.path) %} class="nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
+	<a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %}  href="{{ item.path }}">{{ item.label }}</a>
+      </li>
 
-      <button class="btn text-primary bg-white font-weight-bold dropdown-toggle d-block" type="button" id="dropdownMenuButtonTopics" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      {% endfor %}
-
-      </button>
-    </a>
-    <div class="burger-menu" id="collapseTopicsNav" aria-labelledby="dropdownMenuButtonTopics">
-      <ul class="nav nav-pills flex-column">
-	{% set topicbag = 'topics+' + this.alt %}
-	{% for id, item in bag(topicbag).items() %}
-	<li{% if this.is_child_of(item.path) %} class="nav-item" {% else %} class="toc-entry toc-h2 nav-item"{% endif %}>
-	  <a role="button" {% if this.is_child_of(item.path) %} class="side-nav active" {% else %} class="side-nav" {% endif %}  href="{{ item.path }}">{{ item.label }}</a>
-	</li>
-
-	{% endfor %}
-    </div>
-    <hr/>
   </div>
 </nav>
+
+
 <nav class="col-sm-3 col-md-2 d-none d-sm-block section-nav bg-white sidebar sidetopics" id="sidenav-topics">
   <h4 class="text-primary offset-md-1">Topics</h4> 
   <ul class="nav nav-pills flex-column">