Как поместить изображение логотипа на отзывчивую навигационную панель

Я пытаюсь добавить изображение логотипа в свою панель навигации. Мне удалось добавить изображение в мою настольную версию, но оно не отображается в моей мобильной версии (> 787 пикселей). Вот код, который я использую.Как поместить изображение логотипа на отзывчивую навигационную панель

/* Navigation Menu */ 
 

 
#header .navbar { 
 
    position: fixed; 
 
    top: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    min-height: 0px; 
 
    font-family: Montserrat, Arial, serif; 
 
    color: #FFF; 
 
    background-color: #333; 
 
    padding: 15px 0px; 
 
    margin: 0px; 
 
    border: 0px; 
 
    z-index: 100; 
 
    border-radius: 0px; 
 
    -webkit-transition: all .2s ease; 
 
    transition: all .2s ease; 
 
} 
 
#header .navbar > .container .navbar-brand { 
 
    margin: 0px; 
 
} 
 
#header .navbar-brand img { 
 
    height: 45.5px; 
 
} 
 
#header .nav { 
 
    overflow: hidden; 
 
    float: right; 
 
    height: 40px; 
 
    /* Navigation Mobile */ 
 
    #navigation_mobile { 
 
    display: none; 
 
    } 
 
    #navigation_mobile .nav-menu-links { 
 
    display: none; 
 
    background-color: #2a2a2a; 
 
    } 
 
    #navigation_mobile ul li { 
 
    list-style-type: none; 
 
    padding: 11px 0px; 
 
    } 
 
    #navigation_mobile ul li a { 
 
    display: block; 
 
    color: #a9a9a9; 
 
    } 
 
    #navigation_mobile ul li a:hover { 
 
    color: #FFF; 
 
    } 
 
    #navigation_mobile .nav-menu-button { 
 
    background-color: #202020; 
 
    padding: 15px 0px 14px; 
 
    } 
 
    #navigation_mobile .nav-menu-button button.nav-menu-toggle { 
 
    color: #a9a9a9 !important; 
 
    font-size: 20px; 
 
    line-height: 2; 
 
    padding: 0px; 
 
    background: none; 
 
    border: 0px; 
 
    border-radius: 0px; 
 
    -webkit-transition: color .2s ease; 
 
    transition: color .2s ease; 
 
    } 
 
    #navigation_mobile .nav-menu-button button.nav-menu-toggle:hover { 
 
    color: #FFF !important; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    #header .navbar { 
 
    display: none; 
 
    } 
 
    #navigation_mobile { 
 
    display: block; 
 
    } 
 
}

<!-- #navigation --> 
 
<nav id="navigation" class="navbar scrollspy"> 
 

 
    <!-- .container --> 
 
    <div class="container"> 
 
    <div class="navbar-brand"> 
 
     <a href="index.html"> 
 
     <img src="images/logo.png" alt="Logo" id="logo-image" /> 
 
     </a> 
 
    </div> 
 

 

 

 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#about" class="smooth-scroll">About</a> 
 
     </li> 
 
     <li><a href="#howitworks" class="smooth-scroll">Features</a> 
 
     </li> 
 
     <li class="menu-btn"><a href="page_contact.html">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- .container end --> 
 

 
</nav> 
 
<!-- #navigation end -->

источник

2016-09-16 LadyCoder

был ли этот код css для панели навигации? –

Да, это он. – LadyCoder

Что именно вы хотите достичь? почему у вас есть '#header .navbar {display: none;}' в вашем медиа-запросе? вы пытаетесь скрыть навигацию, но не изображение? –

Эта линия является виновником -

@media (max-width: 767px) {... 
#header .navbar{ display:none;} 
...}

У вас есть изображение в .navbar и прячут его в меньшем окне просмотра.

<nav id="navigation" class="navbar scrollspy"> 
... 
       <a href="index.html"><img src="images/logo.png" alt="Logo" id="logo-image" /></a> 
...

Вам необходимо либо вывести его из контейнера, либо изменить селектор css.

источник

2016-09-16 02:01:51 gavgrif

Спасибо! Я попытался выбрать только .navbar-nav, и он показывает! Но теперь navigation_mobile не отображается. – LadyCoder

'#header .navbar {display: none;}' '#navigation_mobile {display: block; } ' – LadyCoder

Как поместить изображение логотипа на отзывчивую навигационную панель

ответ

Смежные вопросы