顶部边框不会出现在navbar的整个长度上（小屏幕）

Question

链接到网站：

网站

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

也许这是一个初学者的问题，但我尝试了我所能想到的一切：边距将按钮移低一点（现在它也与底部边框重叠），移除背景颜色或使用RGBA(0,0,0,0.00)使其透明（似乎根本不起作用）...

非常感谢任何建议...

下面是它的样子：

绿色的顶部边框不显示在整个navbar的长度上，看起来就像是有白色背景的汉堡包菜单按钮与navbar顶部边框重叠。

Answer 1

我去你的网站解决你的问题。向.navbar中添加padding-top，并从.navbara中的padding-top中减去，如下所示：

.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

Answer 2

添加：

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

到汉堡包菜单图标

Answer 3

添加

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

为汉堡包图标干杯。