[英]Button is shifting after being clicked
I'm having some issues with my hamburger menu.我的汉堡菜单有问题。 When I click on the hamburger menu (which is is a button), it shifts to the left.
当我点击汉堡菜单(这是一个按钮)时,它向左移动。 This happens even when I remove the animation for my hamburger menu and replace it with text, so I know that it is related to the button.
即使我删除了汉堡菜单的动画并将其替换为文本,也会发生这种情况,所以我知道它与按钮有关。 I'm using the _s wordpress theme and tried to override everything I could but I can't seem to find where in the code this is happening.
我正在使用 _s wordpress 主题并试图覆盖我能覆盖的所有内容,但我似乎无法在代码中找到发生这种情况的地方。 I think that it is a default style hidden somewhere within the _s theme code.
我认为它是隐藏在 _s 主题代码中某处的默认样式。
Here is the relivent HTML and PHP code found within my header.php file (the code still continues to have this problem if I remove myFunction and replace the div classes with text).这是在我的 header.php 文件中找到的 relivent HTML 和 PHP 代码(如果我删除 myFunction 并用文本替换 div 类,代码仍然存在这个问题)。
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false" onclick="myFunction(this)">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
</button>
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
Here is the relivent css (I tried assigning right:0 to .menu-toggle .change and it doesn't seem to be affecting anything):这是 relivent css(我尝试将 right:0 分配给 .menu-toggle .change 并且它似乎没有影响任何东西):
.main-navigation ul a {
background-color:#335d92;
width:100%;
}
.main-navigation li {
float:none;
padding-bottom:0px;
}
.current-menu-item a {
border-width:0px;
}
.main-navigation ul a:hover {
border-width:0px;
background-color:#293859;
}
.main-navigation ul ul a{
display:none;
}
#site-navigation button {
border-radius:0px;
background:none;
border:0px;
color:white;
padding-bottom:0px;
}
.menu-toggle:focus, .button:focus, [type="submit"]:focus {
outline: none;
}
.main-navigation {
padding-top:0px;
right:0;
}
.menu-toggle .change{
right:0;
}
You need to apply float to the button, and then clear on the menu navigation container.您需要将浮动应用于按钮,然后在菜单导航容器上清除。 Of course you need to include those rules using a media for responsive, just for smaller screens when the menu buttons appears.
当然,您需要使用媒体来包含这些规则以进行响应,仅适用于出现菜单按钮时的较小屏幕。
#site-navigation button{
float:right;
}
.menu-navigation-container {
clear: both;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.