You can position the menu by adding a position: relative;
and top: 70px
within @media screen
to ul
of the menu (the 70px
value you can adjust until the menu is in the desired location from the top) :
.multi-header ul{
display: none;
position: relative;
top: 70px;
}
And also within @media screen
, add the style below to convert <li>
to block
, so that one is below the other in the menu:
.multi-header li{
display: block;
}
See working (I disabled display: none
of the menu for viewing):
$(document).ready(function() {
function toggleSidebar() {
console.log("ayy");
$(".button").toggleClass("active");
$(".wrapper").toggleClass("move-to-left");
// $("main").toggleClass("move-to-left");
// $(".sidebar-item").toggleClass("active");
$(".multi-header ul").toggleClass("menuativo menunaoativo");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
// $(document).keyup(function(e) {
// if (e.keyCode === 27) {
// toggleSidebar();
// }
// });
});
html, body{
margin:0px;
padding: 0px;
color:#8f8f8f;
font-family: 'Open Sans', sans-serif;
}
nav{
padding: 20px;
}
.wrapper{
display:grid;
grid-template-columns:1fr;
grid-auto-rows: minmax(100px,auto);
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
h1{
color:#4c2779;
font-size: 1.5em;
}
/* MENU */
.multi-logo{
height: 60px;
width: 150px;
padding-left: 20px;
}
.multi-header{
display: grid;
grid-template-columns: 1fr 2fr;
}
.multi-header ul{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
.multi-header li{
display: inline-block;
padding: 0px 20px;
}
.multi-header li a{
text-decoration: none;
font-size: 20px;
color: #3d3d3d;
position: relative;
cursor: pointer;
}
/* MENU ANIMATION */
.multi-header li a:hover{
color: #4B2779;
/* opacity: 0.5; */
}
.multi-header li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #4B2779;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.multi-header li a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.menuativo{
display: block;
}
.menunaoativo{
display: none !important;
}
/* MENU ANIMATION */
/* MENU */
/* MEDIA QUERIES */
@media screen and (min-width: 768px){
.multi-header ul{
display: block !important;
}
}
@media screen and (max-width: 767px), screen and (max-width: 767px) and (orientation: landscape), screen and (max-width: 767px) and (orientation: portrait){
.multi-header li{
display: block;
}
.multi-header nav{
height: 30px;
}
.multi-header ul{
position: relative;
top: 70px;
}
.multi-menu-mobile{
display: block;
}
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #4B2779;
margin: 10px auto;
}
.button {
float: right;
cursor: pointer;
}
.button.active .top {
-webkit-transform: translateY(15px) rotateZ(45deg);
-moz-transform: translateY(15px) rotateZ(45deg);
-ms-transform: translateY(15px) rotateZ(45deg);
-o-transform: translateY(15px) rotateZ(45deg);
transform: translateY(15px) rotateZ(45deg);
}
.button.active .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
.button.active .middle {
width: 0;
}
.move-to-left {
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><headerclass="multi-header">
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/173777662/620757677/stock-vector-slide-penguin-logo-template-620757677.jpg"class="multi-logo">
<nav>
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
<ul class="menunaoativo">
<li><a>Home</a></li>
<li><a>Solutions</a></li>
<li><a>Cases</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<section>
<a name="slideShow"></a>
<h1>Banner</h1>
</section>
<section>
<a name="sec1"></a>
<h1>Section 1</h1>
</section>
<section>
<a name="sec2"></a>
<h1>Section 2</h1>
</section>
<section>
<a name="sec3"></a>
<h1>Section 3</h1>
</section>
<footer>
<h1>Footer</h1>''
</footer>
</div>