Reputation: 19

Fixed position menu overlapping

I'm learning web designing. I tried to make a page out of my knowledge. The page is plant text. Here is the code.

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Sample Site</title>
        <link rel="stylesheet" href="style.css"/>
    </head>         

    <body>

        <header>
            <nav>
                <ul>
                    <li><a href=''>Home</a></li>
                    <li><a href='#whatwedo'>What We Do?</a></li>
                    <li><a href='#vision'>Our Vision</a></li>
                    <li><a href='#work'>Our Work</a></li>
                    <li><a href='#customer'>Our Proud Customers</a></li>
                    <li><a href='#testimonial'>Testimonials</a></li>
                    <li><a href=''>Blog</a></li>
                    <li><a href=''>About Us</a></li>
                    <li><a href=''>Contact Us</a></li>

                </ul>
            </nav>        
        </header>
        <div id='whatwedo'>
        <h1>What We Do?</h1>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
        </p>

        </div>

        <div id='vision'>
        <h1>Our Vision</h1>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
        </p>

        </div>


        <div id = 'work'>
        <h1>Our Work</h1>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
        </p>

        </div>


        <div id = 'customer'>
        <h1>Our Proud Customers</h1>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
        </p>

        </div>

        <div id = "testimonial">
        <h1> Testimonials</h1>

        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>

        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>

        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>

        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>

        </div>

        <footer>

            <nav>
                <ul>

                    <li><a href=''>Sales Company</a></li>
                    <li><a href=''>Local Resellers</a></li>
                    <li><a href=''>Special Orders</a></li>
                    <li><a href=''>Comapny Officies</a></li>
                    <li><a href=''>Subsidiaries</a></li>

                </ul>
            </nav>

        </footer>

    </body>
</html>

Below is the css file.

html {
    font-size: 100%;
    line-height: 1.8em;
}

* {
    box-sizing: border-box;
    border-color: white;
}

/*

Navigation

*/

nav ul{
    position: fixed;
    top: 0%;
}


nav ul li{
    float: left;
    margin: 1em 0.5em;
    list-style: none;

}

#whatwedo {
    clear: left;
    margin-top: 8em;
}

/* Navigation Ends 
*/

background {
    background-color: white;
}

blockquote:before {
    content: "''";
}

blockquote:after {
    content: "''";
}

#testimonial {
    text-align: center;
}

When I open the webpage, my fixed positioned menu gets overlapped. I don't want it to overlap. The overlap gets corrected when I remove this line:

 top: 0%;

from this:

nav ul{
    position: fixed;
    top: 0%;
}

Will you please help me about what's causing this error. When the line is added, menu gets overlapped and when the line is removed the menu comes down and come in front of the other content. Please correct it and explain me the problem.

Upvotes: 0

Answers (2)

learner_99

Reputation: 19

Svoka, If you open the web page you will come to know that the menu is overlapping each other. I don't want it to overlap. I want to correct this behaviour. However, the things you are telling me are already known to me. I want the overlapping glitch to be removed.

Upvotes: 0

Svoka

Reputation: 49

I think this is the correct behavior of position:fixed

Keep in mind, that position of fixed element started from the border of window, not from it's parent element.

btw, if you write 0, you don't have to type it's units (%) zero is zero, no matter in which units :)

Upvotes: 1

Fixed position menu overlapping

Answers (2)

Related Questions