fix header

This commit is contained in:
Kevin Tessier 2020-06-28 11:51:13 +02:00
parent 6e390a00dc
commit af6780d3db
2 changed files with 111 additions and 74 deletions

View File

@ -12,8 +12,6 @@
} }
body { body {
width: 300px;
margin: 0 auto;
font-size: 16px; font-size: 16px;
font-family: Universalis ADF Std, sans-serif; font-family: Universalis ADF Std, sans-serif;
padding: 0!important; padding: 0!important;
@ -22,41 +20,86 @@ body {
h1, h2, h3, h5{ h1, h2, h3, h5{
font-family: Millimetre, sans-serif; font-family: Millimetre, sans-serif;
} }
h1, h5, h6{ h1, h5, h6{
text-transform: uppercase; text-transform: uppercase;
} }
img{ img{
width: 100%; width: 100%;
height: auto; height: 100%;
} }
ul{ ul{
padding:0; padding:0;
} }
li {
li ,ul ,ol {
list-style-type:none; list-style-type:none;
} }
a, a:hover{ a, a:hover{
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
.section_accueil {
position: relative;
}
/* START KEVIN */
.burger{
/* START HEADER */
header{
width: 100%;
position: fixed; position: fixed;
top: 20px; z-index: 999;
right: 0; top: 0;
left: 0;
} }
header > .nav-wrapper{
height: fit-content;
}
/* START LOGO */
.logoLamine {
width : 120px;
height: 120px;
}
.logoLamine a{
display: block;
width: 100%;
height: 100%;
}
.logoLamine img{
object-fit: cover;
}
/* END LOGO */
.fond_burger{ /* START RS */
.rs{
padding-top: 10px;
height: fit-content;
}
.rs > div {
width: 30px;
height: 30px;
object-fit: cover;
margin-right: 15px;
}
/* END RS */
/* START NAV */
/* END NAV */
/* START BURGER */
.burger{
padding-top: 10px;
height: fit-content;
}
.fond_burger{
background-image: url('../images/form_burger.svg'); background-image: url('../images/form_burger.svg');
background-position: center; /* Center the image */ background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */ background-repeat: no-repeat; /* Do not repeat the image */
background-size: contain; background-size: contain;
} }
.nav-main{ .nav-main{
display: none; display: none;
position: fixed; position: fixed;
@ -68,31 +111,26 @@ a, a:hover{
.nav-main.is-active{ .nav-main.is-active{
display: block display: block
} }
/* END BURGER */
/* END HEADER */
/* START PAGE HOME */
.section_accueil {
position: relative;
}
/* END PAGE HOME */
/* START KEVIN */
/* END KEVIN */ /* END KEVIN */
.logoLamine {
position: fixed;
margin:0 10px 10px 10px;
width : 200px;
height: 200px;
}
.rs {
position: fixed;
top: 20px;
right: 20px;
margin-right: 80px;
}
.rs img {
width : 40px;
height: 40px;
margin-top: 10px;
opacity: 1;
}
.facebook {
margin-right: 40px;
}
.rs img:hover {
opacity: 0.6;
}
.menu-item { .menu-item {
font-family: Millimetre, sans-serif; font-family: Millimetre, sans-serif;
text-transform: uppercase; text-transform: uppercase;
@ -569,8 +607,12 @@ a, a:hover{
.flickity-page-dots .dot.is-selected { .flickity-page-dots .dot.is-selected {
background: white; background: white;
} }
/*fin gestion des dots*/
/* dot home */
.hero .flickity-page-dots{
bottom: 30px;
}
/*fin gestion des dots*/
footer{ footer{
background-color: rgba(240, 240, 240, 240); background-color: rgba(240, 240, 240, 240);
width: 100%; width: 100%;
@ -620,13 +662,6 @@ footer .insta {
/* END SLIDE PARTENAIRE */ /* END SLIDE PARTENAIRE */
/* START KEVIN */ /* START KEVIN */
header{
z-index: 9999;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.hero{ .hero{
width: 100%; width: 100%;
height: 100vh; height: 100vh;

View File

@ -6,12 +6,13 @@
</head> </head>
{% endblock %} {% endblock %}
<body class="container-fluid {{post.slug}}" data-template="base.twig"> <body class="container-fluid {{post.slug}}" data-template="base.twig">
<header class="header d-flex justify-content-between"> <header class="header d-flex ">
{% block header %} {% block header %}
<div class="logoLamine"> <div class="logoLamine mr-auto">
<a class="hdr-logo-link" href="{{site.url}}"><img src="{{theme.link}}/asset/images/logo_lamine_vect.svg"/></a> <a class="hdr-logo-link" href="{{site.url}}"><img src="{{theme.link}}/asset/images/logo_lamine_vect.svg"/></a>
</div> </div>
<div class="rs row align-items"> <div class="nav-wrapper d-flex align-items-center">
<div class="rs d-flex">
<div class="facebook"> <div class="facebook">
<a target="_blank" href="{{options.facebook.lien_facebook}}"> <a target="_blank" href="{{options.facebook.lien_facebook}}">
<img src="{{ Image(options.facebook.logo_facebook).src }}" /> <img src="{{ Image(options.facebook.logo_facebook).src }}" />
@ -23,7 +24,6 @@
</a> </a>
</div> </div>
</div> </div>
<div class="burger"> <div class="burger">
<div class="fond_burger"> <div class="fond_burger">
<button class="hamburger hamburger--slider" type="button"> <button class="hamburger hamburger--slider" type="button">
@ -33,6 +33,8 @@
</button> </button>
</div> </div>
</div> </div>
</div>
<nav id="nav-main" class="nav-main" role="navigation"> <nav id="nav-main" class="nav-main" role="navigation">
{% include "menu.twig" with {'items': menu.get_items} %} {% include "menu.twig" with {'items': menu.get_items} %}