0

Here is the link to my site: daisy.camorada.com within the <style> tag there is this:

body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}

I have this so that the information in the will not be behind the navbar at the top, however, as you can see with the screenshot image below, when i visit my site with an iPhone, the padding at the top (i think that is the problem) is way too much as it pushes down the navbar.

How can I make the navbar appear at the top in both normal browsers & the iphone?! I don't think that it is a conflict issue with my other .css files. Thanks in advance for your help!

screenshot of both iphone and normal browser

Alex Spencer
  • 834
  • 2
  • 12
  • 23

2 Answers2

0

The problem is that iOS doesn't have support for position: fixed; until iOS 5. See Fixed positioning in Mobile Safari. You'll have to use position: absolute; along with some @media queries to selectively apply styles to mobile browsers.

Community
  • 1
  • 1
thirdender
  • 3,891
  • 2
  • 30
  • 33
0

It is because the iPhone deals with padding differently(/stupidly). You want to remove the Body padding and replace it with:

top:60px;
position:absolute;
tim.baker
  • 3,109
  • 6
  • 27
  • 51
  • try applying it to the style for the "container-fluid" class instead of the body - so have nothing there for the body, you may want to increase top to 80px as well – tim.baker Aug 26 '12 at 22:03
  • have you tried looking through @thirender 's link - not the best but might also work – tim.baker Aug 26 '12 at 22:05
  • I inserted that into the class you mentioned, no luck. see daisy.camorada.com thanks – Alex Spencer Aug 27 '12 at 04:20
  • for some reason in firefox it isn't looking great either – Alex Spencer Aug 27 '12 at 04:26
  • I think that i fixed it using: .navbar { *position: relative; *z-index: 2; overflow: visible; margin-bottom: 18px; top:60px; /* rid of it */ position:absolute; /* rid of it */ } – Alex Spencer Aug 27 '12 at 04:35
  • Does that look good to you now? I'm not a pro with CSS but it looks great to me. Thank you for your continued help, I really appreciate it! – Alex Spencer Aug 27 '12 at 04:45