如何在 Gumby CSS 框架中改变导航栏的高度？答案

【问题标题】：How to change the height of the navigation bar in the Gumby CSS framework?如何在 Gumby CSS 框架中改变导航栏的高度？
【发布时间】：2013-11-17 10:49:46
【问题描述】：

我正在使用Gumby CSS framework。我只是想将导航栏的高度从默认的 60px 更改为 40px。在 _settings.scss 文件中，我已将“$navcontain-height”更改为 40px，但据我所知，这根本没有效果。

【问题讨论】：

标签： html css responsive-design sass css-frameworks

【解决方案1】：

尝试设置

max-height: 40px;

我希望这会奏效

编辑别忘了更新

min-height: 60px;

到

 min-height: 40px;

或者您可以将 min-height 更新为 40px，然后设置 height 它也可以工作

【讨论】：

谢谢。您的建议确实会改变条形的高度，但不会完全改变。链接不再垂直居中，li 元素的高度仍为 60 像素。另外，我仍然不知道“$navcontain-height”是做什么的。（我试过了，例如，.navbar {height: 42px;min-height: 42px;max-height: 42px;}
$navcontain-height 是声明高度的粗俗方式，我认为他们会在多个地方使用这个高度
.navbar ul li 中也有取消高度，您可以相应设置
这就是为什么我认为在设置文件中更改它会自动改变高度。再次感谢。
在.navbar ul li 中设置height 仍然会使垂直对齐不正确。然后我可以将.navbar ul li > a 设置为line-height: 42px;，但我觉得$navcontain-height 应该做点什么，考虑到Gumby 的编写方式，更改高度不需要太多额外的CSS。

【解决方案2】：

试试这个，

// resize navbar height to 40px
.navbar {
    min-height: 40px;
    height: 40px;
 }

.navbar ul li { 
  height: 40px; 
  line-height: 38px; 
  }

.navbar ul li > a { 
  height: 40px; 
  line-height: 38px; 
  }

// menu icon position when go to mobile mode
@media only screen and (max-width: 767px) { 
  .navbar a.toggle { 
    top: 0%;
  }
}

至少对我有用，祝你好运

【讨论】：