Need to fix the navigation bar & social links in Weebly site

Question

I have been toying with the different templates at Weebly and trying to find one fixed nav bar that I can add social links at the top to, but I can't seem to work with any. The social links tend to be out of place.

I have decided to use a current template, but need to fix the current header portion. I have tried adding position: fixed to a few areas of the CSS, but it turned out horrendous. The background can be seen along with the scrolling.

Answer 1

apply this to #header-wrap

position: fixed;
top: 0;
z-index: 1;
background: #FFF; //if you want a background on the fixed header. 

You now have the border on the #page-wrap so if you want to keep that give this div a margin-top. If you want the border on the fixed header, put it there.

Styling for you nav:

#nav-wrap {
  position: fixed;
  top: 47px; 
  z-index: 2;
}

#nav-wrap .container {
   clear: both;
   overflow: hidden;
   position: relative;
   padding-bottom: 10px;
   margin-bottom: 10px;
   background: url(theme/saperator.png?1418308200) no-repeat bottom left;
   z-index: 2;
  background: #FFF;
}

http://jsfiddle.net/ft44wLym/