Modify the Social Navigation to create a better Mobile Experience

Author: bordoni

assets/css/stylesheet.css

@@ -254,8 +254,8 @@ img {
 /* Clearfix */
 
 .cf:before, .cf:after {
-	content:"";
-	display:table;
+	content: "";
+	display: table;
 }
 
 .cf:after {
@@ -322,21 +322,25 @@ footer {
 	margin: 20px 10px 40px 10px;
 }
 
-.main-nav {
+.main-nav,
+.social-nav {
 	position: relative;
 }
-.main-nav ul {
+.main-nav ul,
+.social-nav ul {
 	list-style: none;
 }
-.main-nav li {
+.main-nav li,
+.social-nav li {
 	float: left;
 	text-align: center;
 	margin: 0;
 }
 .main-nav li:first-child a {
 	padding-left: 0;
 }
-.main-nav a {
+.main-nav a,
+.social-nav a {
 	display: block;
 	padding: 8px 18px;
 	color: #7AD03A;
@@ -365,11 +369,11 @@ footer {
 }
 
 /* Secondary main-nav */
-.main-nav .align-right {
+.social-nav li {
 	float: right;
 	margin-left: .5em;
 }
-.main-nav .rounded {
+.social-nav .rounded {
 	padding: 0;
 	width: 1.8em;
 	height: 1.8em;
@@ -379,10 +383,23 @@ footer {
 	background: #585858;
 	color: #292929;
 }
-.main-nav .rounded:hover {
+.social-nav .rounded:hover {
 	color: #7AD03A;
 }
 
+@media (max-width: 770px) {
+	.social-nav {
+		display: table;
+		margin: 0 auto;
+		padding-top: 5px;
+	}
+
+	.social-nav li {
+		float: none;
+		margin: 0 5px;
+	}
+}
+
 /* Search in header */
 .main-nav .search {
 	border-radius: 3em;
@@ -516,7 +533,7 @@ body.display-global-parameters #main_content {
 	margin-bottom: 5px;
 }
 
- // Adjust visibility per page
+/* Adjust visibility per page */
 body.command-line-interface-for-wordpress .global-parameters,
 body.configuration .global-parameters{
 	display: none;
@@ -691,36 +708,38 @@ hr:after,
 }
 
 /* i18n menu */
-.cf .container
-{
+.cf .container {
 	position: relative;
 }
 
-.cf .container .languages
-{
+.cf .container .languages {
 	position: absolute;
 	top: 0px;
 	right: 0px;
+	margin-right: 20px;
 }
 
+
 @media screen and (-webkit-min-device-pixel-ratio:0) {
 	header h2,
 	.main-nav a {
 		font-weight: 400;
 	}
 }
 
-@media (max-width: 800px) {
+@media (max-width: 970px) {
 	header h1 {
 		margin-left: 0;
 	}
-
-	.main-nav .align-right {
-		float: none;
-	}
 }
+
 @media (max-width: 690px) {
 	.main-nav li a {
 		padding-left: 0;
 	}
+
+	.main-nav li.active a {
+		padding-left: 9px;
+		padding-right: 9px;
+	}
 }