Блог

Итак, я пытался создать боковое меню, в котором логотип находится прямо над ним, а также традиционное меню навигации рядом с ним. Но, похоже, я столкнулся с проблемами, из-за которых я не могу поместить свой логотип в боковое меню и выровнять его. Вот код, который у меня есть до сих пор, который я пытаюсь использовать. Моя конечная цель — сделать его похожим на макет страницы, которую я создал, любая помощь будет приветствоваться 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;
}
  

Вы можете использовать встроенную навигацию 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;
}