Commit f91f60ac authored by Adèle's avatar Adèle
Browse files

Fixing responsive header

parent 54b50865
......@@ -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;
}
}
/*
......
......@@ -63,7 +63,7 @@ $window.on('load', function() {
);
}
$('#burger').on('click',function(){
$('.burger').on('click',function(){
$('#banner nav').toggleClass('opened');
$('.cacheMenu').fadeToggle();
});
......
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment