如何解决导航块的 CSS 问题？答案

【问题标题】：How do I fix my CSS issue with navigation block?如何解决导航块的 CSS 问题？
【发布时间】：2020-05-10 16:13:40
【问题描述】：

我在此处可见的标题中添加了一个新的广告块：https://musebycl.io/test_page。这使得导航块移动到最右边。我不知道为什么会这样，即使这些元素应该在单独的 div 中。

如何修改标题广告或导航 HTML/CSS 以使导航回到主页上可见的正常位置 (https://musebycl.io/)？

【问题讨论】：

【解决方案1】：

你必须给你的块内容一个宽度。喜欢：

.block-content{
width: 500px;
}

【讨论】：

谢谢！它确实将导航向后移动但未完全移动，并且将其包裹起来，其他图标元素似乎已损坏。
你能把你的广告块拿回来，我看看你的广告块（div）会添加到哪里？
@ivan 请把你的广告屏蔽带回来，让我们看看问题所在。
这里是广告块：musebycl.io/test_page 谢谢！
好的，看来您正在使用 wordpress，问题是您使用的主题使导航脱离（广告块和徽标）。因此，您必须使用 flex 将徽标和广告块放在一起

【解决方案2】：

你可以像这样创建外部 CSS

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

HTML：

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

【讨论】：

谢谢！我试过了，但它只是让整个广告部分由于某种原因消失了。它会出现一闪，然后消失。

【解决方案3】：

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

尝试将你的 add .block-content 在你的行中上移一级到 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>

【讨论】：