（汉堡包图标）响应式菜单上带有toggleClass功能的.reveal类未正确定位？

Question

When I click the hamburger icon and the div containing the .reveal menu is revealed via the toggleclass function using css with transform: translate, and no matter where i position the .reveal with CSS it has a large gap between the beginning of the .responsive-menu element and responsive-menu.reveal class. This results in not aligning the menus text to just under the header and seems to start further down the .responsive-nav container class? any help would be greatly appreciated.

I would like the revealed menu to have the text start just under the header wrapper. Thanks

 jQuery( document ).ready( function ($) { var $nav = $( '.responsive-nav' ), $ham = $( '#hamburger' ); $ham.on( 'click', function () { $ham.toggleClass( 'open' ); $nav.toggleClass( 'reveal' ); } ); } ); 

 /*------------------------------------*\\ MAIN \\*------------------------------------*/ /* global box-sizing */ *, *:after, *:before { -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* html element 62.5% font-size for REM use */ html { font-size:62.5%; } body { font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#444; } /* clear */ .clear:before, .clear:after { content:' '; display:table; } .clear:after { clear:both; } .clear { *zoom:1; } img { max-width:100%; vertical-align:bottom; } a { color:#444; text-decoration:none; } a:hover { color:#444; } a:focus { outline:0; } a:hover, a:active { outline:0; } input:focus { outline:0; border:1px solid #04A4CC; } /*------------------------------------*\\ STRUCTURE \\*------------------------------------*/ /* container all content ends in footer */ #container { width: 100%; margin-top: 71px; height: 100%; clear: both; z-index: 0; } @media (max-width: 450px){ #container { display: flex; width: 100%; margin-top: 50px; height: 2000px; z-index: 0; } } /* header */ /* ==== WRAPPER FOR HEADER START ==== */ .wrapper { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 0; height: 80px; top: 0; z-index: 1; border-bottom: solid 1px #eee; } .wrapper.hidden { transform: translate3d(0,-100%,0); } /* ==== WRAPPER FOR HEADER @ MEDIA MAX WIDTH 450 PX ==== */ @media (max-width: 899px){ .wrapper { display: flex; width: 100%; margin: 0 auto; padding: 0; height: 70px; } } /* ==== WRAPPER FOR HEADER END ==== */ /* ===== SOCIAL MEDIA MENU START ==== */ /* ===== SOCIAL MENU MAX WIDTH 899 PX ==== */ @media only screen and (max-width: 899px){ .socials { width: 20%; display: flex; flex-wrap: wrap; align-items: center; border-left: 2px solid #eee; margin-right: 2.5%; padding-left: 2.5%; } .socials ul li { height: 35px; width: 35px; } .socials ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; padding: 0; width: 100%; justify-content: space-around; } .socials li img { max-height: 35px; } } /* ===== SOCIAL MENU MAX WIDTH 899 PX END ==== */ @media only screen and (min-width: 900px) { .socials { width: 17.5%; display: flex; flex-wrap: wrap; align-items: center; border-left: 2px solid #eee; margin-right: 2.5%; padding-left: 2.5%; } .socials ul li { height: 40px; width: 40px; } .socials ul { display: flex; list-style: none; align-items: center; padding: 0; width: 100%; justify-content: space-around; } .socials li img { max-height: 40px; } } /* ===== SOCIAL MENU MIN WIDTH 900 PX END ==== */ /* ===== SOCIAL MEDIA MENU END ==== */ .header { } /* logo */ .logo-header { width: 27.5%; display: flex; flex-wrap: wrap; height: 80px; align-items: center; margin-left: 2.5%; } .logo-header img { display: flex; flex-wrap: wrap; height: 60px; width: 60px; } @media only screen and (max-width: 899px){ .logo-header { width: 27.5%; display: flex; flex-wrap: wrap; height: 70px; align-items: center; margin-left: 2.5%; } .logo-header img { display: flex; flex-wrap: wrap; height: 50px; width: 50px; } } /* nav */ /* ===== FULLSCREEN NAVIGATION MENU START ==== */ /* ==== WORDPRESS PRIMARY MENU ABOVE 769 PX START ==== */ .site-nav { width: 50%; display: flex; flex-wrap: wrap; font-size: 2.4rem; font-weight: 400; font-family: 'Josefin Sans', sans-serif; justify-content: flex-end; padding-right: 2.5%; } .site-nav ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; } .site-nav ul:before, .site-nav ul:after { content: ""; display: table; } .site-nav ul:after { clear: both; } .site-nav ul { *zoom: 1; } .site-nav ul li { display: inline-block; color: #949494; text-decoration: none; padding-left: 1.6rem; } .site-nav ul li a { display: inline-block; color: #949494; text-decoration: none; } .site-nav ul li a:hover { display: inline-block; color: #555555; text-decoration: none; } li.current-menu-item a { color: #555555 !important; text-decoration: none; } @media only screen and (max-width: 899px){ .site-nav { font-size: 2rem; padding-right: 3.5%; } } /* ==== WORDPRESS PRIMARY MENU ABOVE 769 PX END ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ---- DONT SHOW RESPONSIVE IN FULL SCREEN ---- */ @media only screen and (min-width: 769px) { .responsive-nav { display: none; } .responsive-nav ul { display: none; } .responsive-nav li { display: none; } } /* ---- DONT SHOW RESPONSIVE IN FULL SCREEN END ---- */ /* ===== RESPONSIVE NAV MOBILE MEDIA QUERY @ MIN-MAX 451-768 PX ==== */ @media only screen and (max-width: 768px) { .site-nav { display: none; } .responsive-nav { position: fixed; top: 70px; right: 0; bottom: 0; display: block; font-size: 2.4rem; font-weight: 400; width: 50vw; height: 100vh; font-family: 'Josefin Sans', sans-serif; background-color: #f1f1f1; transform: translateX( 100% ); transition: transform 0.5s ease-in-out; } .responsive-nav.reveal { transform: translateX( 0 ); } .responsive-nav ul { display: block; padding-left: 0px !important; font-family: 'Josefin Sans', sans-serif; font-size: 2rem; list-style: none; } .responsive-nav li { display: block; padding: 0; position: relative; } .responsive-nav a:hover { color: #555555; } .responsive-nav li:first-child { display: block; padding-top: 10px; position: relative; } .responsive-nav a { display: block; padding: 0; text-align: center; text-decoration: none; color: #949494; position: relative; } } @media only screen and (max-width: 768px) { .responsive-hide { width: 47.5%; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: flex-end; padding-right: 2.5%; } .toggle-nav { display: flex; flex-flow: row; flex-wrap: wrap; align-items: center; height: 70px; } #hamburger { display: flex; flex-direction: column; align-items: center; width: 36px; height: 20px; color: #949494; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #hamburger span { color: #949494; display: block; position: relative; height: 2px; width: 100%; background: #949494; border-radius: 2px; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #hamburger span:nth-child(1) { top: 0px; } #hamburger span:nth-child(2) { top: 8px; } #hamburger span:nth-child(3) { top: 16px; } #hamburger.open span:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } #hamburger.open span:nth-child(2) { opacity: 0; -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } #hamburger.open span:nth-child(3) { top: 8px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #hamburger:hover { cursor: pointer; color: #555555; } } /* ===== HAMBURGER MOBILE MEDIA QUERY @ MEDIA QUERY @ MIN-MAX 451-768 PX END ==== */ 

 <!-- header --> <header class="wrapper"> <div class="logo-header"> <img src= "http://testsiteclash.co.uk/wp-content/uploads/2017/03/luke-logo-layers-copy.png"> </div> <!-- responsive nav --> <div class="responsive-hide"> <div class="toggle-nav"> <div id="hamburger"> <span></span> <span></span> <span></span> </div> </div> <nav class="responsive-nav"> <ul id="reveal" class="responsive-nav"><li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-32"><a href="http://testsiteclash.co.uk/">Home</a></li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://testsiteclash.co.uk/about">About</a></li> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://testsiteclash.co.uk/gallery">Gallery</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://testsiteclash.co.uk/contact">Contact</a></li> </ul> </nav> </div> <!-- responsive nav --> <!-- nav --> <nav class="site-nav"> <ul><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="http://testsiteclash.co.uk/">Home</a></li> <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://testsiteclash.co.uk/about">About</a></li> <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://testsiteclash.co.uk/blog">Blog</a></li> <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://testsiteclash.co.uk/contact">Contact</a></li> </ul> </nav> <!-- /nav --> <div class="socials"> <ul> <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/facebook-icon.png" id="facebook" onmouseover="newPicture()" onmouseout="oldPicture()"/></a></li> <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/insta-icon.png" id="instagram" onmouseover="newPicture1()" onmouseout="oldPicture1()"/></a></li> <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/twitter-icon.png" id="twitter" onmouseover="newPicture2()" onmouseout="oldPicture2()"/></a></li> <!--<li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/pinterest-icon.png" id="pinterest" onmouseover="newPicture3()" onmouseout="oldPicture3()"/></a></li>--> </ul> </div> </header> <!-- /header --> 

Answer 1

Seems like all you need to do is remove the .responsive-nav class from #reveal . No need for both to have that class. The reason that messes up the layout is the class .responsive-nav has top: 70px , that is being applied to the outer nav and the inner ul#reveal creating unnecessary space between the top of the nav.responsive-nav and top of ul#reveal.responsive-nav

 jQuery(document).ready(function($) { var $nav = $('.responsive-nav'), $ham = $('#hamburger'); $ham.on('click', function() { $ham.toggleClass('open'); $nav.toggleClass('reveal'); }); }); 

 /*------------------------------------*\\ MAIN \\*------------------------------------*/ /* global box-sizing */ *, *:after, *:before { -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* html element 62.5% font-size for REM use */ html { font-size: 62.5%; } body { font: 300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; } /* clear */ .clear:before, .clear:after { content: ' '; display: table; } .clear:after { clear: both; } .clear { *zoom: 1; } img { max-width: 100%; vertical-align: bottom; } a { color: #444; text-decoration: none; } a:hover { color: #444; } a:focus { outline: 0; } a:hover, a:active { outline: 0; } input:focus { outline: 0; border: 1px solid #04A4CC; } /*------------------------------------*\\ STRUCTURE \\*------------------------------------*/ /* container all content ends in footer */ #container { width: 100%; margin-top: 71px; height: 100%; clear: both; z-index: 0; } @media (max-width: 450px) { #container { display: flex; width: 100%; margin-top: 50px; height: 2000px; z-index: 0; } } /* header */ /* ==== WRAPPER FOR HEADER START ==== */ .wrapper { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 0; height: 80px; top: 0; z-index: 1; border-bottom: solid 1px #eee; } .wrapper.hidden { transform: translate3d(0, -100%, 0); } /* ==== WRAPPER FOR HEADER @ MEDIA MAX WIDTH 450 PX ==== */ @media (max-width: 899px) { .wrapper { display: flex; width: 100%; margin: 0 auto; padding: 0; height: 70px; } } /* ==== WRAPPER FOR HEADER END ==== */ /* ===== SOCIAL MEDIA MENU START ==== */ /* ===== SOCIAL MENU MAX WIDTH 899 PX ==== */ @media only screen and (max-width: 899px) { .socials { width: 20%; display: flex; flex-wrap: wrap; align-items: center; border-left: 2px solid #eee; margin-right: 2.5%; padding-left: 2.5%; } .socials ul li { height: 35px; width: 35px; } .socials ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; padding: 0; width: 100%; justify-content: space-around; } .socials li img { max-height: 35px; } } /* ===== SOCIAL MENU MAX WIDTH 899 PX END ==== */ @media only screen and (min-width: 900px) { .socials { width: 17.5%; display: flex; flex-wrap: wrap; align-items: center; border-left: 2px solid #eee; margin-right: 2.5%; padding-left: 2.5%; } .socials ul li { height: 40px; width: 40px; } .socials ul { display: flex; list-style: none; align-items: center; padding: 0; width: 100%; justify-content: space-around; } .socials li img { max-height: 40px; } } /* ===== SOCIAL MENU MIN WIDTH 900 PX END ==== */ /* ===== SOCIAL MEDIA MENU END ==== */ .header {} /* logo */ .logo-header { width: 27.5%; display: flex; flex-wrap: wrap; height: 80px; align-items: center; margin-left: 2.5%; } .logo-header img { display: flex; flex-wrap: wrap; height: 60px; width: 60px; } @media only screen and (max-width: 899px) { .logo-header { width: 27.5%; display: flex; flex-wrap: wrap; height: 70px; align-items: center; margin-left: 2.5%; } .logo-header img { display: flex; flex-wrap: wrap; height: 50px; width: 50px; } } /* nav */ /* ===== FULLSCREEN NAVIGATION MENU START ==== */ /* ==== WORDPRESS PRIMARY MENU ABOVE 769 PX START ==== */ .site-nav { width: 50%; display: flex; flex-wrap: wrap; font-size: 2.4rem; font-weight: 400; font-family: 'Josefin Sans', sans-serif; justify-content: flex-end; padding-right: 2.5%; } .site-nav ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; } .site-nav ul:before, .site-nav ul:after { content: ""; display: table; } .site-nav ul:after { clear: both; } .site-nav ul { *zoom: 1; } .site-nav ul li { display: inline-block; color: #949494; text-decoration: none; padding-left: 1.6rem; } .site-nav ul li a { display: inline-block; color: #949494; text-decoration: none; } .site-nav ul li a:hover { display: inline-block; color: #555555; text-decoration: none; } li.current-menu-item a { color: #555555 !important; text-decoration: none; } @media only screen and (max-width: 899px) { .site-nav { font-size: 2rem; padding-right: 3.5%; } } /* ==== WORDPRESS PRIMARY MENU ABOVE 769 PX END ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ---- DONT SHOW RESPONSIVE IN FULL SCREEN ---- */ @media only screen and (min-width: 769px) { .responsive-nav { display: none; } .responsive-nav ul { display: none; } .responsive-nav li { display: none; } } /* ---- DONT SHOW RESPONSIVE IN FULL SCREEN END ---- */ /* ===== RESPONSIVE NAV MOBILE MEDIA QUERY @ MIN-MAX 451-768 PX ==== */ @media only screen and (max-width: 768px) { .site-nav { display: none; } .responsive-nav { position: fixed; top: 70px; right: 0; bottom: 0; display: block; font-size: 2.4rem; font-weight: 400; width: 50vw; height: 100vh; font-family: 'Josefin Sans', sans-serif; background-color: #f1f1f1; transform: translateX( 100%); transition: transform 0.5s ease-in-out; } .responsive-nav.reveal { transform: translateX( 0); } .responsive-nav ul { display: block; padding-left: 0px !important; font-family: 'Josefin Sans', sans-serif; font-size: 2rem; list-style: none; } .responsive-nav li { display: block; padding: 0; position: relative; } .responsive-nav a:hover { color: #555555; } .responsive-nav li:first-child { display: block; padding-top: 10px; position: relative; } .responsive-nav a { display: block; padding: 0; text-align: center; text-decoration: none; color: #949494; position: relative; } } @media only screen and (max-width: 768px) { .responsive-hide { width: 47.5%; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: flex-end; padding-right: 2.5%; } .toggle-nav { display: flex; flex-flow: row; flex-wrap: wrap; align-items: center; height: 70px; } #hamburger { display: flex; flex-direction: column; align-items: center; width: 36px; height: 20px; color: #949494; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #hamburger span { color: #949494; display: block; position: relative; height: 2px; width: 100%; background: #949494; border-radius: 2px; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #hamburger span:nth-child(1) { top: 0px; } #hamburger span:nth-child(2) { top: 8px; } #hamburger span:nth-child(3) { top: 16px; } #hamburger.open span:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } #hamburger.open span:nth-child(2) { opacity: 0; -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } #hamburger.open span:nth-child(3) { top: 8px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #hamburger:hover { cursor: pointer; color: #555555; } } /* ===== HAMBURGER MOBILE MEDIA QUERY @ MEDIA QUERY @ MIN-MAX 451-768 PX END ==== */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- header --> <header class="wrapper"> <div class="logo-header"> <img src="http://testsiteclash.co.uk/wp-content/uploads/2017/03/luke-logo-layers-copy.png"> </div> <!-- responsive nav --> <div class="responsive-hide"> <div class="toggle-nav"> <div id="hamburger"> <span></span> <span></span> <span></span> </div> </div> <nav class="responsive-nav"> <ul id="reveal"> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-32"><a href="http://testsiteclash.co.uk/">Home</a></li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://testsiteclash.co.uk/about">About</a></li> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://testsiteclash.co.uk/gallery">Gallery</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://testsiteclash.co.uk/contact">Contact</a></li> </ul> </nav> </div> <!-- responsive nav --> <!-- nav --> <nav class="site-nav"> <ul> <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="http://testsiteclash.co.uk/">Home</a></li> <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://testsiteclash.co.uk/about">About</a></li> <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://testsiteclash.co.uk/blog">Blog</a></li> <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://testsiteclash.co.uk/contact">Contact</a></li> </ul> </nav> <!-- /nav --> <div class="socials"> <ul> <li> <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/facebook-icon.png" id="facebook" onmouseover="newPicture()" onmouseout="oldPicture()" /></a> </li> <li> <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/insta-icon.png" id="instagram" onmouseover="newPicture1()" onmouseout="oldPicture1()" /></a> </li> <li> <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/twitter-icon.png" id="twitter" onmouseover="newPicture2()" onmouseout="oldPicture2()" /></a> </li> <!--<li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/pinterest-icon.png" id="pinterest" onmouseover="newPicture3()" onmouseout="oldPicture3()"/></a></li>--> </ul> </div> </header> <!-- /header --> 

Answer 2

 jQuery( document ).ready( function ($) { var $nav = $( '.responsive-nav' ), $ham = $( '#hamburger' ); $ham.on( 'click', function () { $ham.toggleClass( 'open' ); $nav.toggleClass( 'reveal' ); } ); } ); 

 /*------------------------------------*\\ MAIN \\*------------------------------------*/ /* global box-sizing */ *, *:after, *:before { -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* html element 62.5% font-size for REM use */ html { font-size:62.5%; } body { font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#444; } /* clear */ .clear:before, .clear:after { content:' '; display:table; } .clear:after { clear:both; } .clear { *zoom:1; } img { max-width:100%; vertical-align:bottom; } a { color:#444; text-decoration:none; } a:hover { color:#444; } a:focus { outline:0; } a:hover, a:active { outline:0; } input:focus { outline:0; border:1px solid #04A4CC; } /*------------------------------------*\\ STRUCTURE \\*------------------------------------*/ /* container all content ends in footer */ #container { width: 100%; margin-top: 71px; height: 100%; clear: both; z-index: 0; } @media (max-width: 450px){ #container { display: flex; width: 100%; margin-top: 50px; height: 2000px; z-index: 0; } } /* header */ /* ==== WRAPPER FOR HEADER START ==== */ .wrapper { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 0; height: 80px; top: 0; z-index: 1; border-bottom: solid 1px #eee; } .wrapper.hidden { transform: translate3d(0,-100%,0); } /* ==== WRAPPER FOR HEADER @ MEDIA MAX WIDTH 450 PX ==== */ @media (max-width: 899px){ .wrapper { display: flex; width: 100%; margin: 0 auto; padding: 0; height: 70px; } } /* ==== WRAPPER FOR HEADER END ==== */ /* ===== SOCIAL MEDIA MENU START ==== */ /* ===== SOCIAL MENU MAX WIDTH 899 PX ==== */ @media only screen and (max-width: 899px){ .socials { width: 20%; display: flex; flex-wrap: wrap; align-items: center; border-left: 2px solid #eee; margin-right: 2.5%; padding-left: 2.5%; } .socials ul li { height: 35px; width: 35px; } .socials ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; padding: 0; width: 100%; justify-content: space-around; } .socials li img { max-height: 35px; } } /* ===== SOCIAL MENU MAX WIDTH 899 PX END ==== */ @media only screen and (min-width: 900px) { .socials { width: 17.5%; display: flex; flex-wrap: wrap; align-items: center; border-left: 2px solid #eee; margin-right: 2.5%; padding-left: 2.5%; } .socials ul li { height: 40px; width: 40px; } .socials ul { display: flex; list-style: none; align-items: center; padding: 0; width: 100%; justify-content: space-around; } .socials li img { max-height: 40px; } } /* ===== SOCIAL MENU MIN WIDTH 900 PX END ==== */ /* ===== SOCIAL MEDIA MENU END ==== */ .header { } /* logo */ .logo-header { width: 27.5%; display: flex; flex-wrap: wrap; height: 80px; align-items: center; margin-left: 2.5%; } .logo-header img { display: flex; flex-wrap: wrap; height: 60px; width: 60px; } @media only screen and (max-width: 899px){ .logo-header { width: 27.5%; display: flex; flex-wrap: wrap; height: 70px; align-items: center; margin-left: 2.5%; } .logo-header img { display: flex; flex-wrap: wrap; height: 50px; width: 50px; } } /* nav */ /* ===== FULLSCREEN NAVIGATION MENU START ==== */ /* ==== WORDPRESS PRIMARY MENU ABOVE 769 PX START ==== */ .site-nav { width: 50%; display: flex; flex-wrap: wrap; font-size: 2.4rem; font-weight: 400; font-family: 'Josefin Sans', sans-serif; justify-content: flex-end; padding-right: 2.5%; } .site-nav ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; } .site-nav ul:before, .site-nav ul:after { content: ""; display: table; } .site-nav ul:after { clear: both; } .site-nav ul { *zoom: 1; } .site-nav ul li { display: inline-block; color: #949494; text-decoration: none; padding-left: 1.6rem; } .site-nav ul li a { display: inline-block; color: #949494; text-decoration: none; } .site-nav ul li a:hover { display: inline-block; color: #555555; text-decoration: none; } li.current-menu-item a { color: #555555 !important; text-decoration: none; } @media only screen and (max-width: 899px){ .site-nav { font-size: 2rem; padding-right: 3.5%; } } /* ==== WORDPRESS PRIMARY MENU ABOVE 769 PX END ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ===== RESPOSIVE NAV START ==== */ /* ---- DONT SHOW RESPONSIVE IN FULL SCREEN ---- */ @media only screen and (min-width: 769px) { .responsive-nav { display: none; } .responsive-nav ul { display: none; } .responsive-nav li { display: none; } } /* ---- DONT SHOW RESPONSIVE IN FULL SCREEN END ---- */ /* ===== RESPONSIVE NAV MOBILE MEDIA QUERY @ MIN-MAX 451-768 PX ==== */ @media only screen and (max-width: 768px) { .site-nav { display: none; } .responsive-nav { position: fixed; top: 70px; right: 0; bottom: 0; display: block; font-size: 2.4rem; font-weight: 400; width: 50vw; height: 100vh; font-family: 'Josefin Sans', sans-serif; background-color: #f1f1f1; transform: translateX( 100% ); transition: transform 0.5s ease-in-out; } .responsive-nav.reveal { transform: translateX( 0 ); } .responsive-nav ul { display: block; padding-left: 0px !important; font-family: 'Josefin Sans', sans-serif; font-size: 2rem; list-style: none; } .responsive-nav li { display: block; padding: 0; position: relative; } .responsive-nav a:hover { color: #555555; } .responsive-nav li:first-child { display: block; padding-top: 10px; position: relative; } .responsive-nav a { display: block; padding: 0; text-align: center; text-decoration: none; color: #949494; position: relative; } } @media only screen and (max-width: 768px) { .responsive-hide { width: 47.5%; display: flex; flex-flow: row; flex-wrap: wrap; justify-content: flex-end; padding-right: 2.5%; } .toggle-nav { display: flex; flex-flow: row; flex-wrap: wrap; align-items: center; height: 70px; } #hamburger { display: flex; flex-direction: column; align-items: center; width: 36px; height: 20px; color: #949494; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #hamburger span { color: #949494; display: block; position: relative; height: 2px; width: 100%; background: #949494; border-radius: 2px; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #hamburger span:nth-child(1) { top: 0px; } #hamburger span:nth-child(2) { top: 8px; } #hamburger span:nth-child(3) { top: 16px; } #hamburger.open span:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } #hamburger.open span:nth-child(2) { opacity: 0; -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } #hamburger.open span:nth-child(3) { top: 8px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #hamburger:hover { cursor: pointer; color: #555555; } } /* ===== HAMBURGER MOBILE MEDIA QUERY @ MEDIA QUERY @ MIN-MAX 451-768 PX END ==== */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- header --> <header class="wrapper"> <div class="logo-header"> <img src= "http://testsiteclash.co.uk/wp-content/uploads/2017/03/luke-logo-layers-copy.png"> </div> <!-- responsive nav --> <div class="responsive-hide"> <div class="toggle-nav"> <div id="hamburger"> <span></span> <span></span> <span></span> </div> </div> <nav class="responsive-nav"> <ul id="reveal" class=""><li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-32"><a href="http://testsiteclash.co.uk/">Home</a></li> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://testsiteclash.co.uk/about">About</a></li> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://testsiteclash.co.uk/gallery">Gallery</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://testsiteclash.co.uk/contact">Contact</a></li> </ul> </nav> </div> <!-- responsive nav --> <!-- nav --> <nav class="site-nav"> <ul><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="http://testsiteclash.co.uk/">Home</a></li> <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://testsiteclash.co.uk/about">About</a></li> <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://testsiteclash.co.uk/blog">Blog</a></li> <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://testsiteclash.co.uk/contact">Contact</a></li> </ul> </nav> <!-- /nav --> <div class="socials"> <ul> <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/facebook-icon.png" id="facebook" onmouseover="newPicture()" onmouseout="oldPicture()"/></a></li> <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/insta-icon.png" id="instagram" onmouseover="newPicture1()" onmouseout="oldPicture1()"/></a></li> <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/twitter-icon.png" id="twitter" onmouseover="newPicture2()" onmouseout="oldPicture2()"/></a></li> <!--<li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/pinterest-icon.png" id="pinterest" onmouseover="newPicture3()" onmouseout="oldPicture3()"/></a></li>--> </ul> </div> </header> <!-- /header -->