Блог

когда я открываю меню, оно перемещается вправо и прокручивает профиль пользователя. Мне нужно, чтобы меню всегда было в центре, а профиль всегда справа.

Я использую angular 12 и bootstrap 5.

Ниже я оставляю код, который я использую, и несколько изображений того, как он должен выглядеть

Спасибо!

ссылка стекблитц

 <nav
  class="navbar navbar-expand-lg navbar-dark bg-primary"
>
  <div class="container-fluid">
    <a class="navbar-brand"
      ><img src="../../../assets/Targaryen.ico"
    /></a>

    <button
      class="navbar-toggler justify-content-center"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarTogglerbur"
      aria-controls="navbarTogglerbur"
      aria-expanded="false"
      aria-label="Toggle navigation"

    >
    <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-center" id="navbarTogglerbur">
      <ul class="navbar-nav  justify-content-center mt-lg-0">
        <li class="nav-item">
        </li>
        <li class="nav-item">
        </li>
        <li class="nav-item">
        </li>
        <li class="nav-item">
        </li>
      </ul>
    </div>

    <div class="dropdown">
      <img
        src="{{ info.photoURL }}"
      />
      <ul
        class="dropdown-menu dropdown-menu-end dropdown-menu-dark"
        aria-labelledby="dropdownMenuButton1"
      >
        <li class="dropdown-item" >
        </li>
        <li class="dropdown-item" >
        </li>
      </ul>
    </div>
  </div>
</nav>
 

Просто переключите порядок navbar-nav и dropdown . Затем используйте order-lg-last раскрывающийся список, чтобы сохранить его прямо на lg…

 <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
        <a class="navbar-brand"><img src="//via.placeholder.com/30" /></a>
        <button class="navbar-toggler justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerbur" aria-controls="navbarTogglerbur" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="dropdown order-lg-last">
            <img src="//via.placeholder.com/30" />
            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="dropdownMenuButton1">
                <li class="dropdown-item">
                    <a href>Item</a>
                </li>
                <li class="dropdown-item">
                    <a href>Item</a>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse justify-content-center" id="navbarTogglerbur">
            <ul class="navbar-nav justify-content-center mt-lg-0">
                <li class="nav-item">
                    <a href class="nav-link">Item</a>
                </li>
                <li class="nav-item">
                    <a href class="nav-link">Item</a>
                </li>
                <li class="nav-item">
                    <a href class="nav-link">Item</a>
                </li>
                <li class="nav-item">
                    <a href class="nav-link">Item</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
 

Кодово