Responsive header - animated burger menu

theme/static/css/main.css

@@ -23,6 +23,7 @@ body {
   margin: 0;
   padding: 0;
   text-align: left;
+  position: relative;
 }
 
 /* Headings */
@@ -177,47 +178,56 @@ Header
 }
 
 #headerContainer {
-  width: 60%;
-  margin: 0 auto 2em;
-  padding: 30px 0;
-  position: relative;
-  height: 50px;
+  width: 1140px;
+  margin: auto;
+  padding: 20px 0;
   font-size: 14px;
+  display: table;
+  position: relative;
+  z-index: 100;
 }
 
 #banner #logo {
-  display: inline-block;
   margin-right: 20px;
-  position: absolute;
+  vertical-align: middle;
+  display: table-cell;
+
 }
 
-#banner #logo img {
-  width: 230px;
+#banner #logo a {
+  width:230px;
+  height: 77px;
+  display: block;
+  content: " ";
+  background-image: url(../images/logo_blc.png);
+  background-size: 230px auto;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 /* Main Nav */
 #banner nav {
-  display: inline-block;
+  display: table-cell;
   background: #000305;
   font-size: 1.2em;
-  height: 40px;
   line-height: 30px;
-  margin: 0 ;
-  padding: 0;
-  text-align: center;
-  width: 750px;
-  position: absolute;
-  right: 0;
-  top: 50%;
+  text-align: right;
+  vertical-align: middle;
 }
 
-#banner nav ul {list-style: none; margin: 0 auto; width: 840px;}
-#banner nav li {float: left; display: inline; margin: 0 5px;}
+#banner nav ul {
+  list-style: none; 
+  margin: 0; 
+}
+
+#banner nav li { 
+  display: inline; 
+  margin: 0 5px;
+}
 
 #banner nav a:link, #banner nav a:visited {
   color: #fff;
   display: inline-block;
-  height: 30px;
   padding: 5px 1em;
   font-family: Lato;
   text-decoration: none;
@@ -232,21 +242,130 @@ Header
   text-shadow: none !important;
 }
 
-#banner nav li a.icon {
-  display: inline-block;
+#banner nav li.icon a {
   background-repeat: no-repeat;
   background-position: center;
   background-size: 18px 18px;
+  height: 18px;
+  vertical-align: middle;
 }
 
-#banner nav li a#twitter {
+#banner nav li#twitter a {
   background-image: url(../images/twitter.png);
 }
 
-#banner nav li a#rss {
+#banner nav li#rss a {
   background-image: url(../images/rss.png);
 }
 
+#burger {
+  display: table-cell;
+  text-align: right;
+}
+
+.cacheMenu {
+  position: absolute;
+  top: 84px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: " ";
+  background-color: rgba(0,0,0,.5);
+  display: none;
+}
+
+#burger ul {
+  display: inline-block;
+  margin-right: 30px;
+}
+
+#burger li {
+  content: " ";
+  background-color: #FFF;
+  width: 30px;
+  height: 4px;
+  display: block;
+  margin-bottom: 6px;
+}
+
+/* Responsive header */
+
+@media screen and (min-width: 1141px){
+  #burger {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1140px){
+
+  #banner #logo  {
+    padding-left: 25px;
+  }
+
+  #banner #logo a {
+    width:155px;
+    height: 32px;
+    background-image: url(../images/logo_blc_small.png);
+    background-size: 153px auto;
+  }
+
+  #headerContainer {
+    width: 100%;
+  }
+  #banner nav {
+    position: absolute;
+    top: 80px;
+    width: 300px;
+    right: -300px;
+    -webkit-transition: right .5s; /* Safari */
+    transition: right .5s;
+  }
+
+  #banner nav.opened {
+    right: 0;
+    -webkit-transition: right .5s; /* Safari */
+    transition: right .5s;
+  }
+
+  #banner nav li { 
+    display: block; 
+    padding: 20px 1em;
+    border-bottom: 1px solid #FFF;
+    text-align: left;
+  }
+   #banner nav li:first-child { 
+    border-top: 1px solid #FFF;
+  }
+  #banner nav li.icon { 
+    display: inline-block;
+    border-bottom: none;
+    float: left;
+  }
+  #banner nav li.icon a{ 
+    display: inline;
+    background-position: left;
+    padding-left: 30px;
+  }
+  #banner nav li#twitter a {
+    content: "Twitter";
+  }
+  #banner nav li#rss a {
+    content: "rss";
+    font-size: 24px;
+  }
+  #banner nav li a {
+    display: block;
+    width: 100%;
+    font-size: 22px;
+    font-weight: bold;
+  }
+
+  #banner nav .active a:link, #banner nav .active a:visited {
+    border: none;
+    font-weight: bold;
+    text-decoration: underline;
+  }
+}
 
 /*
 Side navigation
@@ -366,14 +485,14 @@ Body
 Home page
  *****************/
 
-//#content-home section.titre {
-//	background-image: url(../images/pessin2.png);
-//	background-repeat: no-repeat;
-//	background-position: right top;
-//	background-size: 50%;
-//	padding-bottom: 200px;
-//	margin-bottom: -40px;
-//}
+#content-home section.titre {
+	background-image: url(../images/pessin2.png);
+	background-repeat: no-repeat;
+	background-position: right top;
+	background-size: 50%;
+	padding-bottom: 200px;
+	margin-bottom: -40px;
+}
 
 #content-home h1 {
 	font-size: 56px;
@@ -766,534 +885,4 @@ li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
   margin-bottom: 20px;
 }
 
-.show {
-  display: block; }
-
-.hide,
-.hidden {
-  display: none; }
-
-.invisible {
-  visibility: hidden; }
-
-.left {
-  float: left; }
-
-.right {
-  float: right; }
-
-.clearfix:before, .clearfix:after {
-  display: table;
-  content: " "; }
-
-.clearfix:after {
-  clear: both; }
-
-.text-left {
-  text-align: left; }
-
-.text-right {
-  text-align: right; }
-
-.center {
-  text-align: center; }
-
-ul.list-inline {
-  list-style: none;
-  padding-left: 0;
-  margin: 0 0 0 -5px; }
-  ul.list-inline > li {
-    display: inline-block;
-    padding: 0 5px 0 5px; }
-
-*, *:before, *:after {
-  box-sizing: border-box; }
-
-.container {
-  max-width: 64rem;
-  width: 94%;
-  margin: 0 auto; }
-  @media all and (min-width: 40em) {
-    .container {
-      width: 100%;
-      padding: 0 1rem; } }
-
-@media all and (min-width: 40em) {
-  .col1of1 {
-    float: left;
-    width: 100%; } }
-
-@media all and (min-width: 40em) {
-  .col1of2 {
-    float: left;
-    width: 50%; } }
-
-@media all and (min-width: 40em) {
-  .col1of3 {
-    float: left;
-    width: 33.33333%; } }
-
-@media all and (min-width: 40em) {
-  .col2of3 {
-    float: left;
-    width: 66.66667%; } }
-
-@media all and (min-width: 40em) {
-  .col1of4 {
-    float: left;
-    width: 25%; } }
-
-@media all and (min-width: 40em) {
-  .col3of4 {
-    float: left;
-    width: 75%; } }
-
-@media all and (min-width: 40em) {
-  .col1of5 {
-    float: left;
-    width: 20%; } }
-
-@media all and (min-width: 40em) {
-  .col2of5 {
-    float: left;
-    width: 40%; } }
-
-@media all and (min-width: 40em) {
-  .col3of5 {
-    float: left;
-    width: 60%; } }
-
-@media all and (min-width: 40em) {
-  .col4of5 {
-    float: left;
-    width: 80%; } }
-
-@media all and (min-width: 40em) {
-  .col1of6 {
-    float: left;
-    width: 16.66667%; } }
-
-@media all and (min-width: 40em) {
-  .col5of6 {
-    float: left;
-    width: 83.33333%; } }
-
-.row1 {
-  min-height: 2.5rem; }
-  @media all and (min-width: 40em) {
-    .row1 {
-      height: 2.5rem; } }
-
-.row2 {
-  min-height: 5rem; }
-  @media all and (min-width: 40em) {
-    .row2 {
-      height: 5rem; } }
-
-.row3 {
-  min-height: 7.5rem; }
-  @media all and (min-width: 40em) {
-    .row3 {
-      height: 7.5rem; } }
-
-.row4 {
-  min-height: 10rem; }
-  @media all and (min-width: 40em) {
-    .row4 {
-      height: 10rem; } }
-
-.row5 {
-  min-height: 12.5rem; }
-  @media all and (min-width: 40em) {
-    .row5 {
-      height: 12.5rem; } }
-
-.row6 {
-  min-height: 15rem; }
-  @media all and (min-width: 40em) {
-    .row6 {
-      height: 15rem; } }
-
-.row7 {
-  min-height: 17.5rem; }
-  @media all and (min-width: 40em) {
-    .row7 {
-      height: 17.5rem; } }
-
-.row8 {
-  min-height: 20rem; }
-  @media all and (min-width: 40em) {
-    .row8 {
-      height: 20rem; } }
-
-.row9 {
-  min-height: 22.5rem; }
-  @media all and (min-width: 40em) {
-    .row9 {
-      height: 22.5rem; } }
-
-.row10 {
-  min-height: 25rem; }
-  @media all and (min-width: 40em) {
-    .row10 {
-      height: 25rem; } }
-
-.row11 {
-  min-height: 27.5rem; }
-  @media all and (min-width: 40em) {
-    .row11 {
-      height: 27.5rem; } }
-
-.row12 {
-  min-height: 30rem; }
-  @media all and (min-width: 40em) {
-    .row12 {
-      height: 30rem; } }
-
-.row13 {
-  min-height: 32.5rem; }
-  @media all and (min-width: 40em) {
-    .row13 {
-      height: 32.5rem; } }
-
-.row14 {
-  min-height: 35rem; }
-  @media all and (min-width: 40em) {
-    .row14 {
-      height: 35rem; } }
-
-.row15 {
-  min-height: 37.5rem; }
-  @media all and (min-width: 40em) {
-    .row15 {
-      height: 37.5rem; } }
-
-.row16 {
-  min-height: 40rem; }
-  @media all and (min-width: 40em) {
-    .row16 {
-      height: 40rem; } }
-
-@media all and (min-width: 40em) {
-  .pre1of1 {
-    margin-left: 100%; } }
-
-@media all and (min-width: 40em) {
-  .pre1of2 {
-    margin-left: 50%; } }
-
-@media all and (min-width: 40em) {
-  .pre2of2 {
-    margin-left: 100%; } }
-
-@media all and (min-width: 40em) {
-  .pre1of3 {
-    margin-left: 33.33333%; } }
-
-@media all and (min-width: 40em) {
-  .pre2of3 {
-    margin-left: 66.66667%; } }
-
-@media all and (min-width: 40em) {
-  .pre3of3 {
-    margin-left: 100%; } }
-
-@media all and (min-width: 40em) {
-  .pre1of4 {
-    margin-left: 25%; } }
-
-@media all and (min-width: 40em) {
-  .pre2of4 {
-    margin-left: 50%; } }
-
-@media all and (min-width: 40em) {
-  .pre3of4 {
-    margin-left: 75%; } }
-
-@media all and (min-width: 40em) {
-  .pre4of4 {
-    margin-left: 100%; } }
-
-@media all and (min-width: 40em) {
-  .pre1of5 {
-    margin-left: 20%; } }
-
-@media all and (min-width: 40em) {
-  .pre2of5 {
-    margin-left: 40%; } }
-
-@media all and (min-width: 40em) {
-  .pre3of5 {
-    margin-left: 60%; } }
-
-@media all and (min-width: 40em) {
-  .pre4of5 {
-    margin-left: 80%; } }
-
-@media all and (min-width: 40em) {
-  .pre5of5 {
-    margin-left: 100%; } }
-
-@media all and (min-width: 40em) {
-  .pre1of6 {
-    margin-left: 16.66667%; } }
-
-@media all and (min-width: 40em) {
-  .pre2of6 {
-    margin-left: 33.33333%; } }
-
-@media all and (min-width: 40em) {
-  .pre3of6 {
-    margin-left: 50%; } }
-
-@media all and (min-width: 40em) {
-  .pre4of6 {
-    margin-left: 66.66667%; } }
-
-@media all and (min-width: 40em) {
-  .pre5of6 {
-    margin-left: 83.33333%; } }
-
-@media all and (min-width: 40em) {
-  .pre6of6 {
-    margin-left: 100%; } }
-
-@media all and (min-width: 40em) {
-  .post1of1 {
-    margin-right: 100%; } }
-
-@media all and (min-width: 40em) {
-  .post1of2 {
-    margin-right: 50%; } }
-
-@media all and (min-width: 40em) {
-  .post2of2 {
-    margin-right: 100%; } }
-
-@media all and (min-width: 40em) {
-  .post1of3 {
-    margin-right: 33.33333%; } }
-
-@media all and (min-width: 40em) {
-  .post2of3 {
-    margin-right: 66.66667%; } }
-
-@media all and (min-width: 40em) {
-  .post3of3 {
-    margin-right: 100%; } }
-
-@media all and (min-width: 40em) {
-  .post1of4 {
-    margin-right: 25%; } }
-
-@media all and (min-width: 40em) {
-  .post2of4 {
-    margin-right: 50%; } }
-
-@media all and (min-width: 40em) {
-  .post3of4 {
-    margin-right: 75%; } }
-
-@media all and (min-width: 40em) {
-  .post4of4 {
-    margin-right: 100%; } }
-
-@media all and (min-width: 40em) {
-  .post1of5 {
-    margin-right: 20%; } }
-
-@media all and (min-width: 40em) {
-  .post2of5 {
-    margin-right: 40%; } }
-
-@media all and (min-width: 40em) {
-  .post3of5 {
-    margin-right: 60%; } }
-
-@media all and (min-width: 40em) {
-  .post4of5 {
-    margin-right: 80%; } }
-
-@media all and (min-width: 40em) {
-  .post5of5 {
-    margin-right: 100%; } }
-
-@media all and (min-width: 40em) {
-  .post1of6 {
-    margin-right: 16.66667%; } }
-
-@media all and (min-width: 40em) {
-  .post2of6 {
-    margin-right: 33.33333%; } }
-
-@media all and (min-width: 40em) {
-  .post3of6 {
-    margin-right: 50%; } }
-
-@media all and (min-width: 40em) {
-  .post4of6 {
-    margin-right: 66.66667%; } }
-
-@media all and (min-width: 40em) {
-  .post5of6 {
-    margin-right: 83.33333%; } }
-
-@media all and (min-width: 40em) {
-  .post6of6 {
-    margin-right: 100%; } }
-
-.m0 {
-  margin: 0; }
-
-.m0x {
-  margin: 0 0; }
-
-.m0y {
-  margin: 0 0; }
-
-.m0t {
-  margin-top: 0; }
-
-.m0r {
-  margin-right: 0; }
-
-.m0b {
-  margin-bottom: 0; }
-
-.m0l {
-  margin-left: 0; }
-
-.p0 {
-  padding: 0; }
-
-.p0x {
-  padding: 0 0; }
-
-.p0y {
-  padding: 0 0; }
-
-.m1 {
-  margin: 1rem; }
-
-.m1x {
-  margin: 0 1rem; }
-
-.m1y {
-  margin: 1rem 0; }
-
-.m1t {
-  margin-top: 1rem; }
-
-.m1r {
-  margin-right: 1rem; }
-
-.m1b {
-  margin-bottom: 1rem; }
-
-.m1l {
-  margin-left: 1rem; }
-
-.p1 {
-  padding: 1rem; }
-
-.p1x {
-  padding: 0 1rem; }
-
-.p1y {
-  padding: 1rem 0; }
-
-.m2 {
-  margin: 2rem; }
-
-.m2x {
-  margin: 0 2rem; }
-
-.m2y {
-  margin: 2rem 0; }
-
-.m2t {
-  margin-top: 2rem; }
-
-.m2r {
-  margin-right: 2rem; }
-
-.m2b {
-  margin-bottom: 2rem; }
-
-.m2l {
-  margin-left: 2rem; }
-
-.p2 {
-  padding: 2rem; }
-
-.p2x {
-  padding: 0 2rem; }
-
-.p2y {
-  padding: 2rem 0; }
-
-.m3 {
-  margin: 3rem; }
-
-.m3x {
-  margin: 0 3rem; }
-
-.m3y {
-  margin: 3rem 0; }
-
-.m3t {
-  margin-top: 3rem; }
-
-.m3r {
-  margin-right: 3rem; }
-
-.m3b {
-  margin-bottom: 3rem; }
-
-.m3l {
-  margin-left: 3rem; }
-
-.p3 {
-  padding: 3rem; }
-
-.p3x {
-  padding: 0 3rem; }
-
-.p3y {
-  padding: 3rem 0; }
-
-.m4 {
-  margin: 4rem; }
-
-.m4x {
-  margin: 0 4rem; }
-
-.m4y {
-  margin: 4rem 0; }
-
-.m4t {
-  margin-top: 4rem; }
-
-.m4r {
-  margin-right: 4rem; }
-
-.m4b {
-  margin-bottom: 4rem; }
-
-.m4l {
-  margin-left: 4rem; }
-
-.p4 {
-  padding: 4rem; }
-
-.p4x {
-  padding: 0 4rem; }
-
-.p4y {
-  padding: 4rem 0; }
-
-.centered {
-  float: none;
-  margin: 0 auto; }
-
 

theme/static/scripts/mine.js

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

theme/templates/base.html

@@ -2,6 +2,7 @@
 <html lang="{{ DEFAULT_LANG }}">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
     <title>{% block title %}{{ SITENAME }}{%endblock%}</title>
     <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />