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

Question

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

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

Answer 1

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

.block-content{
width: 500px;
}

Answer 2

您可以创建外部 CSS 喜欢

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

HTML :

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

Answer 3

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

尝试将您添加的 .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>

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

How do I fix my CSS issue with navigation block?

css

drupal

drupal-8