Размер меню заголовка не отвечает

html css html5

115 просмотра

1 ответ

Привет, я скачал шаблон, я отредактировал CSS, просто добавив «fixedheader», чтобы сделать логотип внутри заголовка, который выглядит следующим образом изображение 1. но когда я изменяю размер окна до минимальной ширины, заголовок не отвечает, а вместо этого "fixedheader" высотой все равно 180px, что выглядит следующим образом изображение 2. Я попытался удалить «fixedheader», чтобы высота переноса заголовка не делала высоту слишком высокой, которая выглядит так, изображение 3как вы можете видеть, что высота белого фона включает только половину логотипа. Есть ли способ исправить это, я чувствую себя сбитым с толку, вы можете проверить style.css на https://www.dropbox.com/s/vvhc59qtk5z2ns9/style.css?dl=0 . Вот заголовок из 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 -->
Автор: jezz Источник Размещён: 08.11.2019 11:01

Ответы (1)


1 плюс

Решение

Добавьте эту CSS.

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

@media(max-width: 991px) {
    .fixedheader {
        min-height: 100px;
    }
}
Автор: Vel Размещён: 22.08.2016 05:49
Вопросы из категории :
32x32