I've made several attempts to eliminate the gap between the navigation and the top by setting margin: 0; and border-box in various places to no avail. Strangely, I couldn't get the navigation bar to stick, so I had to resort to making the header sticky instead. I've included all the necessary code below, but if you require more, I can also upload it to CodePen. Thanks in advance!
https://i.sstatic.net/doCrj.jpg ----Html Code Below----
<body>
<header>
<nav>
<!-- Navigation: Mobile -->
<div class="hamburger">
<div class="line line-top"></div>
<div class="line line-middle"></div>
<div class="line line-bottom"></div>
</div>
<img class="logo" src="../icons/SVG/logo.svg" alt="Dopematik Logo">
<div class="header_functionality">
<img style="cursor: pointer;" class="searchSvg" src="../icons/SVG/search.svg" alt="Search Button">
<img style="cursor: pointer;" class="shoppingCartSvg" src="../icons/SVG/shoppingCart.svg"
alt="Shopping Cart Button">
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Navigation: Deskop -->
<div class="header_table">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About<mark class="dropdown-menu">▼</mark></a></li>
<li><a href="#">Shop<mark class="dropdown-menu">▼</mark></a></li>
<li><a class="last_link" href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
-----CSS Code Below-----
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
background-color: #141414;
font-size: 62.5%;
scroll-behavior: smooth;
/* 10px */
/* font-size: calc(1em + 0.5vw); */
}
body,
html {
margin: 0;
padding: 0;
}
/* TODO: FIGURE OUT PROBLEM WITH STICKY NAV BAR! */
/* Navigation Section*/
header {
box-sizing: border-box;
top: 0;
position: -webkit-sticky;
/* Safari */
position: sticky;
z-index: 1000;
}
// Add the rest of the CSS code here...