如何使用导航块解决CSS问题？

我在此处可见的标题中添加了一个新的广告块：。这使导航块移动到最右侧。我不明白为什么会发生这种情况，即使这些元素应该在不同的div中

如何修改标题广告或导航HTML/CSS，使导航恢复到主页（）上可见的正常位置

---

必须为块内容指定宽度。 比如：

---

您可以创建外部CSS，如

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

HTML:

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

---

您的框架在.row元素上应用flex规则，将导航块推到右侧，因为它没有定义的宽度

尝试将行中的add.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>

...
...
...
...
...

谢谢！我试过了，但由于某种原因，它只是让整个广告部分消失了。它出现一瞬间就消失了。谢谢！它确实正在将导航移回，但没有完全移动，它将导航包裹起来，其他图标元素似乎也会断裂。你能把你的广告块带回来吗，这样我就可以看到你的广告块（div）添加到哪里了？@ivan请把你的广告块带回来一会儿，这样我们就可以看到问题了。这是广告块：谢谢！好的，看起来你在使用wordpress，问题是你使用的主题，使导航变成了（广告块和徽标）。因此，您必须使用flex将徽标和广告块彼此连接起来

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