How to make menu like this?

programming web dev
1

Hello,

I’m building a new site for my small online business, I visit a site that I really like its menu.

Can you suggest me ways how to build menu system like this site http://www.webmastersun.com ?

I mean I want my menu widely and fixed on top when I scroll my web page

Thanks in advanced.

2

Hi - There are many, many examples of a “sticky header” on the web. Just do a Google search. For example here’s a good tutorial over the topic:

3

Hey chacelp,

I works but always on top of header

I mean that I want my menu under top header and when I scroll back on the top, it will put my menu into right place.

4

Hello - You’ll have to play around with the javascript to get it to do what you want, you’ll likely need to add another conditional statement in this block of code to account for when your header has scrolled off the viewport.

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  } else {
    $('header').removeClass("sticky");
  }
});