khnav/css/khnav_mobile.css

/* Feuille css, partie "moins de 900px de large" pour la barre générale de 
Khaganat et son footer.  */

@media screen and (max-width: 900px) {

.khnav_sticky {
	position:sticky;
	top:0;
	z-index: 999;
	height:3em;
}

.khnav_mobile {
	display:flex;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
	/*position:sticky;*/
	top:0;
	z-index: 999;
	height:3em;
}

.khnav_logo {
	display:none;
}

.khnav_mobile_square {
	height:100%;
	background-color:bisque;
	display: flex;
}

.khnav_mobile > a {
	height:100%;
}

.khnav_logo_mobile {
	max-width: 2em;
	margin: 0;
	padding:0.5em;
	vertical-align: inherit;
	background-color: #8530bf;
}

.khnav_mobile_square label,
.khnav_open_menu, khnav_close_menu {
	height:100%;
	display: flex;
}



/* Pour afficher le menu au clic sur le bouton 
 "~" sélectionne tous les "nav ul" suivant
cf https://developer.mozilla.org/fr/docs/Web/CSS/Sélecteurs_CSS#Les_combinateurs
*/
.khnav_input_mobile[type=checkbox]:checked ~ nav ul {
	display:flex;	
}

.khnav_input_mobile[type=checkbox]:checked ~ nav {
	border-bottom: 0.5em solid #8530bf !important ;
}

.khnav_gen {
	flex-flow : column wrap;
	border:none;
	overflow: auto;
	max-height: 80vh;
	display:block;
}


.khnav_gen ul {
	display: none;
	flex-flow : column wrap;
	width:100%;
	background: #8530bf;
	padding-left: 0;
	color:white;
	padding:0;
}

.khnav_dropdown ul {
	display: flex;
	position: relative;
	clip: initial;
	clip-path: initial;
}

.khnav_dropdown-toggle {
}
.khnav_fleche {
	display: none;
}

.khnav_dropdown-menu li a:hover aside {
	display: none;
}

.khnav_connect {
}

/* Pied de page */
.khfooter::before {
	display: none;
}
.khfooter::after {
	display: none;
}
.khfooter div {
	flex-flow: row wrap;
	justify-content: center;
}

}