Stickyjs and jumping navigation menu

How to fix a sticky navigation bar on a site?

The problem is that the header section just jumps to the left at the moment, when I start scrolling, I just want it to stay exactly where it is, if I add position:absolute; to the section it stops to jump, great, however, the site has a blue line, that has the navigation menu on and goes across the width of the page, this is regardless of how wide the screen is.

If I use the position:absolute; code on the header section it stops the line from appearing across the remaining space and cuts it in line with the actual body of the website. The footer remains fine and its making it look unbalanced. Can anyone think of a way to not lose the blue strip?

Also, for some reason part of the header section, which covers the shopping cart and items inside doesn't want to move down with the sticky header, it gets left behind at the top. Is there an easy way in coding to just associate whatever that section is to be part of the header section, or will I have to create a second sticky code for that and make it float in the correct place?

What can I give to help out any further, I'm using the stickyjs plugin, although if you can figure a way to fix everything using another method it will be great.

This link shows what the site is doing at my current stage: http://pressparts.oxatis.com/Default.asp?ADContext=1

Solved

For a sticky navigation bar on a website you should use

position: fixed;
top: 0px;
left: 0px;

This will put your nav bar on the top-left corner of the screen, regardless of scrolling.