How can I make a menubar fixed on the top while scrolling

Question

I'd like to make a menubar, which is fixed on the top of the page while scrolling. Something like the top menu in Facebook.

Also, I want a div holding the logo float at the left of menubar, and a nav float at the right of the menubar.

don't ask any ready made code on StackOverflow, first try on your way and if you have an error then paste your code on StackOverflow or ask a error for your menubar. — Rahul Mandaliya, Apr 13 '13 at 18:21

score 15 · Accepted Answer · answered Dec 09 '11 at 17:41

This should get you started

 <div class="menuBar">
        <img class="logo" src="logo.jpg"/>
        <div class="nav"> 
            <ul>
                <li>Menu1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
            </ul> 
        </div>
    </div>



body{
    margin-top:50px;}
.menuBar{
    width:100%;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    }
.logo{
    float:left;
    }
.nav{
    float:right;
    margin-right:10px;}
.nav ul li{
    list-style:none;
    float:left;
    }

This code does not answer the question. It does not remain fixed while scrolling. In the very least you would need to use `position:fixed`. I have no idea why this has any upvotes, and why it's the accepted answer, other than "it's just some code to get you started". — Doug S, Jun 06 '16 at 05:50

score 14 · Answer 2 · answered Dec 09 '11 at 17:23

14

 #header {
        top:0;
        width:100%;
        position:fixed;
        background-color:#FFF;
    }

    #content {
        position:static;
        margin-top:100px;
    }

answered Dec 09 '11 at 17:23

ceth

44,198
62
180
289

score 4 · Answer 3 · answered Dec 09 '11 at 17:23

4

to set a div at position fixed you can use

position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */

answered Dec 09 '11 at 17:23

holographix

2,497
2
32
46

score 3 · Answer 4 · answered Aug 08 '13 at 08:42

The postition:absolute; tag positions the element relative to it's immediate parent. I noticed that even in the examples, there isn't room for scrolling, and when i tried it out, it didn't work. Therefore, to pull off the facebook floating menu, the position:fixed; tag should be used instead. It displaces/keeps the element at the given/specified location, and the rest of the page can scroll smoothly - even with the responsive ones.

Please see CSS postion attribute documentation when you can :)

Yes that was answer in my mind ( if he means fixed by the meaning), but if he means fixed by term so the answer should be position:fixed — PHPFan, Feb 16 '19 at 04:20

How can I make a menubar fixed on the top while scrolling

4 Answers4

Linked