html – Top border does not appear across the full length of the navbar (small screens)-ThrowExceptions

Exception or error:

Link to website:


The navbar links collapse into a hamburger menu dropdown on smaller screens and I created a CSS property for the top border .navbar { border-top: 3px solid rgba(55,175,75,1.00); } which is applied to the navbar. Now when the screen becomes smaller the hamburger menu button appears to be overlapping the green border-top of the navbar!

Perhaps this is a bit of a beginners issue but I tried everything I could think about: Margins to move the button a little lower (now it overlaps the bottom border too), removing background-color or to make it transparent using rgba(0,0,0,0.00) (does not seem to work at all)…

Any suggestions are very much appreciated…

Here’s what it looks like:

enter image description here

Green top border does not show across the full length of the navbar, looks as if the hamburger menu button having a white background is overlapping the navbar top border.

How to solve:


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

to the hamburger icon.



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

to the hamburger menu Icon


I go to your website and resolve your problem.
add padding-top to .navbar and subtract from padding-top in .navbar a like following :

.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;

I add padding-top: 2px to .navbar and change padding: 33px 16px 11px 16px to padding: 30px 16px 11px 16px

Leave a Reply

Your email address will not be published. Required fields are marked *