improve responsive behavior of navbar

src/client/js/components/Navbar/NavbarToggler.jsx

@@ -15,9 +15,15 @@ const NavbarToggler = (props) => {
   };
 
   return (
-    <button className="navbar-toggler grw-navbar-toggler border-0" type="button" aria-expanded="false" aria-label="Toggle navigation" onClick={clickHandler}>
+    <a
+      className="nav-link grw-navbar-toggler border-0 waves-effect waves-light"
+      type="button"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+      onClick={clickHandler}
+    >
       <i className="icon-menu"></i>
-    </button>
+    </a>
   );
 
 };

src/server/views/layout/layout.html

@@ -74,8 +74,10 @@
 <div id="wrapper">
 
   {% block layout_head_nav %}
-  <nav class="navbar grw-navbar navbar-expand-sm navbar-dark fixed-top mb-0 p-sm-0">
-    <div id="grw-navbar-toggler" class="d-sm-none mr-auto"></div>
+  <nav class="navbar grw-navbar navbar-expand navbar-dark fixed-top mb-0 px-0">
+    <ul class="navbar-nav d-sm-none mr-auto">
+      <li id="grw-navbar-toggler" class="nav-item"></li>
+    </ul>
 
     {# Brand Logo #}
     <div class="navbar-brand mr-sm-auto">