如何在響應式導航欄上放置徽標圖像

Question

我正在嘗試將徽標圖像添加到導航欄中。我已成功在桌面版本中添加了圖像，但在移動版本（> 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 --> 

Answer 1

這是罪魁禍首-

@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選擇器。