How to make a constant menu in the design of the site 

How to make a constant menu in the design of the site :


There are several ways to make a constant menu, which I will summarize in this article.

One of the ways to use the css code is to make sure you know it.

In this case, we use the position attribute and its value equal to fixed as follows:


#menu {positon: fixed;}


And now we want our menu to be fixed in a particular way, that is, from a height to the next, or with an animation or a special mode,

In this case, we must use jQuery code.

That way is also possible in several ways, for example, I will describe to you one of the most common and most understandable ones.

First, I will write the code for you, and then I’ll give you the necessary explanation.


$ (function () {

        // Check the initial Poistion of the Sticky Header

        can stickyHeaderTop = $ ('# stickyheader'). offset (). top;

        $ (window). scroll (function () {

                if ($ (window). scrollTop ()> stickyHeaderTop) {

                        $ ('# stickyheader'). css ({position: 'fixed', top: '0px'});

                        $ ('# stickyalias'). css ('display', 'block');

                } else {

                        $ ('# stickyheader'). css ({position: 'static', top: '0px'});

                        $ ('# stickyalias'). css ('display', 'none');




Use js in the fixed menu:

In this code, I first define a function and put a variable called stickyHeaderTop, which is equal to the start from the top of the menu.

  10 Ways to Use WordPress in Website Design

We then define what happens when the site scrolls vertically, or what function to execute.

We define when the value of the scroll is greater than the height of the menu.

In fact, when scrolling through the sub-menu, the sticky header that is defined for me is set to css, the position is fixed and the top is set to zero.

And for the ID that is defined inside me (which depends entirely on your code), we set the display value to block.

That takes the entire width of the page.

And after if else else we set the value of the first stickyheader to the position value equal to the static or the normal state.

The value of the top is also zero.

And the next id is stickyalias, so its display value is equal to none, which does not really represent this part.

Again, there are different ways to do this, depending on your code and your JavaScript code.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top