CSS position fixed causing overlapping of content

Question

I'm making a static website, I fixed the navigation menu on the top as a fixed header section.

The problem is arising that whatever content I add next to it is overlapping on the top of the menu.

Adding a relative position to the content acts in the same way.

Setting position as absolute is obviously the only thing that works but then I will have to add a whole lot of margins and that will make the site too unstable.

This is my CSS for the menu and i don't have really anything in the main CSS due this problem.

nav {
    position: fixed;
    top: 0;
    background:none;
    z-index:10000;
    width:100%;
    font-size:34px;
    transition: all 0.5s;
}

nav.navScroll {
    background: #013D5F;
    font-size:20px;
    transition: all 0.5s;
    color: #fff;
}

img.logo {
    float:left;
    display:none;
    transition: all 0.5s;
}

img.logoScroll {
    display:inline;
    width:50px;
    padding:5px;
    transition:all 0.5s;
}

div.menu {
    text-align:center;
}

div.menuScroll {
    float:right;
}

ul {
    padding-left:0;
    margin-left:0;
}

li.nav {
    display:inline;
    text-decoration:none;
    padding-left:15px;
}

    li.nav a {
        list-style-type: none;
        text-decoration:none;
        color: white;
        font-weight:400;
    }

    li.nav a:hover {
        color: #FFD634;
        transition: 1.2s;
    }

.navScroll li.nav a {
    color:#fff;
}

.navScroll li.nav a.selected {
    color: #FFD634;
}

Answer 1

Jaromanda X correctly indicates that fixed position elements are taken out of flow. You must add a margin to the page body, or main container, equal to the height of your nav element. Your 'z-index:10000;' will prevent any scrolling elements from covering up your nav, provided nothing is given a higher z-index ;)