无法获取滚动功能来显示/隐藏标题？

时间：2017-03-17 15:27:37

标签： javascript jquery css

无法使用此功能在向下滚动时隐藏标题并在向上滚动时重新出现？

       $(function(){
    var lastScrollTop = 0, delta = 5;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();
       if(Math.abs(lastScrollTop - st) <= delta)
          return;
       if (st > lastScrollTop){
           // downscroll code
           $('.wrapper').slideUp('230');
       } else {
          // upscroll code
          $('.wrapper').slideDown('230');
       }
       lastScrollTop = st;
    });
});
/* ---- ALL QUERIES ---- */

/* ---- Wrapper ---- */

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: fixed;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;
                
}

/* ---- Wrapper End --- */

/* ---- 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;
}

/* ---- Logo End --- */

/* ---- Hamburger ---- */

.responsive-hide {
        width: 50%;
        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: 80px;
        
        
    }
    
#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: 9px;
        -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: 5px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    
#hamburger:hover {
        cursor: pointer;
        color: #555555;
    }

/* ---- Hamburger End --- */

/* ---- Responsive Hide Nav ---- */

.responsive-nav {
        position: absolute;
        top: 60px;
        right: 0;
        display: block;
        font-size: 2.4rem;
        font-weight: 400;
        width: 50vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        font-family: 'Josefin Sans', sans-serif;
        background-color: #f1f1f1;
        transform: translateX( 100% );
        transition: transform 0.5s ease-in-out;
        
    }
    
.responsive-nav2 {
        margin: 0;
        
    }
    
.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;   
    }

/* ---- Responsive Hide Nav End --- */

/* ---- Site Nav ---- */

.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;
    
}

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

.socials {
        width: 20%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-left: 2px solid #eee;
        padding: 0 2.5% 0 2.5%;
        
        
}

.socials ul li {
    height: auto;
    width: auto;

}

.socials ul {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 0;
    width: 100%;
    justify-content: space-around;

}

.socials li img {
    max-height: 40px;
}

/* ---- Socials Nav End --- */

@media only screen and (max-width: 450px) {
    
/* ---- Wrapper ---- */

    .wrapper {
        height: 60px;
    }

/* ---- Wrapper End --- */

/* ---- Logo ---- */

    .logo-header {
        height: 60px;
        width:47.5% 
    }

    .logo-header img {
        height: 40px;
        width: 40px;
    }

/* ---- Logo End --- */

/* ---- Hamburger ---- */

    .responsive-hide {
        width: 50%;
    }
    
    .toggle-nav {
        height: 60px;
    }
    

/* ---- Hamburger End --- */

    .socials {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        position: fixed;
        bottom: 0;
        align-items: center;
        padding: 1.5% 25% 1.5% 25%;
        background: #fff;
        transform: translateY( 0 );
        transition: transform 0.5s ease-in-out;
        
    }
    
    .socialshide {
        transform: translateY( 100% );
    }

    .socials ul li {
    height: auto;
    width: auto;

    }

    .socials ul {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 0;
    width: 100%;
    justify-content: space-around;

    }

    .socials li img {
    max-height: 35px;
    }

/* ---- Responsive Hide Nav ---- */

.responsive-nav {
        position: fixed;
        top: 125px;
        font-size: 2.4rem;
        width: 100%;
        height: 66vh;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        transform: translateY( 100% );
        transition: transform 0.5s ease-in-out;
        border-top: solid 1px #eee;
        
        
        
    }
    
    .responsive-nav li:first-child {
        display: block;
        padding-top: 10px;
        position: relative;
        
    }
    
    .responsive-nav2 {
        margin: 0;
        
    }
    
    .reveal {
        transform: translateY( 0 );
          
    }

/* ---- Responsive Hide Nav End --- */
    
/* ---- Site Nav ---- */

    .site-nav {
            display: none;
    }

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

/* ---- Socials Nav End --- */

}

@media only screen and (min-width: 451px) and (max-width: 768px) {
    
/* ---- Wrapper ---- */

    .wrapper {
        height: 60px;
    }

/* ---- Wrapper End --- */

/* ---- Logo ---- */

    .logo-header {
        height: 60px;
            
    }

    .logo-header img {
        height: 40px;
        width: 40px;
    }

/* ---- Logo End --- */

/* ---- Hamburger ---- */

    .responsive-hide {
        width: 45%;
    }
    
    .toggle-nav {
        height: 60px;
    }

/* ---- Hamburger End --- */

/* ---- Responsive Hide Nav ---- */

/* ---- Responsive Hide Nav End --- */

/* ---- Site Nav ---- */

    .site-nav {
        display: none;
    }

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

    .socials {
        width: 25%;
        justify-content: space-around;
        padding: 0;
    }
    
    .socials ul {
        padding: 0 5%;
    }
    
    .socials ul li {
        margin: auto 2.5%;
                
    }

    .socials li img {
        max-width: 100%;
        max-height: 35px;
    }

}
    
/* ---- Socials Nav End --- */
    


@media only screen and (min-width: 769px) and (max-width: 899px) {

/* ---- Wrapper ---- */

    .wrapper {
        height: 70px;
    }

/* ---- Wrapper End --- */

/* ---- Logo ---- */

    .logo-header {
        height: 70px;
           
    }

    .logo-header img {
        height: 50px;
        width: 50px;
    }

/* ---- Logo End --- */

/* ---- Hamburger ---- */

    .responsive-hide {
        display: none;    
    }

/* ---- Hamburger End --- */

/* ---- Responsive Hide Nav ---- */

    .responsive-nav {
        display: none;
        }

    .responsive-nav ul {
        display: none;
        }

    .responsive-nav li {
        display: none;
        }

/* ---- Responsive Hide Nav End --- */

/* ---- Site Nav ---- */

    .site-nav {
        font-size: 2rem;
        padding-right: 3.5%;
    }

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

    .socials {
        justify-content: space-around;
        padding: 0 1.5% 0 1.5%;
        
        
    }

    .socials ul li {
        height: 35px;
        width: 35px;
        
    }

    .socials li img {
        max-height: 35px;
    }

/* ---- Socials Nav End --- */
    
}

@media only screen and (min-width: 900px) {
    
/* ---- Wrapper ---- */

/* ---- Wrapper End --- */

/* ---- Logo ---- */

/* ---- Logo End --- */

/* ---- Hamburger ---- */

    .responsive-hide {
        display: none;    
    }

/* ---- Hamburger End --- */

/* ---- Responsive Hide Nav ---- */

    .responsive-nav {
        display: none;
        }

    .responsive-nav ul {
        display: none;
        }

    .responsive-nav li {
        display: none;
        }

/* ---- Responsive Hide Nav End --- */

/* ---- Site Nav ---- */

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

/* ---- Socials Nav End --- */
    
}
<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>
                                    <ul id="responsive-nav2" 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 -->

标题有一个包装类并且有一个固定的位置？我究竟做错了什么？片段的css和html太多了，所以想到从函数开始，看看哪里出错了？该函数位于我的jqueryheader.js文件中，该文件作为add-action加载。感谢

1 个答案:

答案 0 :(得分：0)

您可以添加一个布尔变量，类似于动画的检查器。请试试这个：

var checker = false;

$(document).scroll(function() {
  var lastScrollTop = 0,
    delta = 5;
  $(window).scroll(function(event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      // downscroll code
      if (checker == false) {
        $('.wrapper').slideUp('230');
        checker = true;
      }
    } else {
      // upscroll code
      $('.wrapper').slideDown('230');
      checker = false;
    }

  });
});
/* ---- ALL QUERIES ---- */


/* ---- Wrapper ---- */

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: fixed;
  height: 80px;
  top: 0;
  z-index: 1;
  border-bottom: solid 1px #eee;
  background: #f00;
}


/* ---- Wrapper End --- */


/* ---- 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;
}


/* ---- Logo End --- */


/* ---- Hamburger ---- */

.responsive-hide {
  width: 50%;
  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: 80px;
}

#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: 9px;
  -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: 5px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#hamburger:hover {
  cursor: pointer;
  color: #555555;
}


/* ---- Hamburger End --- */


/* ---- Responsive Hide Nav ---- */

.responsive-nav {
  position: absolute;
  top: 60px;
  right: 0;
  display: block;
  font-size: 2.4rem;
  font-weight: 400;
  width: 50vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #f1f1f1;
  transform: translateX( 100%);
  transition: transform 0.5s ease-in-out;
}

.responsive-nav2 {
  margin: 0;
}

.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;
}


/* ---- Responsive Hide Nav End --- */


/* ---- Site Nav ---- */

.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;
}


/* ---- Site Nav End --- */


/* ---- Socials Nav ---- */

.socials {
  width: 20%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-left: 2px solid #eee;
  padding: 0 2.5% 0 2.5%;
}

.socials ul li {
  height: auto;
  width: auto;
}

.socials ul {
  display: flex;
  list-style: none;
  align-items: center;
  padding: 0;
  width: 100%;
  justify-content: space-around;
}

.socials li img {
  max-height: 40px;
}


/* ---- Socials Nav End --- */

@media only screen and (max-width: 450px) {
  /* ---- Wrapper ---- */
  .wrapper {
    height: 60px;
  }
  /* ---- Wrapper End --- */
  /* ---- Logo ---- */
  .logo-header {
    height: 60px;
    width: 47.5%
  }
  .logo-header img {
    height: 40px;
    width: 40px;
  }
  /* ---- Logo End --- */
  /* ---- Hamburger ---- */
  .responsive-hide {
    width: 50%;
  }
  .toggle-nav {
    height: 60px;
  }
  /* ---- Hamburger End --- */
  .socials {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    align-items: center;
    padding: 1.5% 25% 1.5% 25%;
    background: #fff;
    transform: translateY( 0);
    transition: transform 0.5s ease-in-out;
  }
  .socialshide {
    transform: translateY( 100%);
  }
  .socials ul li {
    height: auto;
    width: auto;
  }
  .socials ul {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 0;
    width: 100%;
    justify-content: space-around;
  }
  .socials li img {
    max-height: 35px;
  }
  /* ---- Responsive Hide Nav ---- */
  .responsive-nav {
    position: fixed;
    top: 125px;
    font-size: 2.4rem;
    width: 100%;
    height: 66vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    transform: translateY( 100%);
    transition: transform 0.5s ease-in-out;
    border-top: solid 1px #eee;
  }
  .responsive-nav li:first-child {
    display: block;
    padding-top: 10px;
    position: relative;
  }
  .responsive-nav2 {
    margin: 0;
  }
  .reveal {
    transform: translateY( 0);
  }
  /* ---- Responsive Hide Nav End --- */
  /* ---- Site Nav ---- */
  .site-nav {
    display: none;
  }
  /* ---- Site Nav End --- */
  /* ---- Socials Nav ---- */
  /* ---- Socials Nav End --- */
}

@media only screen and (min-width: 451px) and (max-width: 768px) {
  /* ---- Wrapper ---- */
  .wrapper {
    height: 60px;
  }
  /* ---- Wrapper End --- */
  /* ---- Logo ---- */
  .logo-header {
    height: 60px;
  }
  .logo-header img {
    height: 40px;
    width: 40px;
  }
  /* ---- Logo End --- */
  /* ---- Hamburger ---- */
  .responsive-hide {
    width: 45%;
  }
  .toggle-nav {
    height: 60px;
  }
  /* ---- Hamburger End --- */
  /* ---- Responsive Hide Nav ---- */
  /* ---- Responsive Hide Nav End --- */
  /* ---- Site Nav ---- */
  .site-nav {
    display: none;
  }
  /* ---- Site Nav End --- */
  /* ---- Socials Nav ---- */
  .socials {
    width: 25%;
    justify-content: space-around;
    padding: 0;
  }
  .socials ul {
    padding: 0 5%;
  }
  .socials ul li {
    margin: auto 2.5%;
  }
  .socials li img {
    max-width: 100%;
    max-height: 35px;
  }
}


/* ---- Socials Nav End --- */

@media only screen and (min-width: 769px) and (max-width: 899px) {
  /* ---- Wrapper ---- */
  .wrapper {
    height: 70px;
  }
  /* ---- Wrapper End --- */
  /* ---- Logo ---- */
  .logo-header {
    height: 70px;
  }
  .logo-header img {
    height: 50px;
    width: 50px;
  }
  /* ---- Logo End --- */
  /* ---- Hamburger ---- */
  .responsive-hide {
    display: none;
  }
  /* ---- Hamburger End --- */
  /* ---- Responsive Hide Nav ---- */
  .responsive-nav {
    display: none;
  }
  .responsive-nav ul {
    display: none;
  }
  .responsive-nav li {
    display: none;
  }
  /* ---- Responsive Hide Nav End --- */
  /* ---- Site Nav ---- */
  .site-nav {
    font-size: 2rem;
    padding-right: 3.5%;
  }
  /* ---- Site Nav End --- */
  /* ---- Socials Nav ---- */
  .socials {
    justify-content: space-around;
    padding: 0 1.5% 0 1.5%;
  }
  .socials ul li {
    height: 35px;
    width: 35px;
  }
  .socials li img {
    max-height: 35px;
  }
  /* ---- Socials Nav End --- */
}

@media only screen and (min-width: 900px) {
  /* ---- Wrapper ---- */
  /* ---- Wrapper End --- */
  /* ---- Logo ---- */
  /* ---- Logo End --- */
  /* ---- Hamburger ---- */
  .responsive-hide {
    display: none;
  }
  /* ---- Hamburger End --- */
  /* ---- Responsive Hide Nav ---- */
  .responsive-nav {
    display: none;
  }
  .responsive-nav ul {
    display: none;
  }
  .responsive-nav li {
    display: none;
  }
  /* ---- Responsive Hide Nav End --- */
  /* ---- Site Nav ---- */
  /* ---- Site Nav End --- */
  /* ---- Socials Nav ---- */
  /* ---- Socials Nav End --- */
}

.content {
  background: #adadad;
  height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
      <ul id="responsive-nav2" 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 -->
<div class='content'></div>

相关问题
最新问题