顶部边框不会出现在导航栏的整个长度上（小屏幕）答案

【问题标题】：Top border does not appear across the full length of the navbar (small screens)顶部边框不会出现在导航栏的整个长度上（小屏幕）
【发布时间】：2020-02-22 22:01:55
【问题描述】：

网站链接：

website

导航栏链接在较小的屏幕上折叠成汉堡菜单下拉菜单，我为顶部边框创建了一个 CSS 属性.navbar { border-top: 3px solid rgba(55,175,75,1.00); }，该属性应用于导航栏。现在，当屏幕变小时，汉堡菜单按钮似乎与导航栏的绿色边框顶部重叠！

也许这是一个初学者的问题，但我尝试了我能想到的一切：将按钮移动到更低的边缘（现在它也与底部边框重叠），删除背景颜色或使用 @ 使其透明987654325@（似乎根本不起作用）...

非常感谢任何建议...

如下所示：

绿色上边框没有显示在导航栏的整个长度上，看起来好像具有白色背景的汉堡菜单按钮与导航栏上边框重叠。

【问题讨论】：

你能和我们分享你的html和css吗？

标签： html css bootstrap-4

【解决方案1】：

添加

margin-top: 0px;
height: 100%;

到汉堡图标。

【讨论】：

谢谢，这确实解决了问题！但是现在导航栏链接下拉菜单的高度也被拉伸了。也许向导航栏图标添加一个新类会有所帮助？马上去测试。
确认！仅向汉堡包 LINK（而不是图标）添加一个新类并为该类提供 100% 的高度可以解决问题：D

【解决方案2】：

添加：

margin-top: 0.5px;
height: calc(100% - 5px);

到汉堡菜单图标

【讨论】：

【解决方案3】：

我会访问您的网站并解决您的问题。将 padding-top 添加到 .navbar 并从 padding-top 中减去 .navbar a，如下所示：

.navbar {
    width: 100%;
    height: 75px;
    padding-top: 2px;
    z-index: 2;
    /* background-color: rgba(255,255,255,0.85); */
    /* border-top: 2px solid rgba(55,175,75,1.00); */
    border-bottom: 5px solid rgba(55,175,75,1.00);
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

.navbar a {
   float: left;
   font-size: 16px;
   text-align: center;
   text-decoration: none;
   color: rgba(55,175,75,1.00);
   padding: 30px 16px 11px 16px;
   transition: 0.25s;
   transition-timing-function: ease-in-out;
}

我将padding-top: 2px 添加到.navbar 并将padding: 33px 16px 11px 16px 更改为padding: 30px 16px 11px 16px

【讨论】：

这会删除图标并在我的页面右侧添加一个空白，我不知道为什么。设置引导导航栏的样式有点棘手...... :(
@JonaGoldapple 我没有这个问题