html - 具有行高的菜单使菜单在缩放时消失

Question

我有一个固定的标题，右侧有一个 float 菜单 ( http://outletdokkum.nl/nofcom/ )

此菜单使用行高在标题栏中垂直居中。它工作得很好，但有一个问题。我现在正在研究响应式样式，当我缩放到某个点时，菜单会消失，我无法在页面上找到它。

我认为这是行高的问题，但我不确定。向下滚动时，我使用 Jquery 进行缩放。

HTML:

<header id="header_nav">
    <div id="header-wrap">
        <section id="branding">
            <a href="<?php echo get_bloginfo('url'); ?>"><img src="http://outletdokkum.nl/nofcom/wp-content/uploads/2014/05/logo-transparent.png" class="brand-img" alt="logo-nofcom"/></a>
        </section>

        <nav id="menu" role="navigation">   
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
        </nav>
    </div>

</header>

CSS:

#header_nav {
width:100%;
height:120px;
background-color:rgb(255,255,255);
position:fixed;
top:0;
left:0;
z-index: 9999;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
overflow: hidden;
line-height: 120px; 
-webkit-box-shadow: 0px 0px 6px 1px #cccccc;
-moz-box-shadow: 0px 0px 6px 1px #cccccc;
box-shadow: 0px 0px 6px 1px #cccccc;
}

#header-wrap{
width: auto;
max-width: 1060px;
margin: 0 auto;
}

#branding{
width: auto;
margin: 0 auto;
}

.brand-img{
float: left;
margin: 0 auto;
width: auto;
height: 120px;
max-height: 120px;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
}

#menu{
width: auto;
margin: 0 auto;
font-weight: 500;
font-size: 18px;
color: #444444;
z-index:9999;
}

#menu ul{
float: right;
}

#menu ul li{
float: left;
padding: 0 10px 0 10px;
}

#menu ul li a{
color: #444444;
}

#menu ul li a:hover{
color: #000000;
cursor: pointer;
}

#menu li.current_page_item{
font-weight: 700;
color: #000000;
}

J查询:

<script>
$(function(){
    $('#header_nav').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 100)
    {
        if($('#header_nav').data('size') == 'big')
        {
            $('#header_nav').data('size','small');
            $('#header_nav').stop().animate({
                "height":"80px",
                "line-height":"80px"
            },300);

        /*
            $('#slider').data('size','big');
            $('#slider').stop().animate({
                marginTop:'80px'
            },300);
        */

        }
    }
    else
    {
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().animate({
                "height":"120px",
                "line-height":"120px"
            },300);

        /*
            $('#slider').data('size','big');
            $('#slider').stop().animate({
                marginTop:'120px'
            },300);
        */
        }  
    }
});

$(function(){
    $('.brand-img').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 100)
    {
        if($('.brand-img').data('size') == 'big')
        {
            $('.brand-img').data('size','small');
            $('.brand-img').stop().animate({
                height:'80px'
            },300);
        }
    }
    else
    {
        if($('.brand-img').data('size') == 'small')
        {
            $('.brand-img').data('size','big');
            $('.brand-img').stop().animate({
                height:'120px'
            },300);
        }  
    }
});
</script>

我希望我的意思很清楚。尝试调整浏览器窗口的大小以查看颜色变为蓝色/绿色/红色(响应)菜单从蓝色部分消失。

Answer 1

发生这种情况是因为菜单 ul 的宽度 + Logo 的宽度超出了可用空间，因为两者都是 float 的，菜单然后在 Logo 下方换行到下一行 -从 View 中隐藏。为防止这种情况，您需要定义总标题区域的 width 和/或 min-width，或者定义当屏幕缩小到它的大小时如何处理菜单不能全部显示在。

@media screen and (max-width: 767px) and (min-width: 640px){
 /* e.g. add behaviour to reduce the width of your menu */
}