jquery - Horizontal to off-canvas nav with splash screen, absolute positioning conflicts -
i'm working on same site previous question (and i'm css3 noob). site i'm working on has horizontal navigation menu switches off canvas menu. i'm turning classes on , off jquery , it's looking pretty good. html divided 2 divs, #drawer , #site-canvas. simplified, html looks this
<body> <nav id="drawer"> //ul menu stuff </nav> <div id="site-canvas"> <header> // header mobile version </header> <div class="splash">//splash screen<div> <div id="site-content">//lorem ipsum<div> </div> <!--end #site-canvas--> </body> it's going feature splash screen image take 100% of viewport , stay centered.
/* splash page */ .splash { background: url('//image') center center; background-size: cover; min-height: 100%; } so far good, in desktop styles (1000px+ width) have conflict nav div being outside site canvas causing fixed separate scroll bar (also splash screen arrow fixed , bottom of image isn't @ bottom of viewport). mobile version doesn't have these problems. http://codepen.io/stuffiestephie/pen/pjvkmv 
i can fix issues above absolute positioning, lose natural document flow , page context flows on screen.
.splash { background: url('//someimage.jpg') center center; background-size: cover; min-height: 100%; width: 100%; text-align: center; position:absolute; top: 0; left: 0; z-index: 0; } 
http://codepen.io/stuffiestephie/pen/oxdmby
any ideas on how fix this? i'm lost.
i have came solution here.
to fix arrow problem added position:relative; splash div make arrow, position:absolute; anchor div, instead of browser window.
to fix nav issue changed positioning fixed, , removed overflow:hidden; body, html , removed overflow-y: scroll; #site-canvas tag.
this makes nav fixed. think intended goal, , allows the rest of document flow naturally removing overflow style properties of wrapping elements.
Comments
Post a Comment