-2

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
potongsaga
  • 1
  • 3

1 Answers1

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/

Jeroen
  • 1,991
  • 2
  • 16
  • 32
  • thanks for the quick response, when i did that, it only affected the social links part. the logo and navigation bar are not within the header wrap.. apparently i think the logo and navigation are part of the body... is there anything else i can do or how i can mediate this? – potongsaga Dec 11 '14 at 13:08
  • You could make #nav-wrap fixed to and a top of 47px (header height). – Jeroen Dec 11 '14 at 13:19
  • almost there! THANK YOU! just need to adjust certain layout, by any chance that you know how i can better adjust the layout, maybe make the header - logo+ nav bar area height a little smaller – potongsaga Dec 11 '14 at 13:53
  • Sorry i dont know what you mean by 'adjust the layout, maybe make the header - logo+ nav bar area height a little smaller' – Jeroen Dec 11 '14 at 14:13
  • hi there, managed to play with some of the codings, just left with shifting the header, and possibly making a full white horizontal background for the header.. and also shifting the social icons a little to the right.. can anyone help? – potongsaga Dec 11 '14 at 14:14
  • add width:100% to #header-wrap and: width: 100%; position: fixed; top: 47px; z-index: 2; To #nav-wrap then you can remove the fixed pos from the container, is that what you want ? – Jeroen Dec 11 '14 at 14:22
  • wow! magic! ive tried putting width100% before ur comment through different sections over and over but did not manage to arrange anything! okay now, i just need to arrange the navigation bar more to the left - its too far right, and need to arrange the logo slightly more to the left. – potongsaga Dec 11 '14 at 14:34
  • You still did not move the fixed position to the nav-wrap also remove the width:100% from the container. I editted my asnwer with the css for you nav and container – Jeroen Dec 11 '14 at 14:40
  • /* Navigation -----------*/ #nav-wrap .container { clear: both; overflow: hidden; position: relative; padding-bottom:10px; padding-right:50px; margin-bottom:10px; background: url(saperator.png) no-repeat bottom left; position: fixed; top: 47; z-index: 2; background: #FFF; width: 100%; } #nav-wrap .container table { width:100%; } – potongsaga Dec 11 '14 at 14:43
  • if i remove the fixed position from the #nav-wrap container, the nav bar does not stick on top already. and im not sure which width 100% to remove – potongsaga Dec 11 '14 at 14:45
  • Use the CSS in the fiddle i added in my answer. – Jeroen Dec 11 '14 at 14:53
  • thank you so much jeroen, u have been a brilliant help! – potongsaga Dec 11 '14 at 15:19
  • You are welcome, side note: it is considered bad practise to use tables when you dont need them check this out:http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Jeroen Dec 11 '14 at 15:39
  • thanks alot for the tip jeroen, will keep that in mind. this was a template already provided by weebly and i thought it would be easier to work from a template than to start from scratch. but really appreciate your input, you dont know how thankful i am. been at it for almost 1.5days! ure a really nice and helpful person, thanks! – potongsaga Dec 11 '14 at 16:36