ナビゲーションバーのトグルアイコンの隣にロゴを追加

Question

私はHTML & CSSが新鮮です。私はブートストラップテンプレートのカスタマイズを開始し、アイコンバーの隣にロゴを追加したいと思っていますが、このナビゲーションバーは、私が慣れ親しんだ基本的なブートストラップナビバーよりもやや難しいようです。誰かがコードを見る場所を指し示すことによって、または1つか2つの例を提供することによって、私が助けてくれるなら、本当に感謝します。私がカスタマイズしているテンプレートにはlinkがあります。 thisのように、トグルボタンのすぐ隣に画像を配置したいのですが、「メニュー」を使用します。

HTML：

<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" /></a> <!-- site logo --> 
     </div> 

     <ul class="nav navbar-nav"> 
      <li><a href="#header" class="smooth-scroll">Home</a></li> 
      <li><a href="#about" class="smooth-scroll">About</a></li> 
      <li><a href="#features" class="smooth-scroll">Features</a></li> 
      <li><a href="#portfolios" class="smooth-scroll">Portfolios</a></li> 
      <li><a href="#whyus" class="smooth-scroll">Why Us?</a></li> 
      <li><a href="page.html">Page</a></li> 
      <li class="menu-btn"><a href="page_contact.html">Contact</a></li> 
     </ul> 

    </div> 
    <!-- .container end --> 

</nav> 

CSS：

/* Navigation Mobile */ 
#navigation_mobile { 
    display:none; 
    font-size:14px; 
    line-height:18px; 
    text-align:center; 
    font-weight:600; 
    text-transform:uppercase; 
} 
#navigation_mobile .nav-menu-links { 
    display:none; 
    background-color:#2a2a2a; 
} 
#navigation_mobile ul { 
    padding:30px 100px; 
    margin:0px; 
} 
#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:24px; 
    line-height:1; 
    background:none; 
    padding:0px; 
    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; } 

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

Answer 1

あなたは、単に画像にテキストを追加することができます。 （「ワーキングこのコードではありませんなぜ**？」）デバッグの助けを求めている

<img src="logo.png" alt="My Logo">