所以基本上我为我的网站使用模板并相应地进行调整。该站点定义了要在开始时隐藏的菜单栏,并在向下滚动时显示。
但是,文本和菜单按钮始终显示在"开始"菜单上。我不明白我怎么能告诉文本(电子邮件和电话号码)与菜单栏的其余部分保持隐藏。
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info@testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#portfolio">Portfolio</a></li>
<li><a href="index.html#kontakt">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
/* menu last class added */
$('ul.basic-menu>li').slice(-2).addClass('menu-p-right');
/* TOP Menu Stick */
win.on('scroll',function() {
if ($(this).scrollTop() > 1){
$('#sticky-header').addClass("sticky");
}
else{
$('#sticky-header').removeClass("sticky");
}
});
/* meanmenu */
$('#mobile-nav').meanmenu({
meanMenuContainer: '.basic-mobile-menu',
meanScreenWidth: "767"
});
/* hamburgers menu option */
$('.hamburger').on('click', function() {
$(this).toggleClass('is-active');
$(this).next().toggleClass('nav-menu-show');
});
$(document).on('scroll',function(){
$(".hamburger-menu").slideDown(); //i have used slide down function for animation, you can change class or add css display type changing properties
})
.makescroll{height:1000px;}
.hamburger-menu{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info@testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#portfolio">Portfolio</a></li>
<li><a href="index.html#kontakt">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
<div class="makescroll">Extended scroll</div>
</div>
</div>
</div>
</div>
</div>
</header>