baz_april/squelettes/scss/styles/_nav.scss

// ------------------------------------------
// Sous-navigation et autres menus
// ------------------------------------------ 

// Habillage general des menus de nav 
.menu { 
	clear: both; 
	margin-bottom: 1.5em; 
	text-align: left; 
	p {}
	ul { 
		margin-bottom: 1.5em;
	}
	ul li {}
	ul li ul { 
		margin-left: 1.5em; 
		list-style: circle;
	}
}

.nav { 
	ul {
		margin:0; 
		padding:0;
	}
	li {
		display: inline;
		line-height:1.2;
	}
	a {
		display: inline-block; 
		padding:0.3em 0 0.2em; 
		margin:0 0.5em 0.4em; 
		text-decoration: none; 
		line-height:1.4; 
		border-bottom:3px solid white;
		.header_initiatives & {
			font-weight:400;
			padding:0.5em;
			margin:0.1rem 0.4rem;
			color: white;
			border:0;
			@include media($bp-medium) {
				padding:0.8rem;
			}
		}
		.on &,
		&.on,
		&:focus,
		&:hover,
		&:active { 
			border-color:$couleurSecondaire;
			.header_initiatives & {
				border-color:$couleurPrincipaleOn;
			}
		}
	}
	
	.pagination { margin:0 0 1rem; }
}
.menucache {
	display: none;
	position: fixed;
	left: 0;
	top: 0px;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index:8;
	cursor: pointer;
	&.cache { display: block;}
}
// menu smart cf js/script.js
// ---------------------------------------- 
.btn-nav {
	position: absolute;
	z-index:10;
	right:$spacer;
	top:0;
	padding:0.4rem;
	border:none;
	background:$couleurPrincipale;
	color: white;
	font-size:0.9em;
	outline: none !important;
	display: none;
	@media ($bp-medium) {
		display: block;
	}
	&.actif {
		color:$couleurPrincipaleDowner;
	}
}

/* header = nav-principale */
.page_header > .page_container {
	 .nav {
		padding-top: ($spacer/2);
		font-size:0.95rem;
		@include media($bp-medium-up) {
			position: relative;
		}
		> ul { 
			text-align: right;
			@include vendor-prefix(transition,all 0.3s ease-in-out);
			@media ($bp-medium) {
				position: absolute;
				background:$couleurPrincipale;
				width:100%;
				top:36px;
				left:-100%;
				padding:$spacer/2 $spacer;
				text-align: center;
				z-index:10;
				&.ouvert{
					left:0;
				}
				a {
					color: white;
					border:0;
					display: block;
					margin:0;
					padding:0.5rem;
					&:hover, &:focus, &.on {
						background:$couleurSecondaire;
					}
				}
				li { 
					display: block;
				}
				.loupe {
					.fas {
						color: white;
					}
					.formulaire_recherche.vu {
						right:50%;
						margin-right:-160px;
						max-width: 320px;
						form {
							padding:0.5rem;
							&:before {
								display: none;
							}
						}
					}
				}
			}
			
			.loupe {
				position: relative;
				display: inline-block !important;
/* 					width:           em(26px); */
/* 					height:          em(26px); */
				span {
					@include visuallyhidden;
				}
				a {
					display: inline;
					padding:0;
					border:0;
					background: none;
					&:hover i.fa-search, &:focus i.fa-search {
						background-color:$couleurSecondaire;
					}
				}
				i.fa-search {
					font-size:1rem;
					border-radius: 20px;
					background-color: $couleurPrincipale;
					padding:7px;
					color:white;
				}
				.formulaire_recherche {
					position: absolute;
					height: auto;
					width: em(350px);
					max-width: em(350px);
					top:-1000px;
					left: auto;
					right:0;
					border-radius: $spacer/2;
					z-index:2;
					@include vendor-prefix(transition,all 0.3s ease-in-out);
					form:before {
						left:0.5rem;
					}
					#recherche {
						width:100%;
					}
					&.vu {
						top:1rem;
					}
				}
			}
		}
		a { 
			font-weight:700;
		}
	}
}

// aside
// ------------------------------------ 
.page_aside {
	.nav { 
		padding:0;
		li {
			display: block;
		}
		a { 
			width:100%;
		}
		& .blog {
			a { 
				line-height:1; 
				padding:1em; 
				font-weight:700;
				p { 
					font-weight:400; 
					margin:0; 
					&.date { 
						font-size:90%; 
						margin:0 0 0.3em;
					}
					&.introduction { 
						font-size:0.8em;
						margin-top:0.5em;
					}
				}
/* 				&:hover, &:focus, &:active, &.on { background:darken($grayLighter,10); color:$couleurPrincipaleDowner; } */
			}
		}
	}
}



// initiatives
.header_initiatives { 
	position:absolute; 
	top:0; 
	left:0; 
	right:0;
	background-color:$couleurPrincipale;
	color:white;
	z-index:9;
	.btn-initiatives {
		font-size: 0.8rem;
		display: none;
		padding: 0.5rem;
		margin-left:-$spacer;
		background:$couleurPrincipale;
		color:white;
		@media ($bp-medium) {
			display: block;
		}
	}
	.nav {
		font-size:0.8rem;
		background:$couleurPrincipale;
		@media ($bp-medium) {
			position: absolute;
			width: 100%;
			top:36px;
			left:-100%;
			@include vendor-prefix(transition,all 0.3s ease-in-out);
			&.ouvert {
				left:0;
			}
			ul, .initiatives {
				display: inline;
			}
			li {
				margin:0;
			}
		}
		.menu-liste .menu-liste {
			li, a {
				margin:0;
			}
		}
	}
	.initiatives {
		font-size:0.8rem;
	}
	.titre_initiatives {
		float:right;
		padding:0.5em;
		@media ($bp-medium) {
			display: none;
		}
	}
	 .initiatives_april {
		float:right;
	}
	// un sous-menu dans initiatives :  .menu-entree.sousinitiatives > .menu-items__lien.sousinitiatives
	.menu-entree.sousinitiatives {
		position: relative;
		> ul {
			@include media($bp-medium-up) {
				position: absolute;
				top:-999em;
				left:0;
				width:150px;
				&.ouvert {
					top:23px;
					li {
						display: block;
						background:$couleurPrincipale;
						a {
							display: block;
						}
					}
				}
			}
		}
		@include media($bp-medium) {
			.menu-items__lien.sousinitiatives {
				display: none;
			}
		}
	}
}