改变基金会顶部酒吧的颜色?

时间:2014-10-22 15:07:20

标签: html css zurb-foundation

好吧,所以我对使用基金会有点陌生,我已经尝试了几个'修复',我发现了各种各样的支持,但我仍然无法弄明白。用红色圈出的位不会变成与其余红色相同的粉红色?

好吧,我有一张图片,但我没有发布它的声誉。基本上,我得到的代码适用于我的所有下拉菜单,但不适用于左边没有任何内容的小矩形。

我在StackOverflow上找到了另一个人的问题代码,并对其进行了修改......

.top-bar {
    background: #FF859C !important;
}

.top-bar-section li a:not(.button) {
    background: #FF859C !important;   
}

.top-bar-section li a:not(.button):hover {
    background: #BCD955 !important;   
}

.top-bar-section ul li.active > a {
    background: #FF859C !important;   
}

但它不起作用?这是我真正做过的唯一编辑,但对于我的生活,我不能让它适用于那个矩形。

耶!我可以张贴图片!

![在此处输入图片说明] [1]

好。在找到代码位来显示你们的同时,我自己修复了它。所以,谢谢你让我更深入地了解它!

我没有从Foundation的网站复制代码,而是在我的基础基础css文件中找到它。

 @media only screen and (min-width: 40.063em) {
  .top-bar {
    background: #016B98;
    overflow: visible; }
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
    .top-bar:after {
      clear: both; }
    .top-bar .toggle-topbar {
      display: none; }
    .top-bar .title-area {
      float: left; }
    .top-bar .name h1 a {
      width: auto; }
    .top-bar input,
    .top-bar .button,
    .top-bar button {
      font-size: 0.875rem;
      position: relative;
      top: 7px; }
    .top-bar.expanded {
      background: #333333; }

因此,谢谢你的帮助!

第一个背景位是我需要的地方!对于那些发现这个并且感到困惑的人来说,这就是我在更改颜色方面遇到的问题(插入图片我仍然无法发布,因为你需要10个!)。

无论如何,再次感谢你。非常非常!

1 个答案:

答案 0 :(得分:0)

要更改“基础”菜单中下拉箭头的颜色,只需将此代码添加到app.css文件中即可。

.top-bar-section .has-dropdown>a:after {
border-top-color: #ff859C ;/*change to what ever color you would like*/
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}

注意:如果您正在改变普通css文件中的基础默认样式,则需要将!important标记添加到样式的末尾。