CODEWITHSUNDEEP
htmlcssnavbar
Zoid
Zoid

Reputation: 191

Space above navigation bar?

I currently have a gap above my navigation bar and I'm not sure how to remove it. Any ideas? I would like to have a gap of about 5-10px above my navigation bar. I think new fresh eyes are needed to look at my code.

The HTML:

<body>

        <!--  Naigation Code  -->
            <nav class="navigation-main">
                <ul class="navigation-right">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Forum</a></li>
                </ul>
            </nav>
<div class="homepage-container">
            <h2 class="navigation-logo">Code Depot</h2>
<br>
<i class="fa fa-angle-double-down" style="font-size: 40px; color: #FFFFFF; margin-top: 55px; margin-bottom: 20px;"></i>

The CSS:

li {
    list-style-type: none;
    text-decoration: none;
}

.navigation-main ul li {
    display: inline;
    padding: 10px;
    border-radius: 2px;
    float: right;
}
.navigation-main ul li a {
    color: #ffffff;
}
.navigation-main ul li a:hover {
    color: #ffffff;
}
.navigation-right {
    float: right;
    font-size: 18px;
}

/*Icon CSS*/

.large-icon {
    font-size: 1.5em;
}

/*Logo CSS (15 inch display)*/

.navigation-logo {
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    color: #FFFFFF;
    font-size: 85px;
    padding-top: 200px;
    text-align: center;
}

/*

.button-logo{
    background-color: rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    padding: 18px;
    border-radius: 8px;
    border: solid #ffffff;
    font-weight: 50;
}
.button-logo {
    transition: all 0.25s ease-in-out;   /* Hover off */
}/*
.button-logo:hover {
    -moz-filter: blur(4px);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    transition: all 0.2s ease-in;         /* On hover */
}

/*Footer CSS*/

.footer-main{
    margin-top: 125px;
    margin-left: 10px;
}
.footer-main-right{
    float: right;
    margin-right: 10px;
}

/*Content CSS*/
.homepage-container{
    text-align:center;
    margin:auto;
}
.white-info{
    font-size: 20px;
    text-align: center;
}
.white-info-title{
    text-align: center;
    margin-top: 80px;
}


.white-background {
    position: relative;
    background: white;
    width: 100%;
    height: 450px;
    margin: 0 auto;
    padding: 20px;
    resize: both;
    overflow: auto;
    color: black;
    font-size: 40px;
}

Help will be 100% appreciated guys.

Thanks for helping out :D

Upvotes: 2

Views: 1736

Answers (2)

Thaillie
Thaillie

Reputation: 1362

Just a guess but I think you haven't yet removed the standard margin around the entire page.

Try adding this:

*, body {
    margin: 0px;
    padding: 0px;
}

Upvotes: 4

Dejan Munjiza
Dejan Munjiza

Reputation: 798

margin and padding to 0 will not help you. Use:

body { float: left; }

This should fix problem for you. Here is an example: https://jsfiddle.net/77275ae9/

Upvotes: -2

Related Questions