Search code examples
htmlcsstemplatesnavigationweebly

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


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.


Solution

  • 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/