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

Question

所以我一直在尝试创建一个横向菜单，它的顶部有一个徽标，旁边还有一个传统的导航菜单。但我似乎遇到了一个问题，我无法将我的标志放在横向菜单中并对齐它。这是我到目前为止尝试使用的代码。我的最终目标是让它像我制作的页面的样机一样，欢迎任何帮助https://i.stack.imgur.com/wwcXT.png

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

      <nav class="navbar-lateral">
        <ul>
          <li class="logo">
            <a href="" class="nav-link">
              <img src="./img/so.png" alt="">
            </a>
          </li>
        </ul>

      </nav>

横向栏的CSS

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

Answer 1

您可以像以前一样将 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>

CSS

.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;
}