自定义导航栏 - CSS 技巧，Bootstrap 响应式答案

【问题标题】：Custom Navbar - CSS skill, Bootstrap responsive自定义导航栏 - CSS 技巧，Bootstrap 响应式
【发布时间】：2017-12-14 02:20:55
【问题描述】：

我迫切需要像这张照片一样制作一个导航栏：

我没有使用 CSS 的技能来使它正确，特别是如果我不希望这个品牌徽标是 png 或 jpeg 而是用 css 制作的。

我还需要这个导航栏使用 boostrap 做出响应。固定在顶部。

谁能帮我实现这个目标？

附言。如果你向下滚动，应该会有一点渐变，就像在 stackoverflow 网站上一样。

固定顶部导航栏底线的渐变如下所示：

【问题讨论】：

嗯，使用border-radius来实现“logo”是微不足道的。
这个问题太笼统了。请在 codepen 或 fiddle 中发布一些您遇到问题的特定代码，我很乐意提供帮助。
实际上@CBroe 如果考虑到填充/边距，这会有点困难。
我没有技能来制作这个完全用 html/css 制作的导航栏。这就是我寻求帮助的原因。谢谢
那么你需要掌握一些技能，最好的方法就是去尝试一些东西。您应该至少能够向我们展示这个导航的代码示例，其中已经应用了一些基本格式。和你之前的问题一样，到目前为止，这几乎是一个“我不能，你做”类型的帖子——这不是 StackOverflow 的用途。本网站供开发人员就具体问题提出具体问题。

标签： html css twitter-bootstrap responsive-design navbar

【解决方案1】：

.border {
  
  /* the border you need (as box-shadow) */
  box-shadow: 0 1px 0 rgba(12,13,14,0.15), 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;

  /* fixed to top */
  top: 0px;

  /* make it responsive */
  width: 100%;

  /* basics */
  position: fixed;
  background-color: #fafafb;
  height: 60px;
  
}

&lt;div class="border"&gt;&lt;/div&gt;

【讨论】：

如果你想要向下滚动时的渐变，你的意思是增加弓形阴影的大小。向下滚动后必须添加一个带有js的类。