Hello so recently I've been building my personal website and been having troubles with my mobile view of my website.

The Problem : On a mobile device there is Unwanted White Space On Top Of Page (In nav Area). It basically covers the navbar.

Solutions : I've tried manipulating code, and seeing what could be causing this but no solution. Also used DevTools on google and it seems as if it won't show the top white space but only on the phone?

Nav HTML Code :

<!-- NAVIGATION -->
        <nav>
            <div class="logo"><a href="index.html"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></a></div>
            <div class="openMenu"><i class="fa fa-bars" style="color:black;"></i></div>
            <ul class="mainMenu">
                <!-- Center-aligned links -->
                <div class="nav-center">
                    <div class="navLogo"><a href="index.html"><img src="src/assets/TWINLOGO.png" style="width: 100px;height: 100px;"></a></div>
                </div>
                <!-- Left-aligned links -->
                <li><a href="contact.html" class="leftLinks">Contact</a></li>
                <li><a href="about.html" class="leftLinks">About</a></li>
                <li><a href="https://twins-merch-5.creator-spring.com/" target="_blank" class="leftLinks">Store</a></li>
                <div class="closeMenu"><i class="fa fa-times"></i></div>
                <!-- Right-aligned links -->
                <div class="nav-right">
                    <span class="icons">
                        <a href="https://www.youtube.com/c/TwinPlayz_YT/?sub_confirmation=1" target="_blank"><i class="fab fa-youtube"></i></a>
                        <a href="https://www.instagram.com/yt.twinplayz" target="_blank"><i class="fab fa-instagram"></i></a>
                        <a href="https://twitter.com/TwinPlayz_YT" target="_blank"><i class="fab fa-twitter"></i></a>
                        <a href="https://discord.gg/6hmwuh5" target="_blank"><i class="fab fa-discord"></i></a>
                    </span>
                </div>
            </ul>
        </nav>

Nav CSS Code :

/* Nav BAR */
nav {
    position: relative;
    background: rgb(255, 255, 255);
    color: #fff;
    display: flex;
    justify-content: space-between;
    height:fit-content;
    overflow: hidden;
    width:100%;
}

/* Nav Main Menu */
nav .mainMenu {
    display:flex;
    list-style: none;
}

/* Centered section inside the top navigation */
.nav-center{
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.nav-right {
    position:absolute;
    float: right;
    right:-100px;
    top:50%;
    transform: translate(-50%, -50%);
}

nav .mainMenu li a {
    display: inline-block;
    padding: 30px;
    margin:10px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 1.5rem;
    font-family:'Courier New', Courier, monospace;
}
nav .mainMenu li a:hover {
    color: rgb(0, 110, 255);
}

nav .openMenu {
    font-size: 2rem;
    margin: 20px;
    display: none;
    cursor: pointer;
}

nav .mainMenu .closeMenu , .icons i {
    font-size: 2rem;
    display: none;
    cursor: pointer;
}

nav .logo {
    margin: 6px;
    font-size: 25px;
    cursor: pointer;
    display:none;
}

.icons i {
    display: inline-block;
    padding: 12px;
    color:black;
}

Website - https://github.com/ConstantineLinardakis/TwinPlayzOfficial https://constantinelinardakis.github.io/TwinPlayzOfficial/index.html

Any idea why this is happening? Could It be because of the Nav?

CodePudding user response：

I don't think it has to do with your body margin because the margin is set to 0 when I am inspecting your website. With that being said, perhaps your problem is due to using height: fit-content; I would suggest using a fixed height.

nav {
    position: relative;
    background: rgb(255, 255, 255);
    color: #fff;
    display: flex;
    justify-content: space-between;
    height: 33.5vh; /* Change applied */
    overflow: hidden;
    width: 100%;
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

OR

It could be related to: 1

Instead of using background: none; try using background: transparent; for your class called @media (max-width: 805px) nav .mainMenu li a

CodePudding user response：

The brower's style sheet setting a margin to your <body> element by default is the culprit.

CSS fix removing browser styles default <body> margin (e.g.: 8px in Firefox):

body {
  margin: 0;
}