如何使移动wordpress网站上的菜单按钮可见?
我使用了一个名为Vacation的BoldGrid主题,它有一些我编辑过的CSS,但由于某种原因,我无法更改移动设备上的菜单按钮(您单击完整菜单的三行)为红色( #960000)和白色(#fff)。任何想法我做错了什么?我应该在哪里输入颜色代码?现在这三条线在点击前是不可见的。如何使移动wordpress网站上的菜单按钮可见?
/*-----------------------------------------------
## Main Menu
-----------------------------------------------*/
/* Typography */
.navbar-default .navbar-nav {
float: none;
margin: 0 auto 10px;
}
/* Nav Center */
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
/* Nav links */
.navbar-default .navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
/* Nav hover */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background: none;
}
/* Nav active */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background: none;
}
/* Nav reset */
.navbar {
background: none;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar-default {
background: none;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
我的烦恼遗憾的菜单按钮您正在使用BoldGrid度假主题!我用这个主题研究了这个问题,并意识到在sass调色板文件中有硬编码的值会导致您遇到问题。在我们的主题的下一个版本中,我已经解决了这个问题,以便其他人也可以在此处修复此问题:https://github.com/BoldGrid/vacation/commit/0ce7953e1f4fa1fe866db4ede290cc2e2d31036a
这将使切换菜单和图标栏的颜色为#545454(深灰色)或#fff (白色),这取决于调色板中第一种颜色使用哪种颜色。在你的情况下,颜色是白色的,所以图标和条纹将是深灰色。
由于您希望使这些红色显示在您的调色板中,因此每次更新主题时确保您的更改保持原位的最佳方法是使用WordPress定制程序中的自定义CSS编辑器。
您可以访问定制器,然后点击高级>定制JS & CSS,然后点击“打开编辑器”按钮。
如果您以前从未使用过此功能,那么您可以擦除一个CSS代码片段。
您可以复制并粘贴此代码:
.palette-primary .navbar-default .navbar-toggle {
border-color: #960000;
}
.palette-primary .navbar-default .navbar-toggle .icon-bar {
background-color: #960000;
}
.palette-primary .navbar-default .navbar-toggle:hover,
.palette-primary .navbar-default .navbar-toggle:focus {
background-color: #960000;
}
.palette-primary .navbar-default .navbar-toggle:hover .icon-bar,
.palette-primary .navbar-default .navbar-toggle:focus .icon-bar {
background-color: #fff;
}
然后点击右上角的X按钮,然后按保存&发布,如果你的预览看起来你想要的方式。
这会确保您的自定义CSS在您更新主题时保持原样,以防我们进行任何可能与您自己的自定义样式冲突的样式更改。
这是因为颜色实际上是用背景颜色处理的......下面的样式是控制这些线条颜色的东西。当您想要覆盖引导程序样式时,您需要确保使用适当的类结构。
.palette-primary .navbar-default .navbar-toggle .icon-bar, .palette-primary .navbar-default .navbar-toggle:hover, .palette-primary .navbar-default .navbar-toggle:focus {
background-color: #fff;
}
你称为三线被称为汉堡包图标
添加或覆盖CSS规则之下在你的CSS
.palette-primary .navbar-default .navbar-toggle .icon-bar, .palette-primary .navbar-default .navbar-toggle:hover, .palette-primary .navbar-default .navbar-toggle:focus { background-color: #960000; }
我很欣赏所有的回应。通过将@timelsass中的代码添加到内置的自定义CSS编辑器中,我可以使“汉堡图标”显示出来。多谢你们! –