Как мне исправить мою CSS проблему с блоком навигации?

Question

Я добавил новый рекламный блок в заголовок, видимый здесь: https://musebycl.io/test_page. Это заставило блок навигации переместиться в крайнее правое положение. Я не могу понять, почему это происходит, даже если эти элементы предположительно находятся в отдельных элементах div.

Как изменить заголовок объявления или навигацию HTML / CSS, чтобы вернуть навигацию в нормальное состояние положение, видимое на главной странице (https://musebycl.io/)?

Answer 1

Ваш фреймворк применяет гибкие правила к элементу .row, который указывает на sh ваш блок навигации вправо, так как он не имеет определенной ширины.

Попробуйте переместить добавляемый .block-контент на один уровень вверх в ваших строках в div.container.py-2.row

с этим html это работает:

<div class="container py-2">
  <div class="row justify-content-between align-items-center">
    <div class="block-content">
      <div
        class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
        ...
      </div>
    </div>
    <div class="col-auto">
      <div class="row justify-content-between align-items-center">
        <div class="col-auto">
          <div class="region region-logo">
            <div id="block-headerad"
              class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
            </div>
            <div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
              <a href="/" rel="home" class="site-logo">
                <img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
              </a>
            </div>
          </div>
        </div>
        <div class="col-auto d-none d-lg-block">
          <div class="region region-header-primary-menu">

            ...
          </div>
        </div>
      </div>
    </div>
    <div class="col-auto">
      <div class="row justify-content-between align-items-center no-gutters">

        <div class="col-auto d-none d-lg-block">

          <div class="social-menu d-flex align-items-center">
            ...
          </div>

          <div class="col-auto">

            <div id="user-action-menu" class="user-action-menu d-flex align-items-center">
              ...

            </div>
          </div>

          <div class="d-lg-none">
            ...
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 2

Вы можете создать внешний CSS как

#advertising-nav-bar {
    position: fixed;
    top: 0px;
}

HTML:

<div id="advertising-nav-bar">
        <!--content -->
</div>

Answer 3

Вы должны указать ширину вашего блочного контента. Нравится:

.block-content{
width: 500px;
}