COMMUNITY responsive : update menu css

public/opac/css/responsive.css

@@ -7,17 +7,37 @@
     }
 
 
+    #menu_horizontal,
+    #header div[class*="menu"] {
+	position: inherit !important;
+	width: 100% !important;
+	background: #333 !important;
+    }
+
+
     div[class*="menu"].show_menu > ul ul,
     div[class*="menu"].show_menu > ul li {
 	min-width: 0 !important;
     }
 
 
-    #menu_horizontal a {
-    	background: none !important;
+    div[class*="menu"] li img {
+	display: none !important;
     }
 
-    
+
+
+    div[class*="menu"]:not(.show_menu) > ul > li ,
+    div[class*="menu"]:not(.show_menu) > ul > li > ul ,
+    div[class*="menu"]:not(.show_menu) > ul > li > ul > li {
+	position: absolute !important;
+	top: 0 !important;
+	left: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+    }
+
+
     div[class*="menu"].show_menu > ul li {
 	margin: auto !important
     }
@@ -233,17 +253,10 @@
     }
 
 
-    #menu_horizontal > ul > li,
-    div[class*="menu"] > ul > li {
-	float: left;
-	width: auto;
-    }
-
-
     div[class*="menu"].show_menu > ul ul,
     div[class*="menu"].show_menu > ul li,
-    #menu_horizontal ul li ul,
-    #menu_horizontal ul li ul li {
+    #menu_horizontal.show_menu > ul ul,
+    #menu_horizontal.show_menu > ul li {
 	display: block;
 	position: relative;
 	min-width: auto;
@@ -257,6 +270,26 @@
     }
 
 
+    #menu_horizontal.show_menu > ul > li,
+    div[class*="menu"].show_menu > ul > li {
+	float: left;
+	width: 100%;
+	border-bottom: 1px solid #efefef;
+    }
+
+
+    div[class*="menu"] > ul ul,
+    div[class*="menu"] > ul li,
+    div[class*="menu"] > ul li a,
+    div[class*="menu"] > ul li ul li a,
+    #menu_horizontal > ul ul,
+    #menu_horizontal > ul li,
+    #menu_horizontal > ul li a ,
+    #menu_horizontal > ul li ul li a {
+	color: #efefef;
+    }
+
+
     div[class*="menu"].show_menu > ul ul,
     div[class*="menu"].show_menu > ul li,
     div[class*="menu"].show_menu > ul li a,
@@ -264,7 +297,6 @@
     #menu_horizontal.show_menu > ul li,
     #menu_horizontal.show_menu > ul li a {
 	background: none;	
-	color: #fff;
 	height: auto;
     }
 
@@ -284,7 +316,7 @@
 	visibility: visible;
 	width: auto;
 	height: auto;
-	font-size: 1.5em;
+	font-size: 1em;
 	background: #333;
 	padding: 0 10px;
 	margin: 3em 0 0 0;
@@ -293,45 +325,54 @@
     }
 
 
-    div[class*="menu"] li li.selected_profil {
+    div[class*="menu"] li.selected_profil > a[href*="/"] {
 	visibility: visible;
     }
 
 
-    div:not(.show_menu)[class*="menu"] li li.selected_profil,
-    #menu_horizontal:not(.show_menu) li li.selected_profil{
+    div:not(.show_menu)[class*="menu"] li.selected_profil > a[href*="/"],
+    #menu_horizontal:not(.show_menu) li.selected_profil > a[href*="/"]{
 	background-color: #333;
 	float: left;
-	line-height: 5em;
-	margin: 0 0 0 5.1em;
+	line-height: 3em;
+	margin: 0 0 0 3em;
 	padding: 0 0.5em;
     }
 
 
-    div[class*="menu"].show_menu li li.selected_profil {
+    div[class*="menu"].show_menu li.selected_profil > a[href*="/"],
+    #menu_horizontal.show_menu li.selected_profil > a[href*="/"]{
 	border-left: 5px solid #00C000;
-	margin-left: -5px:
+	margin-left: -10px;
+	padding-left: 5px;
     }
 
 
     div:not(.boite)[class*="menu"]:after {
 	content: '';
-	height: 5em;
-	width: 5em;
-	background: #333 url(../images/buttons/menu.png) no-repeat center center;
+	height: 3em;
+	width: 3em;
+	background: #333 url(../images/buttons/menu.png) no-repeat center center / 2em;
+	background-size: 32px 32px;
 	float: left;
 	cursor: pointer;
     }
 
 
     div:not(.boite)[class*="menu"].show_menu:after {
-	background: #333 url(../images/buttons/close_menu.png) no-repeat center center;
+	background: #333 url(../images/buttons/close_menu.png) no-repeat center center / 2em;
     }
 
 
     #menu_horizontal ul li ul {
 	
     }
+
+
+    #menu_horizontal a {
+    	background: none;
+    }
+
     
     /** WIDGET **/