CSS background used in nav gets added to the body top

Question

I have a header going on in the begining and later navigation, I add a linear gradient background to my navigation but it gets added to the top of the page. I am using bootstrap framework and I removed all the glyphicons in the fonts folder and added font-awesome fonts their. Help me out this is my first paid project. JS fiddle - https://jsfiddle.net/m1aeo6nx/

HTML

<div class="container">
        <header>
            <div class="col-md-7">
                <img src="img/logo.png" alt="Rashidamonirtrust logo" class="img-responsive">
            </div>

            <div class="col-md-4 col-md-offset-1">
                <ul class="header-icons-list">
                    <li>
                        <a href=""><i class="fa fa-home header-icons"></i></a>
                        <a href=""><i class="fa fa-sitemap header-icons"> </i></a>
                        <a href=""><i class="fa fa-envelope header-icons"> </i></a>
                    </li>

                    <li>
                        <a href="" class="header-icons-text">Home</a>
                        <a href="" class="header-icons-text">Sitemap</a>
                        <a href="" class="header-icons-text">Contact Us</a>
                    </li>

                    <li>
                        <a href=""><img src="img/donate.png" class="img-responsive donate-img" alt="donate "></a>
                    </li>
                </ul>
            </div>
        </header>

         <nav> 
            <ul>

                <li> <a href="#">Home</a> </li>
                <li> <a href="aboutus.html">About Us</a> </li>
                <li> <a href="whoweare.html">Who We Are</a> </li>
                <li> <a href="mission.html">Mission</a> </li>
                <li> <a href="activities.html">Activities</a> </li>
                <li> <a href="gallery.html">Gallery</a> </li>
                <li> <a href="donate.html">Donate</a> </li>
                <li> <a href="sitemap.html">Sitemap</a> </li>
                <li> <a href="contactus.html">Contact Us</a> </li>

            </ul>
        </nav>

    </div><!-- .container -->

CSS

<style>

        html{
            background: #E5E5E5;
        }

        body{
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            background: none;
        }

        header .header-icons-list{
            list-style: none;
        }

        header .header-icons{
            color: #191918;
            font-size: 1.2em;
            margin-right: 25%;
            margin-top: 2%;
            list-style: none;
        }

        header .header-icons-text{
            margin-right: 12%;
        }

        header .donate-img{
            margin-top: 6%;

        }


        nav {
                width: 100%;
                height: 40px;
                background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15);
                border-radius: 6px;
            }

        nav ul{
            list-style: none;
        }

        nav ul li{
            margin-right: 5%;
             display: inline-block;
        }

    </style>

i don't see it, what browser are you using? Could you add a screenshot? — Lohardt, Oct 28 '15 at 12:30
See your fiddle carefully. Green gradient background is added on nav only. Which you are trying to achieve. — Rahul Singh, Oct 28 '15 at 12:31

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

Your header contains only floated elements, so you need a clearfix on it.

See What is a clearfix?

edited May 23 '17 at 11:44

Community

1
1

answered Oct 28 '15 at 12:29

Michel Tomas - superbiche

375
2
11

CSS background used in nav gets added to the body top

1 Answers1