Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a fix positioned menu bar?

I would like to style my menu bar Like THIS. It's fixed to the top of the site when you scroll down and it isn't fixed where it is when the page is loaded.

How can it be done with CSS?

like image 368
cyrfandli Avatar asked Jan 11 '23 16:01

cyrfandli


1 Answers

What you're after is a 'sticky navbar/menu'.

The simplest way would be to add the below CSS to your menu/navbar

position:fixed;
top:0px;

That said, for an effect closer to the one you've posted, you'll probably want to look at using some jQuery, e.g.:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.menu').addClass('fixed');
     }
     else {
         $('.menu').removeClass('fixed');
     }
});

What this does is 'fix' the menu bar to the top of the page once you scroll past a certain point (e.g. 50px) by adding the CSS class 'fixed' to the .menu element, the fixed class would simply be e.g. the CSS above.

There are some nice examples listed here.

like image 93
SW4 Avatar answered Jan 27 '23 20:01

SW4