我可以隐藏我的意思菜单jquery的文本和按钮吗?



所以基本上我为我的网站使用模板并相应地进行调整。该站点定义了要在开始时隐藏的菜单栏,并在向下滚动时显示。

但是,文本和菜单按钮始终显示在"开始"菜单上。我不明白我怎么能告诉文本(电子邮件和电话号码)与菜单栏的其余部分保持隐藏。

    <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>

最新更新