css - 点击区域与菜单切换图标不一致 + 标题菜单链接在小屏幕上停用

标签 css wordpress responsive

我正在使用我正在修改的 wordpress 模板在我的网站上工作。该模板是响应式的，除了这两个问题外，它在大多数情况下都有效: - 在移动设备中，我必须点按实际菜单切换图标的右侧 才能将其打开。我一直在尝试调整切换开关的大小、更改填充、顶部/右侧条件等，但没有任何效果。 - 在平板电脑和手机上，我的标题菜单仍然出现，但链接突然失效。

这是我的切换 CSS 代码`

/* 
**  Sidebar Toggle 
*/
.no-js .sidebar-toggle {
  display: none; }

.sidebar-toggle {
  -webkit-animation: fadein 0.3s ease-out 1s backwards;
  -moz-animation: fadein 0.3s ease-out 1s backwards;
  animation: fadein 0.3s ease-out 1s backwards;
  display: block;
  content: "";
  display: table;
  box-shadow: 0 0 0 transparent;
  text-shadow: 0 0 0 transparent;
  border: 0 none;
  border-radius: 0;
  padding: 0;
  outline: 0;
  font-size: 1em;
  background: transparent;
  position: absolute;
  top: 0;
  right: 0;
  margin: -1em 0 0;
  padding: 1.286em 1em 1.5em;
  z-index: 100; }
  .sidebar-toggle span, .sidebar-toggle span:before, .sidebar-toggle span:after {
    display: block;
    width: 1.7em;
    height: 3px;
    border-radius: 1px;
    line-height: 1;
    background: rgba(232, 232, 234, 0.7); }
  .sidebar-toggle span {
    text-indent: -9999px;
    -webkit-transition-property: color, background, opacity, width;
    -moz-transition-property: color, background, opacity, width;
    transition-property: color, background, opacity, width;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out; }
    .sidebar-toggle span:before, .sidebar-toggle span:after {
      content: '';
      position: absolute;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      top: 1.286em;
      -webkit-transition-property: color, background, opacity, width;
      -moz-transition-property: color, background, opacity, width;
      transition-property: color, background, opacity, width;
      -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 0.5s;
      transition-duration: 0.5s;
      -webkit-transition-timing-function: ease-in-out;
      -moz-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out; }
    .sidebar-toggle span:before {
      margin-top: -8px;
      width: 1.286em; }
    .sidebar-toggle span:after {
      margin-top: 8px;
      width: 1em; }
  .sidebar-toggle:hover {
    background: transparent;
    box-shadow: 0 0 0 transparent;
    text-shadow: 0 0 0 transparent;
    border: 0 none; }
    .sidebar-toggle:hover span {
      -webkit-transition-property: color, background, opacity, width;
      -moz-transition-property: color, background, opacity, width;
      transition-property: color, background, opacity, width;
      -webkit-transition-duration: 0.15s;
      -moz-transition-duration: 0.15s;
      transition-duration: 0.15s;
      -webkit-transition-timing-function: ease-in-out;
      -moz-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      background: #fff; }
      .sidebar-toggle:hover span:before, .sidebar-toggle:hover span:after {
        -webkit-transition-property: color, background, opacity, width;
        -moz-transition-property: color, background, opacity, width;
        transition-property: color, background, opacity, width;
        -webkit-transition-duration: 0.15s;
        -moz-transition-duration: 0.15s;
        transition-duration: 0.15s;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        width: 1.7em;
        background: #fff; }
  .sidebar-toggle:active, .sidebar-toggle:visited, .sidebar-toggle:focus {
    box-shadow: 0 0 0 transparent; }
  .sidebar-toggled .sidebar-toggle {
    position: fixed;
    top: 0;
    margin-top: 0;
    z-index: 9999;
    border: 0 none;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition-property: color, background, opacity, -webkit-transform;
    -moz-transition-property: color, background, opacity, -moz-transform;
    transition-property: color, background, opacity, transform;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out; }
    .sidebar-toggled .sidebar-toggle span {
      background: transparent;
      -webkit-transition: background 0.2s ease-in-out;
      -moz-transition: background 0.2s ease-in-out;
      transition: background 0.2s ease-in-out; }
      .sidebar-toggled .sidebar-toggle span:before, .sidebar-toggled .sidebar-toggle span:after {
        width: 1.7em;
        margin-top: 0;
        -webkit-transform-origin: center;
        -moz-transform-origin: center;
        -ms-transform-origin: center;
        -o-transform-origin: center;
        transform-origin: center;
        -webkit-transition-property: color, background, opacity, -webkit-transform;
        -moz-transition-property: color, background, opacity, -moz-transform;
        transition-property: color, background, opacity, transform;
        -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;
        transition-duration: 0.4s;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        background: #a1a1a9;
        height: 4px; }
      .sidebar-toggled .sidebar-toggle span:before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg); }
      .sidebar-toggled .sidebar-toggle span:after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg); }
    .sidebar-toggled .sidebar-toggle:hover {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: center;
      -moz-transform-origin: center;
      -ms-transform-origin: center;
      -o-transform-origin: center;
      transform-origin: center;
      -webkit-transition-property: color, background, opacity, -webkit-transform;
      -moz-transition-property: color, background, opacity, -moz-transform;
      transition-property: color, background, opacity, transform;
      -webkit-transition-duration: 0.15s;
      -moz-transition-duration: 0.15s;
      transition-duration: 0.15s;
      -webkit-transition-timing-function: ease-in-out;
      -moz-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out; }
      .sidebar-toggled .sidebar-toggle:hover span:before, .sidebar-toggled .sidebar-toggle:hover span:after {
        background: #eb6e78; }
  .sidebar-toggled.admin-bar .sidebar-toggle {
    top: 32px; }
    @media (max-width: 800px) {
      .sidebar-toggled.admin-bar .sidebar-toggle {
        top: 32px; }
}
  .sidebar-closed .sidebar-toggle span {
    -webkit-animation: fadein 0.3s ease-out 0.4s backwards;
    -moz-animation: fadein 0.3s ease-out 0.4s backwards;
    animation: fadein 0.3s ease-out 0.4s backwards; }`

那是我的 html/php

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">

<?php wp_head(); ?>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'magnus' ); ?></a>

    <header id="masthead" class="site-header" role="banner">

        <div class="site-branding">
            <a href="http://www.milabranders.com"> <img src="http://www.milabranders.com/wp-content/uploads/2017/08/Logo-MBr-02.png"  alt="Mila Branders" height="80" Width="80"> </img> </a>

            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div><!-- .site-branding -->

        <nav id="site-navigation" class="header-navigation" role="navigation">
            <div class="menu-header-container">
            <?php wp_nav_menu(
            array(
                'theme_location' => 'secondary',
                'container' => 'false',
                'menu_id' => 'header-menu',
                'fallback_cb' => 'false',
                'depth' => '1'
            ) ); ?>
            </div>
            <button class="sidebar-toggle" aria-controls="sidebar" aria-expanded="false">
                <span class="sidebar-toggle-icon"><?php _e( 'Sidebar', 'magnus' ); ?></span>
            </button>
        </nav><!-- #site-navigation -->

    </header><!-- #masthead -->

我错过了什么？ screen shot

标题菜单 CSS

.site-header .header-navigation {
  position: absolute;
  display: block;
  right: 0;
  width: 100%;
  text-align: right;
  font-family: "Montserrat", sans-serif;
font-size: 1.5em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1316872428em;
  line-height: 1;
  opacity: 1; }

 .site-header .header-navigation a {
    display: block;
    width: 100%;
    font-size: 0.6em;
    letter-spacing: 0.1316872428em;
    color: rgba(232, 232, 234, 0.7);
    text-decoration: none; }
    .site-header .header-navigation a:hover {
      color: #fff; }
  .site-header .header-navigation .menu-header-container {
    -webkit-animation: fadein 0.3s ease-out 1s backwards;
    -moz-animation: fadein 0.3s ease-out 1s backwards;
    animation: fadein 0.3s ease-out 1s backwards;
    position: relative;
    right: 3.375em;
    opacity: 1;
    z-index: 200;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out; }
    .site-header .header-navigation .menu-header-container ul {
      list-style: none;
      margin: 0;
      padding-left: 0;
      text-align: right;
      line-height: 0; }
      .site-header .header-navigation .menu-header-container ul li, .site-header .header-navigation .menu-header-container ul a {
        line-height: 1;
        margin: 0;
        padding: 0; }
      .site-header .header-navigation .menu-header-container ul li > ul {
        display: none; }
      .site-header .header-navigation .menu-header-container ul li {
        display: inline-block;
        position: relative;
        padding: 0;
        margin: 0 0.1975308642em; }
        .site-header .header-navigation .menu-header-container ul li a {
          padding: 0 0 1em 0.4444444444em; }
    .sidebar-toggled .site-header .header-navigation .menu-header-container {
      opacity: 0;
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      transition-property: opacity;
      -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 0.5s;
      transition-duration: 0.5s;
      -webkit-transition-timing-function: ease-in-out;
      -moz-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out; }
    .sidebar-closed .site-header .header-navigation .menu-header-container {
      -webkit-animation: fadein 0.3s ease-out 0.5s backwards;
      -moz-animation: fadein 0.3s ease-out 0.5s backwards;
      animation: fadein 0.3s ease-out 0.5s backwards; }
    @media (max-width: 550px) {
      .site-header .header-navigation .menu-header-container {
        display: none; } }

最佳答案

将此 css 添加到您的 style.css 中并尝试。它会起作用。

@media (max-width: 800px)

    .site-branding {
        width: 80px !important;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
  .site-header .header-navigation .menu-header-container {
    display: block !important;
  }
}

关于css - 点击区域与菜单切换图标不一致 + 标题菜单链接在小屏幕上停用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45983089/

上一篇：javascript - 检测所有 CSS 规则何时被应用和绘制

下一篇：css - 基于网页布局的图像大小/分辨率

相关文章：

html - 溢出:滚动到超出其父级的元素

html - 我想要一个下拉菜单，但是当我设置位置 "fixed"时它不起作用

javascript - Wordpress wp_dropdown_pages 未通过 jQuery 附加

html - 我有 ul，它的 li 元素在一行中。我可以让它响应吗？

html - 如何在移动设备上更改 Materialise CSS 中水平卡片的布局？

jquery - 停止 CSS 下拉菜单拉伸(stretch)导航栏的高度？

css - 使元素出现在上一个文本之前/之后？

php - 仅显示产品分类的第一个和最后一个术语

php - 调用未定义的函数 get_term_meta

html - 如何使用 Bootstrap 为移动站点设置容器 div 的宽度

©2024 IT工具网  联系我们