代码之家 › 专栏 › 技术社区 › Al John

顶部边框不会出现在导航栏的整个长度上(小屏幕)

bootstrap-4 css html

0

Al John · 技术社区 · 6 年前

网站链接:

website

.navbar { border-top: 3px solid rgba(55,175,75,1.00); } 应用于导航栏。现在,当屏幕变小汉堡包菜单按钮似乎重叠的绿色边框顶部的导航栏!

也许这是一个初学者的问题,但我尝试了我能想到的一切:边距移动按钮低一点(现在它重叠的底部边界),删除背景色或使其透明使用 rgba(0,0,0,0.00)

非常感谢您的建议。。。

下面是它的样子:

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

2 回复 | 直到 6 年前

1

Mahatmasamatman 6 年前

添加

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

汉堡图标。

2

1

SW30000 6 年前

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

汉堡菜单图标

3

0

Ramin eghbalian 6 年前

在顶部添加填充 .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 .导航栏 padding: 33px 16px 11px 16px 到 padding: 30px 16px 11px 16px