Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Div with navigation covers text

2:45 pm on Aug 6, 2013 (gmt 0)

New User

5+ Year Member

joined:Aug 6, 2013
posts: 2
votes: 0

Hello (sorry for my English),

I make a one-page-website (with scrolling on jquery). On big resolutions, from 1024x768 and more, it's all right. But if I try to zoom a page on tablet or open it on smartphone, I see that the div with navigation menu "crawls" over the text. The reason is clear - position:fixed. Without it this div will go up by scrolling down and I don't need it. Is it possible, to make this div with :fixed scalable or something like that? My objective is - it has to be always on the same height and do not cover a text. And I don't know how to do it...

[edited by: DrDoc at 4:19 pm (utc) on Aug 6, 2013]
[edit reason] Removed excessive CSS [/edit]

5:00 pm on Aug 6, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
votes: 30

I forget the details, but I know that some webkit-based mobile browsers don't fully support position:fixed. I just don't recall if it's just Safari or if Chrome also has the problem. I believe that the problem browsers always render position:fixed as having top:0; set. I'm sure you can find the details online, but the only work-around I know of is to work with position:absolute if possible.
5:11 pm on Aug 6, 2013 (gmt 0)

New User

5+ Year Member

joined:Aug 6, 2013
votes: 0

Yeah, it happens on iPad, iPhone (Safari), but it's already enough for me. I don't have some devices on Android, maybe it will be the same problem.
In my case is :absolute the same thing like :relative, so the div simply goes up if you scroll down the page. I think I have to try other ways. Sh...
Thanks for the answer!