Fixing responsive header

theme/static/css/main.css

@@ -250,19 +250,14 @@ Header
   vertical-align: middle;
 }
 
-#banner nav li#twitter a {
+#banner nav li.twitter a {
   background-image: url(../images/twitter.png);
 }
 
-#banner nav li#rss a {
+#banner nav li.rss a {
   background-image: url(../images/rss.png);
 }
 
-#burger {
-  display: table-cell;
-  text-align: right;
-}
-
 .cacheMenu {
   position: absolute;
   top: 84px;
@@ -274,12 +269,18 @@ Header
   display: none;
 }
 
-#burger ul {
+.burger {
+  display: table-cell;
+  text-align: right;
+}
+
+.burger ul {
   display: inline-block;
   margin-right: 30px;
+  list-style: none;
 }
 
-#burger li {
+.burger li {
   content: " ";
   background-color: #FFF;
   width: 30px;
@@ -291,7 +292,7 @@ Header
 /* Responsive header */
 
 @media screen and (min-width: 1141px){
-  #burger {
+  .burger {
     display: none;
   }
 }
@@ -332,12 +333,12 @@ Header
     padding: 20px 1em;
     border-bottom: 1px solid #FFF;
     text-align: left;
+    margin:0;
   }
    #banner nav li:first-child { 
     border-top: 1px solid #FFF;
   }
   #banner nav li.icon { 
-    display: inline-block;
     border-bottom: none;
     float: left;
   }
@@ -346,12 +347,14 @@ Header
     background-position: left;
     padding-left: 30px;
   }
-  #banner nav li#twitter a {
+  #banner nav li.twitter a:after {
     content: "Twitter";
+    line-height: 18px;
   }
-  #banner nav li#rss a {
+  #banner nav li.rss a:after {
     content: "rss";
     font-size: 24px;
+    line-height: 18px;
   }
   #banner nav li a {
     display: block;
@@ -360,11 +363,13 @@ Header
     font-weight: bold;
   }
 
-  #banner nav .active a:link, #banner nav .active a:visited {
-    border: none;
-    font-weight: bold;
-    text-decoration: underline;
+  #banner nav .active {
+    background: #333;
   }
+
+    #banner nav .active a:link, #banner nav .active a:visited {
+      border: none;
+    }
 }
 
 /*

theme/static/scripts/mine.js

@@ -63,7 +63,7 @@ $window.on('load', function() {
     );
   }
 
-  $('#burger').on('click',function(){
+  $('.burger').on('click',function(){
     $('#banner nav').toggleClass('opened');
     $('.cacheMenu').fadeToggle();
   });

theme/templates/base.html

@@ -30,6 +30,13 @@
         <div id="logo">
           <a href="{{ SITEURL }}/index.html"></a>
         </div>
+        <div class="burger">
+          <ul>
+            <li></li>
+            <li></li>
+            <li></li>
+          </ul>
+        </div>
         <nav>
           <ul>
             {% if DISPLAY_PAGES_ON_MENU -%}
@@ -39,8 +46,8 @@
             </li>
             {% endfor %}
             {% endif %}
-            <li><a href="https://twitter.com/{{ TWITTER_USERNAME }}" class="icon" id="twitter"></a></li>
-            <li><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" class="icon" id="rss"></a></li>
+            <li class="icon twitter"><a href="https://twitter.com/{{ TWITTER_USERNAME }}"> </a></li>
+            <li class="icon rss"><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}"> </a></li>
           </ul>
         </nav>
       </div>