Eliminate the tiny space between the top of the webpage and the navigation bar

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">&#9660;</mark></a></li>
                        <li><a href="#">Shop<mark class="dropdown-menu">&#9660;</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...

Answer №1

It seems that the issue you are pointing out (which is a bit difficult to discern from the image provided) can be resolved by simply removing the 10px margin in your .logo class.

    .logo {
    display: block;
    margin: 0px auto 0 auto;
    cursor: pointer;
}

* {
    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;
}

nav {
    background-color: #141414;
    opacity: 0.98;
    width: 100%;
}

/* Hamburger- Mobile Devices */
.line {
    width: 62px;
    height: 11px;
    background: #D4AF37;
    border-radius: 25px;
    cursor: pointer;
    position: absolute;
}

/* Hamburger- Top Line */
.line-top {
    top: 28px;
    left: 41px;
}

/* Hamburger- Middle Line */
.line-middle {
    top: 48px;
    left: 41px;
}

/* Hamburger- Bottom Line */
.line-bottom {
    top: 68px;
    left: 41px;
}

/* Dopematik Logo */
.logo {
    display: block;
    margin: 0px auto 0 auto;
    cursor: pointer;
}

/* Header Functionality (Search & Cart SVG) */
.header_functionality {
    text-align: right;
    width: 95vw;
    padding-bottom: 30px;
    margin-top: -60px;
}

/* Shopping Cart SVG */
.shoppingCartSvg {
    padding-left: 35px;
}

/* Navigation Links: Mobile*/
.nav-links {
    border: 2px solid green;
    text-align: center;
    height: 85vh;
}

.nav-links li {
    padding-top: 40px;
}

.nav-links a {
    text-decoration: none;
    color: #CDB04E;
    font-size: 6rem;
}

.nav-links a:hover {
    color: whitesmoke;
}

/* Navigation Links: Desktop */
.header_table {
    display: table;
    margin: 0 auto;
    border: 2px solid red;
}

.header_table ul {
    font-size: 3.2rem;
    list-style: none;
    /* margin: 5px 0; */
}

.header_table li {
    display: inline-block;
}

.header_table li a {
    font-family: 'Arapey';
    color: #D4AF37;
    cursor: pointer;
    text-decoration: none;
    margin: 5px 35px -100px 0;
}

.header_table li a .dropdown-menu {
    color: #D4AF37;
    background-color: inherit;
    font-size: 15px;
    padding-left: 3px;
}

/* Removes Margin from last link */
.last_link:last-child {
    margin-right: 0;
}
<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">&#9660;</mark></a></li>
                    <li><a href="#">Shop<mark class="dropdown-menu">&#9660;</mark></a></li>
                    <li><a class="last_link" href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>

Answer №2

One way to tackle this issue is by setting the SVG files to absolute positioning. This will ensure that there are no gaps left behind. The header line's position is determined based on its parent's position.

.logo {
  position: absolute;
  left: 0;
  top: 1rem;
  z-index: 1;
}

Consider using position relative for the header_functionality element. This type of positioning allows the element to remain relative to its current position without affecting surrounding layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

To create a complete layout without relying on fixed positioning, ensure that the header, container, and footer collectively

Is there a method to ensure the header, container, and footer encompass the entire layout without using fixed positioning in CSS? Check out this HTML fiddle for reference. <div class="wrapper"> <header> <img src="https://www.ecobin.co ...

The orderBy filter seems to be malfunctioning

I'm utilizing ngx-pipes from this webpage: https://www.npmjs.com/package/ngx-pipes#orderby Specifically, I am using the orderBy pipe. However, when I implement the orderBy pipe in my HTML, the information is not being ordered correctly (from minor t ...

Responsive design not functioning properly for Bootstrap columns on website

If my display currently looks like this with three equally distanced images at the top and two images at the bottom, how can I achieve that design? I attempted using Bootstrap by setting the top 3 images as <div className="col-md-4"> and t ...

Populate User Interface Popover - Placement on Compact Display

I have been grappling with finding a solution to position the material ui popover beneath my anchor consistently, even on smaller screens. Take a look at this sandbox example. The current setup is working alright, but the issue is that the scroll is cont ...

How can I display pure HTML in a Pyramid view?

I am completely new to Pyramid (and relatively inexperienced with web frameworks in general). My goal is to reach a point where I can retrieve raw HTML from a view in order to format data fetched from my mongoDB database. The __init__.py in my Pyramid pr ...

Tips for setting the textfield value in JSP using Javascript

I am in need of a way to create a random number that will be displayed in the textfield once the user clicks on the "Generate" button. Can someone guide me on how to assign the value of the "output variable" to the "randomNum" textfield? Sample HTML code: ...

The reason the CSS direct descendant selector does not affect Angular components

We are working with a basic main.html. <app> <sidebar></sidebar> <main-content> <router-outlet></router-outlet> </main-content> </app> After loading a component through routing (changing the ...

Ways to display scroll bar when hovering the mouse pointer?

When visiting the website YouTube, you may notice that their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been attempting to achieve this effect on my own div, but currently, the scrollbar only appears once I start scrol ...

Is there a way to update the href attribute within the script section in vue.js?

I need to dynamically set the href attribute of a link based on data retrieved from a database and rendered in the methods section. <template v-if="header.value == 'ApplicationName'"> <a id="url" href="#" target="_blan ...

Is there a hierarchy to be followed within the <head> element?

I have been developing websites using HTML for nearly 3 years now, but since I had to teach myself, there are still a few things I am unsure about. One question that has recently become important is whether it is possible to create groups within the <h ...

The issue with Open Sans and sans-serif fonts not rendering properly in all web browsers

I am having trouble with websites that use the Open Sans font appearing with a strange handwriting style. I'm not sure where this issue is originating from. Here are some things I have tried: Using In-Private browsing Disabling all extensions Testin ...

Is the username you want available?

I am facing a challenge in my registration form validation process where I need to verify the username input using javascript and flask in python, but the implementation is unclear to me. The requirement is to utilize $.get in the javascript segment along ...

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

What is the method for retrieving the font size of elements in the native view using appium?

Can the font size of text in the native view be retrieved using appium? I am aware of using driver.findElement(By.id("by-id")).getCssValue("font-size"); for web views. Is there a similar method for native views? ...

Ways to avoid losing data when a page is refreshed

After encountering a frustrating issue with my form, I turned to research in hopes of finding a solution. However, each attempt has resulted in disappointment as the data is lost every time the page is refreshed. If anyone has advice on how to prevent th ...

What could be causing the loading issues with my three.js examples?

After downloading Mr. Doob's three.js project, I noticed that the examples in the folder work fine if they don't involve a model or texture. However, the ones with models or textures appear blank for some reason. This issue perplexes me as I am a ...

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

What is the best method to activate or deactivate a link with jQuery?

Can you provide guidance on how to toggle the activation of an anchor element using jQuery? ...

Value of an object passed as a parameter in a function

I am trying to use jQuery to change the color of a link, but I keep getting an error when trying to reference the object. Here is my HTML : <a onmouseover="loclink(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav" ...

Styling with CSS: Utilize flexbox to adjust the layout of two elements, ensuring they

Trying to float an image to the right side of a paragraph is proving to be more challenging than anticipated. 100px +-------------------------+ +------------+ | | | | | ...