Correct padding or margin when using fixed top bar

Question

My client wants the site to be responsive and have a fixed-top bar. This is the layout in full width. enter image description here

But he also wants it to be responsive, so when I resize elements should adapt nicely. The body element has a 60px padding to the top, to compensate for the fixed top bar. But when I resize this is no longer enough. This is the same image with the browser window resized. Notice how the top bar overlaps the other elements.

enter image description here

I'm using bootstrap (navbar-fixed-top). Does anybody know how to fix this?

Regards.

your expected outcome ? – AdityaSaxena Aug 19 '13 at 15:18 — AdityaSaxena, Aug 19 '13 at 15:18
For the top bar not to overlap content. – André Fratelli Aug 19 '13 at 15:25 — André Fratelli, Aug 19 '13 at 15:25

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

Uses media tags to target different screen sizes and adjust css accordingly.

have a look here.

CSS media queries for screen sizes

edited May 23 '17 at 11:53

Community

1
1

answered Aug 19 '13 at 15:35

James Nicholson

987
10
20

score 0 · Answer 2 · answered Aug 19 '13 at 15:12

0

Use a percentage for your padding-top instead of px.

answered Aug 19 '13 at 15:12

Moduo

623
6
17

score 0 · Answer 3 · answered Aug 19 '13 at 15:35

0

Hard to tell without seeing any code, but try to wrap the "other elements" with a div (if not already done) and give it a top margin of 60px.

answered Aug 19 '13 at 15:35

user2550712

3
2

That's what I have now =\ I'm using padding, but have already tried with margin-top. – André Fratelli Aug 19 '13 at 15:41

Correct padding or margin when using fixed top bar

3 Answers3