css - 为什么我的移动导航菜单抽屉在打开时会将站点视图向下推？

问题描述

为家庭成员建立一个模拟网站（占位符照片）。当我打开导航菜单时，它会将屏幕向下推，而不是简单地向右打开。似乎垂直平移视图。我怎样才能让它在不向下推屏幕视图的情况下顺利地向右打开？

1a) 打开https://i.stack.imgur.com/UfuZi.png前的屏幕 1b) 单击导航菜单时的屏幕https://i.stack.imgur.com/yfzS3.png 1c) 向上滚动时的屏幕打开导航菜单后https://i.stack.imgur.com/9cI5i.png

这是导航栏的css：

NAV HEADER CSS

    @media only screen and (max-width: 768px) {
      body .site-nav__thumb-menu {
      position: absolute;
      top: 20px;
      bottom: unset;
      left: unset;
      right: unset;
      padding-top: 6px;

  }
  .site-nav__thumb-menu span.icon-menu-label {
    display: none;
  }
  .site-nav__thumb-menu button svg {
    color: #000;
    box-shadow: none !important;
}
  .site-nav__thumb-menu--inactive {
    transform: unset;
}
  .slide-nav__wrapper {
    transform: translateX(-100%) !important ;
    background-color: #fff;
  }
  .slide-nav__dropdown .slide-nav__sublist-header {
    text-decoration: none;
}
  .slide-nav__overflow--thumb {
        width: 100%;
        background-color: #000;
        height: 100%;
  }
  .js-menu--is-open .slide-nav__wrapper {
    transform: translateX(0) !important ;
  }
  .site-nav__thumb-menu button {
    background-color: unset !important;
    padding: 0;
    text-align: left;
    width: auto;
    min-width: auto;
    box-shadow: none !important;
  }
  nav.slide-nav__wrapper .slide-nav {
    padding-bottom: 15px;
  }
  .slide-nav__overflow--thumb {
    left: 0;
    right: 0;
    bottom: unset;
    top: 100px;
    position: absolute;
    max-height: unset;
}
  .header-item.mobile-ac.header-item--icons {
    flex: unset;
    position: absolute;
    right: 10px;
    top: 8px;
}
  header.site-header.small--hide {
    display: block !important;
}
  .header-wrapper.header-wrapper--overlay {
    transition: .5s ease;
  }
  .header-wrapper.header-wrapper--overlay.sticky {
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 99;
}
  .header-wrapper.header-wrapper--overlay.sticky .announcement {
    display: none;
}
  body .header-wrapper--overlay.sticky + .site-nav__thumb-menu {
    position: fixed;
    top: -18px;
    z-index: 9999;
}
  .slide-nav a, .slide-nav button {
    color: #000;
    text-align: left;
    z-index: 9999 !important;
}
  .slide-nav .search-modal__wrapper {
    border: unset;
}
 .slide-nav .search-modal__wrapper {
    border: unset;
    background: #f1f1f1;
    padding: 5px 15px;
}
  .search-mobc {
  padding: 8px 16px;
    display: none;
  }
  nav.slide-nav__wrapper .slide-nav form button {
    float: right;
}
  nav.slide-nav__wrapper .slide-nav form button svg {
    width: 25px;
    height: 40px;
}
  .slide-nav__overflow {
  transition: .5s ease;
  }
  .slide-nav__overflow--thumb.sticky {
      top: 70px;
      position: fixed;
      z-index: 9999;
  }
  .slide-nav__link, .slide-nav__sublist-link {
  padding: 16px 20px;
  }
  .slide-nav__overflow--thumb nav.slide-nav__wrapper {
    width: 303px;
    height: 100%;
    overflow-y: auto;
}
  .slide-nav a, .slide-nav button {
    color: #000 !important;
}
  .slide-nav__overflow--thumb .slide-nav__dropdown {
  background-color: #fff;
  }
  .slide-nav__overflow--thumb.js-menu--is-open {
    background-color: #000;
    height: 100% !important;
  }
  .slide-nav__wrapper .slide-nav__item {
    border-bottom: 1px solid #ccc;
    padding: 7px 0;
}
  .site-nav__thumb-menu .site-nav__thumb-cart {
    display: none;
}
  .account-links-m a.slide-nav__link {
    border: 2px solid #000;
    width: 140px;;
    margin: 0 auto;
  font-size: 16px;
  font-family: Titling !important;
  text-transform: uppercase;  
        display: none;



}

'Slide out menu css'

  .slide-nav__overflow--thumb nav.slide-nav__wrapper {
    width: 303px;
    height: 100%;
    overflow-y: auto;
}
  .slide-nav a, .slide-nav button {
    color: #000 !important;
}
  .slide-nav__overflow--thumb .slide-nav__dropdown {
  background-color: #fff;
  }
  .slide-nav__overflow--thumb.js-menu--is-open {
    background-color: #000;
    height: 100% !important;
  }
  .slide-nav__wrapper .slide-nav__item {
    border-bottom: 1px solid #ccc;
    padding: 7px 0;
}

标签： css

css - 为什么我的移动导航菜单抽屉在打开时会将站点视图向下推？

问题描述

解决方案

推荐阅读