rs header

web/app/themes/la_mine/src/assets/scss/components/_header.scss

@@ -1,50 +1,65 @@
 header{
     section{
-        position: relative;
-        figure{
-            a{
-                position: relative;
-                display: block;
-                width: max-content;
-                height: calc( #{$heightLogo} / 2 ) ;
-                transition: 0.5s all ease;
-                @media screen and (min-width: 576px) {
-                    height: $heightLogo;
-                }
-                img{
-                    z-index: 3;
+        &.logo{
+            position: relative;
+            figure{
+                a{
                     position: relative;
-                }
-                span{
                     display: block;
-                }
-                #lumiR_logo{
-                    @include logoLamine(1, calc(#{$heightLogo} / 5 ), calc(#{$heightLogo} / 5), $colorYellow, 25px, 35px);
-                   
+                    width: max-content;
+                    height: calc( #{$heightLogo} / 2 ) ;
+                    transition: 0.5s all ease;
                     @media screen and (min-width: 576px) {
-                        @include logoLamine(1, calc(#{$heightLogo} / 3), calc(#{$heightLogo} / 3), $colorYellow, 50px, 70px);
+                        height: $heightLogo;
                     }
-
-                }
-                #fond_logo{
-                    @include logoLamine(0, calc(#{$heightLogo}), calc(#{$heightLogo}), $colorWhite, -70%, 30%);
-                    
-                    @media screen and (min-width: 576px) {
-                        @include logoLamine(0, calc(#{$heightLogo} * 2 ), calc(#{$heightLogo} * 2 ), $colorWhite, -70%, 30%);
+                    img{
+                        z-index: 3;
+                        position: relative;
+                    }
+                    span{
+                        display: block;
                     }
-
-                }
-                &:hover{
-                    height: $heightLogoHover;
-                    transition: 0.5s all ease;
                     #lumiR_logo{
-                        @include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px); 
+                        @include logoLamine(1, calc(#{$heightLogo} / 5 ), calc(#{$heightLogo} / 5), $colorYellow, 25px, 35px);
+                    
+                        @media screen and (min-width: 576px) {
+                            @include logoLamine(1, calc(#{$heightLogo} / 3), calc(#{$heightLogo} / 3), $colorYellow, 50px, 70px);
+                        }
                     }
                     #fond_logo{
-                        @include logoLamineHover(calc(#{$heightLogoHover} + 75px), calc(#{$heightLogoHover} + 75px), -50%, 50%);
-                    }  
+                        @include logoLamine(0, calc(#{$heightLogo}), calc(#{$heightLogo}), $colorWhite, -70%, 30%);
+                        
+                        @media screen and (min-width: 576px) {
+                            @include logoLamine(0, calc(#{$heightLogo} * 2 ), calc(#{$heightLogo} * 2 ), $colorWhite, -70%, 30%);
+                        }
+                    }
+                    &:hover{
+                        height: $heightLogoHover;
+                        transition: 0.5s all ease;
+                        #lumiR_logo{
+                            @include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px); 
+                        }
+                        #fond_logo{
+                            @include logoLamineHover(calc(#{$heightLogoHover} + 75px), calc(#{$heightLogoHover} + 75px), -50%, 50%);
+                        }  
+                    }
                 }
             }
         }
+        &.nav-main{
+            justify-content: end;
+            figure{
+                & > div{
+                    width: 30px;
+                    height: 100%;
+                    &:first-child{
+                        margin-right: 0.5rem;
+                    }
+                }
+            }
+            nav{
+                display: none;
+            }
+        }
     }
 }

web/app/themes/la_mine/templates/components/header.twig

@@ -8,20 +8,20 @@
 	</figure>
 </section>
 
-<section class="nav-main row">
-	<div class="rs col">		
-		<figure id="facebook">
+<section class="nav-main col-6 d-flex">
+	<figure class="rs row">		
+		<div id="facebook">
 			<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
 				<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
 			</a>
-		</figure>
-		<figure id="insta">
+		</div>
+		<div id="insta">
 			<a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}">
 				<img src="{{theme.link}}/dist//assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
 			</a>
-		</figure>
-	</div>
-	<div class="burger col">
+		</div>
+	</figure>
+	<div class="burger col-1">
 		<div class="fond_burger">
 			<button class="hamburger hamburger--slider" type="button">
 				<span class="hamburger-box">