如何在响应式导航栏上放置徽标图像

Question

I am trying to add a logo image to my navigation bar.I was successful in adding the image in my desktop version but it doesn't show up in my mobile version(>787 pixels). Here is the code that I am using.

 /* 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

This line is the culprit -

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

You have the image in the .navbar and are hiding it in the smaller viewport.

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

You need to either move it out of that container or change your css selectors.