Contexte d'empilement DIV CSS
Bonjour à tous,
Je suis programmeur depuis peu, et je rencontre un petit soucis d'empilement à priori.
Plus clairement:
- Je possède une div Navbar, en position fixed,
- Dans celle-ci se trouve un icone de menu mobile, en position absolute.
- Je possède une Div Sidebar, qui est placer juste après la fermeture de ma Navbar dans le code html.
J'aimerais que mon icône menu mobile soit toujours visible (Placer au dessus) de ma Sidebar, car le bouton fais ouverture/fermeture avec un effet de transition 3barre -> 2 barre en croix.
Mal grès des Z-index, et des positions absolute, ou autre, impossible d'avoir le résultat.
Sachant que mon icone est tributaire de ma Navbar, je ne sais pas trop par ou commencer pour corrigé se problème. Un problème d'enfant / parent ?
Ci-joint une petite partie de mon code:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!-- Navbar -->
<div class="navbar">
<div class="container">
<!-- Left - Logo -->
<a class="logo" href="/"><img src="/img/logo.png" alt="MinuXx"></a>
<!-- Right - links -->
<nav class="navigation" role="navigation" aria-label="Navigation principale">
<ul class="menu">
<li class="menu__item"><a href="/nos-offres">Nos offres</a></li>
<li class="menu__item"><a href="/actualites">Actualités</a></li>
<li class="menu__item"><a href="/contact">Contact</a></li>
<li class="menu__item"><a href="/authentification" class="btn btn-blue">Espace client <i class="arrow right-white"></i></a></li>
</ul>
</nav>
<!-- Right - Menu Icon for small screens -->
<div class="icon-mobile toggle--navigation-mobile"><span></span></div>
</div>
</div>
<!-- Sidebar for Small screens -->
<nav class="navigation-mobile" role="navigation" aria-label="Navigation principale sur Mobile">
<ul class="menu">
<li class="menu__item"><a href="/nos-offres">Espace client</a></li>
<li class="menu__item"><a href="/nos-offres">Nos offres</a></li>
<li class="menu__item"><a href="/actualites">Actualités</a></li>
</ul>
</nav> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| html,body{font-family:'Open Sans',Arial; font-size:15px; font-weight:600;}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.container {margin:auto; max-width:1160px; display:flex; padding: 10px 20px}
/* <!-- Navbar - Logo - Navigation - Icone mobile --> */
.navbar {position:fixed; top:0; right:0; left:0; max-width:100%; height:70px; background:white; z-index:100; box-shadow: 0 2px 3px #e5e5e5}
.navbar .logo {width:180px;height:50px;}
.navbar .navigation {display:flex; flex: 1 0 auto; align-items:center; justify-content: flex-end}
.navbar .navigation .menu .menu__item {display:inline-block; padding:0 0 0 40px}
.navbar .navigation .menu .menu__item a:not(.btn-blue):after {content:'';position:relative; margin:auto; top:5px; width:0; height:3px; display:block; transition:width .3s ease, background-color .3s ease}
.navbar .navigation .menu .menu__item a:hover:after {width:100%; background:#2468EB;}
.navbar .icon-mobile {position:absolute; right:0px; width:70px; height:50px; display:none; z-index:115; cursor:pointer;}
.navbar .icon-mobile span {position:absolute; height:3px; width:25px; top:50%; left:50%; background:#000; transform: translate(-50%,-50%); transition:0.3s;}
.navbar .icon-mobile span:before {content:''; position:absolute; top:-8px; height:3px; width:25px; background:#000; transition:0.3s;}
.navbar .icon-mobile span:after {content:''; position:absolute; top:8px; height:3px; width:25px; background:#000; transition:0.3s;}
.navbar .icon-mobile.active span {background:transparent;}
.navbar .icon-mobile.active span:before {transform: rotate(45deg);top:0;}
.navbar .icon-mobile.active span:after {transform: rotate(-45deg);top:0;}
/* <!-- Sidebar Navigation mobile --> */
.navigation-mobile {position:fixed; top:0px; right:0px; bottom:0px; width:250px; max-height:100%; background:white; display:none; z-index:110;}
.navigation-mobile .menu {display:flex; flex-direction:column;}
.navigation-mobile .menu .menu__item {display:block; padding:15px 20px;}
.navigation-mobile .menu .menu__item a {font-size: .9rem;}
.navigation-mobile .menu .menu__item a:hover {color:#181818;} |
Question: Y aurait-il un problème de structuration pour effectuer cela ? Faudrait-il que je sorte mon icône menu de la div Navbar?
Si une âme charitable pourrais m'aider à avancer, je vous en serais très reconnaissant :D
Bien à vous,
Mickael
