gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:05:09 24 4
gpt4 key购买 nike

我正在使用我正在修改的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com