Create Fixed Navigation menu in WordPress

Question

How can I fix (fixed at top while scrolling ) my WordPress powered website's navigation menu like TechCrunch.com?

Answer 1

To keep your navigation on top of the site at all times use the following css for your menu container:

left: 0;
top: 0;
position: fixed;
padding: 5px 0;
width: 100%;
text-align: center;

Then you may use some JavaScript to change the logo size if user scrolls down. I would reccomend to use jQuery library to check the navigation bar position, change it's position in case user scrolled more than the height of the navigation top keep it on top of the window and of course repeat the whole process when user scrolls.

You can find good and simple tutorial in here

The jQuery code needs to be placed in your header.php file, first by attaching jquery library <script type="text/javascript" src="/scripts/jquerylibrary.js"></script> and then by placing your code within the <script> tags also in the header php