CSS 在 Safari 上显示菜单的媒体查询问题

Question

为了获得更快的网站，我正在将我的 WordPress 从 Elementor 的 Astra 主题迁移到 Gutemberg 的 Kadence 主题。我希望在添加内容时获得一些 SEO 成功。

新版本上线Http://staging2.DearReal.com 用户名 pawpatrol 密码 ninjagolego

我在使用 header 菜单桌面版时遇到问题。波纹管 CSS，在菜单中格式化字体，在 Safari 中不被考虑，我有时会在 Chrome.

中得到奇怪的行为

第二个不太重要的问题是“在菜单外单击以关闭它”。我已经通过在该区域左右添加 1000 像素来解决这个问题，但最好将该区域动态拉伸到屏幕的末尾。

非常感谢您的宝贵时间。问候，亨利

/* primary menu links */
#primary-menu li {
  flex-grow: 1;
}


/* desktop */
@media only screen and (min-width: 842px) {
  .mainmenu-link-css a,
  .mainmenu-link-css a:visited {
    color: #2D3748;
    display: block;
    flex-grow: 1;
    text-align: center;
  }
  .mainmenu-link-css a:active,
  .mainmenu-link-css a:hover {
    color: #A74646;
    display: block;
    flex-grow: 1;
  }
  /* taken out stuff that should not be relevant */
}


/* mobile */
/* formating mobile menu */
@media only screen and (max-width: 842px) {
  .mainmenu-link-css a,
  .mainmenu-link-css a:active,
  .mainmenu-link-css a:visited {
    color: rgba(255, 255, 255, 1) !important;
    text-align: center;
    font-size: 22px !important;
  }
  .popup-drawer .drawer-overlay,
  .popup-drawer-layout-fullwidth .drawer-inner {
    background-color: rgba(0, 0, 0, 0.0) !important;
  }
  .menu-toggle-close {
    background-color: rgba(255, 255, 255, 1) !important;
  }
  .toggle-close-bar {
    color: rgba(0, 0, 0, 1) !important;
  }
  .popup-drawer .drawer-header {
    min-height: 80px;
  }
  /* make clicking outsite the menu close it */
  button.menu-toggle-close:after {
    position: relative;
  }
  button.menu-toggle-close:after {
    content: '';
    position: absolute;
    top: -0px;
    bottom: -1000px;
    left: -1000px;
    right: -10px;
    z-index: 1;
  }
  .drawer-menu-container {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 3;
  }
  /* taken out stuff that should not be relevant */
}

Answer 1

感谢您查看此内容。这是通过添加 !important to

解决的

颜色：#2D3748！重要；

所有问题都是因为 WordPress 主题 CSS 和我的 CSS 之间存在冲突。无法在 Whosebug 中复制它。

我对任何遇到类似问题的人的建议是投资于儿童主题或什至更好的自己的主题。不要相信他们带你兜风的主题和插件的炒作，一个由过度膨胀的代码和冲突组成的迷宫。投资学习 CSS、WordPress 并定制您的代码以获得最佳输出和性能。我正在踏上理智之旅。

CSS 在 Safari 上显示菜单的媒体查询问题

CSS media query issue displaying menu on Safari

css

responsive