# How to make menu like this?

**URL:** <https://forum.kirupa.com/t/how-to-make-menu-like-this/613372>\
**Category:** web dev\
**Created:** [April 11, 2015, 5:59am UTC](https://forum.kirupa.com/t/how-to-make-menu-like-this/613372 "2015-04-11T05:59:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![itommy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/itommy/32/7249_2.png) [@itommy](https://forum.kirupa.com/u/itommy)\
**Post date:** [April 11, 2015, 5:59am UTC](https://forum.kirupa.com/t/how-to-make-menu-like-this/613372/1 "2015-04-11T05:59:58Z")

</div>

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](http://www.webmastersun.com) ?

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

Thanks in advanced.

---

<div class="post-metadata">

**Author:** ![chacelp](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/chacelp/32/7336_2.png) [@chacelp](https://forum.kirupa.com/u/chacelp)\
**Post date:** [April 11, 2015, 2:48pm UTC](https://forum.kirupa.com/t/how-to-make-menu-like-this/613372/2 "2015-04-11T14:48:15Z")

</div>

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:

> **[How to create an animated sticky header, with CSS3 and jQuery | Webdesigner...](https://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/)**
>
> Trends come and trends go. The ones that stick around the longest do so because they solve a particular problem. A trend that's popular right now for that very reason, is sticky elements; elements that behave normally until we scroll, and then...

---

<div class="post-metadata">

**Author:** ![itommy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/itommy/32/7249_2.png) [@itommy](https://forum.kirupa.com/u/itommy)\
**Post date:** [April 12, 2015, 8:22am UTC](https://forum.kirupa.com/t/how-to-make-menu-like-this/613372/3 "2015-04-12T08:22:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![chacelp](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/chacelp/32/7336_2.png) [@chacelp](https://forum.kirupa.com/u/chacelp)\
**Post date:** [July 30, 2015, 9:19pm UTC](https://forum.kirupa.com/t/how-to-make-menu-like-this/613372/4 "2015-07-30T21:19:53Z")

</div>

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");
  }
});
```