I need the menu to slide down when the .logo (bird) image button is clicked
PS: the menu slides down when the .toggle (3 line button) is clicked BUT I need the menu to slide down when the .logo (bird) image is clicked
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
/* ----- LOGO -----*/
.logo {
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
/* ------------------------------------------ */
/* PAGE CONTENT TOP BAR */
/* ------------------------------------------ */
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle" class="mobile-nav-toggle">☰</label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://ift.tt/1gUqgD4" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire