来自粘性包装的导航元素在较小的屏幕上变为垂直

问题描述 投票:0回答:0

我的粘性包装纸上有两个导航元素。 “家”和“托斯”。它在我的 PC 上看起来不错,但是当我在手机上打开它时,它们突然垂直放置。我试图弄清楚我做错了什么以及确切的位置,但我还不能完全确定是什么原因造成的。帮助将不胜感激,我的代码位于https://codepen.io/kyan0045/pen/xxaMZeo 它们位于 PC 上并且应该位于手机和其他设备上的粘性包装纸:

<div id="sticky-wrapper-sticky-wrapper" class="sticky-wrapper" style="height: 70px;">
    <nav id="sticky-wrapper" style="">
      <div class="container accordion" id="navaccordion">
        <div class="row">
          <div class="col-md-6 mobile-toggler-wrapper">
            <a href="/" id="logoheadurl">
              <img src="https://StarkMountainousTechnicians.kyankranasjanan.repl.co/assets/logo-text.png" id="toplogo" alt="logo">
            </a>
          </div>
          <div class="col-md-6 navigation-container" style="padding-right:2%">
            <div class="navigation navbar-expand">
              <ul class="list-inline text-right collapse navbar-collapse" id="mainmenu">
                <li><a href="/">Home</a></li>
                <!-- <li class="dropdown current-menu-has-children">
<a data-toggle="collapse" data-target="#helpmenu" aria-controls="helpmenu" aria-expanded="false" aria-label="Toggle help navigation" class="collapsed">Usecases<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-down" class="svg-inline--fa fa-angle-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg></a>
<div class="collapse" id="helpmenu" data-parent="#navaccordion">
<ul class="dropdown-nav dropdown-nav-left"> -->
                <li><a href="/terms-of-service">Tos</a></li>
              </ul>
            </div>
            </li>
            <!--
<li class="dropdown current-menu-has-children">
<ul class="dropdown-nav dropdown-nav-left notranslate" style="max-height: 270px;overflow-y: scroll;">
</ul>
</li>
  -->
            </ul>
          </div>
        </div>
      </div>
  </div>

  </nav>
  </div>

试图让我的两个导航元素位于我的粘性包装纸上,在 PC 上看起来像this,在手机上看起来像this...

html css nav sticky
© www.soinside.com 2019 - 2024. All rights reserved.