标题菜单大小无响应

时间:2016-08-20 07:27:42

标签: html css html5

您好我下载了一个模板,我只是通过添加“fixedheader”来编辑css,使标题内部的徽标看起来像image 1。但是当我将窗口调整到最小宽度时,标题不响应,而是“fixedheader”高度仍为180px,看起来像image 2。我试图移除“fixedheader”以使得header-wrap的高度不会使高度太高,看起来像image 3,因为你可以看到白色背景的高度只包括徽标的一半。有没有办法解决这个问题,我感到困惑,你可以在https://www.dropbox.com/s/vvhc59qtk5z2ns9/style.css?dl=0检查style.css。这是index.html的标题

<header id="header" class="transparent-header" data-sticky-class="not-dark">

            <div id="header-wrap" class="fixedheader ">

                <!-- Primary Navigation  
                ============================================= -->
                <nav id="primary-menu" class="style-2 center">

                    <div class="container clearfix"></div>

                        <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                        <ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" >
                            <li><a href="index.html"><div>Home</div></a></li>
                            <li><a href="about.html"><div>WHO WE ARE</div></a></li>
                            <li><a href="products.html"><div>WHAT WE TRADE</div></a></li>
                            <li><a href="services.html"><div>SERVICES</div></a></li>
                            <li><a href="logistic.html"><div>LOGISTICS</div></a></li>
                            <li><a href="contact.html"><div>CONTACT</div></a></li>  
                        </ul>
                </nav><!-- #primary-menu end -->
                <!-- Logo
                ============================================= -->

                <div id="logo" class="divcenter">
                    <a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img class="divcenter" src="images/logo.png" alt="Canvas Logo"></a>
                    <a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img class="divcenter" src="images/logo@2x.png" alt="Canvas Logo"></a>
                </div><!-- #logo end -->

            </div>


        </header><!-- #header end -->

1 个答案:

答案 0 :(得分:1)

添加此css。

@media(min-width: 992px) and (max-width: 1199px) {
    #logo {
        float: none !important;
    }
}

@media(max-width: 991px) {
    .fixedheader {
        min-height: 100px;
    }
}