Responsive menu with grid layout

Question

I’m learning grid and responsive layout and don’t know the best way that I could create a "hamburger menu" with it.

So far I’ve managed to make my content wrapper move to the left and leave a space for the menu, but I don’t know how to put the menu in the remaining space here is the exercise link:

https://jsfiddle.net/5kq8pas0/

Can help?

Answer 1

You can position the menu by adding a position: relative; and top: 70px within the @media screen in ul from the menu (the value 70px 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 the @media screen, add the style below to convert the <li> for block, so that one is below the other in the menu:

.multi-header li{
    display: block;
}

See working (I disabled the display: none from the view menu):

$(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>
<header class="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>