Html 如何在侧边栏菜单中插入徽标

所以我一直在尝试创建一个侧面菜单，上面有一个徽标，旁边还有一个传统的导航菜单。但我似乎遇到了一个问题，我不能把我的标志在横向菜单内，并对齐它。这是我到目前为止试图使用的代码。我的最终目标是让它像我制作的网页一样，任何帮助都是非常受欢迎的

---

您可以像以前一样，在水平面上使用Bootstrap内置导航条，并在侧面添加自定义导航条，其中带有徽标。大概是这样的：

HTML

<header>
      <nav class="my-nav navbar navbar-light navbar-expand-lg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
         target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria- 
         label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
          <ul class="navbar-nav">
        
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria- 
               haspopup="true" aria-expanded="false">ACTIVITES</a>
              <div class="dropdown-menu" aria-labelledby="dropdown08">
                <a class="dropdown-item" href="#">Rafting</a>
                <a class="dropdown-item" href="#">Canooing</a>
                <a class="dropdown-item" href="#">Parachute</a>
                <a class="dropdown-item" href="#">Soufflerie</a>
                <a class="dropdown-item" href="#">Saut elastique</a>
              </div>
            </li>
  
            <li class="nav-item">
              <a class="nav-link" href="#">OFFRES</a>
              <li class="nav-item">
                <a class="nav-link" href="#">EVENEMENTS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">A PROPOS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">ESPACE HANDICAP</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">CONTACT</a>
              </li>
            </li>
          </ul>
        </div>
      </nav>
      </div>

<div class="lateral-nav">
              <a href="#"><img src="https://tkruger4.files.wordpress.com/2010/11/logo-2_rgb.jpg" alt=""></a>
  <a href="#">item</a>
   <a href="#">item</a>
   <a href="#">item</a>
</div>

---

嗨，Simasan，这是我建议的答案的代码笔，如果你想使用它，谢谢你的帮助，当我实现它时，它似乎不起作用。它使我的菜单在我的页面中间被打破了。我有一个覆盖背景的英雄形象。这可能是问题的原因吗？@Simasan我想看看live页面或其源代码，如果可能的话，或者两者都看？它可以是很多东西。

.navbar-lateral { 
    width: 5rem;
    height: 100vh;
    position: fixed;
    background: white;
}

<header>
      <nav class="my-nav navbar navbar-light navbar-expand-lg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
         target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria- 
         label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
          <ul class="navbar-nav">
        
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria- 
               haspopup="true" aria-expanded="false">ACTIVITES</a>
              <div class="dropdown-menu" aria-labelledby="dropdown08">
                <a class="dropdown-item" href="#">Rafting</a>
                <a class="dropdown-item" href="#">Canooing</a>
                <a class="dropdown-item" href="#">Parachute</a>
                <a class="dropdown-item" href="#">Soufflerie</a>
                <a class="dropdown-item" href="#">Saut elastique</a>
              </div>
            </li>
  
            <li class="nav-item">
              <a class="nav-link" href="#">OFFRES</a>
              <li class="nav-item">
                <a class="nav-link" href="#">EVENEMENTS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">A PROPOS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">ESPACE HANDICAP</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">CONTACT</a>
              </li>
            </li>
          </ul>
        </div>
      </nav>
      </div>

<div class="lateral-nav">
              <a href="#"><img src="https://tkruger4.files.wordpress.com/2010/11/logo-2_rgb.jpg" alt=""></a>
  <a href="#">item</a>
   <a href="#">item</a>
   <a href="#">item</a>
</div>

.lateral-nav {
position:absolute;top:0;left:0;width:100px;background:white;height:300px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center; 
}
  img {
  width:60px;height:60px;margin-top:10px;
}

.lateral-nav a {
    writing-mode:vertical-lr;text-orientation:mixed;margin:10px 0;}


.navbar {
  margin-top:10px;
}