Верхняя граница не отображается по всей длине панели навигации (маленькие экраны)

Question

Ссылка на сайт:

сайт

Ссылки на панели навигации сворачиваются в выпадающее меню гамбургеров на маленьких экранах, и я создал свойство CSS для верхней границы .navbar { border-top: 3px solid rgba(55,175,75,1.00); }, который применяется к панели навигации. Теперь, когда экран становится меньше, кажется, кнопка меню гамбургера перекрывает зеленую рамку верхней части панели навигации!

Возможно, это немного новичок, но я попробовал все, о чем мог подумать: поля для перемещения кнопка чуть ниже (теперь она перекрывает и нижнюю границу), удаляя фоновый цвет или делая его прозрачным, используя rgba(0,0,0,0.00) (кажется, не работает вообще) ...

Любые предложения очень очень ценится ...

Вот как это выглядит:

Зеленая верхняя граница не отображается по всей длине панели навигации выглядит так, как будто кнопка меню гамбургера с белым фоном перекрывает верхнюю границу панели навигации.

Answer 1

Добавьте

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

к значку гамбургера.

Answer 2

Добавить:

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

в меню гамбургера. Значок

Answer 3

I go на ваш сайт и решить вашу проблему. добавьте 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