CandiAnne Posted June 23, 2017 Share Posted June 23, 2017 I am working on a site to make it look and work like the images below. I got the push menu figured out because I found the tutorial here. I have the 2nd div for the line toggle and and the logo and the 3rd div for the main content Problem is I don't know how to make the 2nd div full length height: 100% didn't work nor do I knoq how to center the lines on top or center the logo in the center of the div's length. Underneath the photos is my current code. Please assist as this is a ballpark I've never played in. Thank you in advance !!!!!!!!! <head> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #212121; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav p { position: absolute; bottom: 100px; color: #CACFD2; font-size: 12px; left:10%; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .sidenav a.mail { color: #CACFD2; font-size: 12px; left:10%; padding: 0; text-decoration: none; } #logozone { background-color: #212121; transition: margin-left .5s; float: left; width: 10%; height: 100%; padding: 2px; } img { display: block; margin: auto; width: 50%; } @media screen and (max-height: 450px) { .sidenav {padding-top: 2px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">Home</a> <a href="#">Current Projects</a> <p>client info</p> </div> <div id="logozone"> <span style="text-align:center; font-size:30px;color:#CACFD2;cursor:pointer" onclick="openNav()">☰ <div><img src="here.jpg"></div> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("logozone").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("logozone").style.marginLeft= "0"; } </script> </div> <div>This is a the main content area</div> </body> Link to comment Share on other sites More sharing options...
Junitar Posted June 24, 2017 Share Posted June 24, 2017 (edited) You have to set your html and body height to 100% to make your div height: 100% work. I guess you want to center your logo vertically like in the image you showed. To do so, you can either use flexbox or if you want to support IE ≤ 9, you can wrap your logo in a div the size of your logo and style it like so .logo_wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100px; /* height of your logo */ width: 100px; /* width of your logo */ margin: auto } BTW, you've an extra closing div in your code right after the closing script tag. Edited June 24, 2017 by Junitar Link to comment Share on other sites More sharing options...
dsonesuk Posted June 24, 2017 Share Posted June 24, 2017 Your menu toggle is completely different from the one in images Yours: The open and close button elements are in different elements, one in the menu itself, the other in logo div. Images: both open and close buttons are in logo div, only one of these show at a time, open to show menu, close to hide menu. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now