how can I prevent my header (top of pg, blue border) to not collapse? this is because nav, inside header, is positioned absolute… I can’t stand this… even if an element is positioned absolute, it still occupies space, no? this is very annoying…
(I tried all possible settings for overflow property, none worked… usu. overflow:hidden works if element inside is floated, but I can’t get this to work with element inside being positioned… it would work if nav were positioned relative; but I can’t do that, because then other content gets pushed down when sub-nav items show… oh brother…)
Are you trying to get the blue border around the mobile nav to go away? If so, it’s the header that has the border, not the nav. So you can just remove that and take off the margin-top for the regular nav.
Oh i see. Sorry about that.
Is there a reason for giving it an absolute positioning? It wraps when it you turn it off and the overflow:visible. If you need to move it around, you can just use margins.
yes there is… if I don’t set it to absolute, then the main content of the page shifs down when the sub-items show…
I did take out overflow:visible (that was to set it back to the default, since I have overflow:hidden for the phones…)
but the <header> (blue border) is still collapsed…
(just a note that might be of interest… this nav was loosely “inspired” from the nav in sony.com… that has been touted in some tutorials as a very good example of responsive design… I wanted to see if I could create a responsive nav without a plugin… I wanted my own JS code… the JS code for the nav in sony.com is insane… I think it’s this one… http://www.sony.com/static/js/scripts-header.js)
position: absolute is pretty miserable to work with for page layout. Other elements don’t see the element, so act as if it’s not there. You could set a height on the <header>, but I’d just remove the positioning, which is not needed anyway.
yes, Ralph, the positioning is needed… if I don’t position the <nav> absolute then the content of the rest of the page shifts down when the items in sub-menu show… i…e, the nav needs to sit “on top” of the rest of the page at all times… (mouse over any of the elements, you’ll see… (this is on desktop version, not phones…) positioning relative makes the <header> behave how I want, but then again, the content of the rest of the page slides down when sub-items appear…
it’s odd that you would need use a clearing element… and on a container that holds only one other element?
Also you have clearing div as the FIRST element in the HEADER, that makes no sense. Clearing elements must be AFTER the element they clear, so that one is superflous
However what causing teh mess here is your use of AP… ( and some cascading issues)
AP’ed elements are taken out of the normal flow.
@media only screen
and (min-width : 640px){
...
nav {display:block; width:100%; position:static; /*overflow:visible;*/ margin:0;}
...
}
this should fix your collapsing issue. If nav was serving in some positioning context, you could also use position:relative instead of position:static.
In that case, the set the top level links or list items to position: relative and set the dropdown ULs to position: absolute to position them in relation to those top level links. That’s the standard drowpdown setup. You don’t need or want pos: absolute on the main menu itself.
oh – I used to have two elements there… forgot to remove the “clear” div…
thanks for pointing out error in that tag, though…
(I once read that when you forget a “=” in a tag like that FF autom. adds it (not sure about other browsers…
position:static doesn’t work… again, main content of page shifts down when you mouse over links in nav…
thank you for your help, Ralph… I gotta check out for the night…
nav{overflow:visible}
nav ul#top li{position:relative}
nav ul#top ul {position:absolute;top:100%;}
nav ul#top ul ul{top:0}
Just paste that code after your nav code and you will see it works without pushing the content down and your sub sub menus will also fly out in the correct place.
Are you still having problems or just testing as things seem to have changed since I gave the fix?
You seem to have two versions running in that last page (sub2.html); one js and one css version. It looks like you have removed the code to hide the menu initially so you will need this:
nav ul li ul,nav ul li ul ul {margin-left:-999em}
nav ul li:hover > ul{margin-left:0}
this just a learning exercise… I just wanted to show the two versions I have now…
I wanted to continue playing around with this over the weekend, but I got a last minute job for the weekend and I had to put this on the back burner…
thank you very much Paul, you’ve been very helpful…
