F-d-ration_de_groupes/css/_menu_spip.scss

153 lines
2.6 KiB
SCSS

/* Menu SPIP */
/* cette variable permet de dire a quel breakpoint le burger est affiché ou caché */
$burger: $large; // obsolete pour Knacss: on met le breakpoint a "large"
#barnav {
li {
list-style-type: none;
}
a, a:focus, a:hover,a:active {
text-decoration: none;
display: block;
}
}
.on.active {
background-color: #000;
> a {
color: #fff;
padding: 0 1rem;
}
}
img.spip_logo {
vertical-align: bottom;
margin: 0 2rem .5rem 0;
height: 40px;
width: auto;
}
/* hamburger: Version mobile et tablette */
/* @media (max-width: ($burger - 1)) { */
@include respond-to("large") {
button.burgermenu {
position: absolute;
top: 30px;
right: 15px;
//margin-right: 31px;
}
.is-opened .js-sous-menu {
display: block;
}
#barnav {
width: 100%;
li.menu-entree a {
padding: 10px;
}
}
nav > ul {
width: 100%;
position: absolute;
right: -74px;
top: 64px;
}
/* habillage du bloc du menu à afficher sous-menu */
ul.js-sous-menu {
display: none;
width: 100%;
padding: 10px;
background-color: $white;
z-index: $zindex-modal;
right: 0;
a {
@include font-size(h3);
font-weight: $weight-medium;
font-family: $font-family-headings;
}
}
li.menu-entree {
margin: 7px 0 5px 0;
text-align: left;
background-color: rgba(206, 206, 206, 1);
i {
display: none;
}
}
.contact_header {
display: none;
}
}
/* barrenav: Menu desktop */
/*@media (min-width: $burger) { */
@include respond-to("large-up") {
.contact_barrenav {
display: none;
}
.contact_header {
display: block;
}
button.burgermenu {
display: none;
}
ul.js-sous-menu {
opacity: $opacite_header;
display: flex;
justify-content: space-around;
width: 100%;
padding: 0;
> li.menu-entree {
position: relative;
list-style-type: none;
> ul.menu-liste {
left: -193px;
padding: 10px 0 10px 185px;
position: absolute;
flex-direction: column;
width: 932px;
z-index: 599;
}
}
a {
@include font-size(h3);
font-weight: $weight-medium;
font-family: $font-family-headings;
}
i {
padding: 10px;
}
}
}
/* taille des caractères de la barre-nav pour passer en 5 items sur une largeur */
ul.js-sous-menu a {
@include respond-to("large-up") {
font-size: 2rem;
}
@include respond-to("extra-large-up") {
font-size: 2.4rem;
}
}
/* navbar fixed lors du scroll de la page => recup gocryo, à adapter si besoin */
#header.navbar-fixed-top {
position: fixed;
z-index: ($zindex-navigation + 1);
width: 100%;
//padding: 0;
background-color: #fff;
/* img.spip_logo {
margin-top: 1rem;
}*/
}
#barnav .fixed-top {
position: fixed;
z-index: ($zindex-navigation + 1);
}