自定义Navbar - CSS技巧，Bootstrap响应

Question

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

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

此外，我需要这个导航栏使用boostrap进行响应。固定到顶部。

任何人都可以帮助我实现这个目标吗？

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

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

Answer 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;
  
}

<div class="border"></div>