css - How to push Fixed div with another fixed div -


how push fixed top div 100% width, when fixed right div supposed push right side? making collapsible mobile menu. toggled button on top fixed div. right now, right fixed div overlaps top fixed div menu button. want button move left on screen visible @ times. how accomplish this? have not worked whole lot fixed elements in css. help.

note: see menu , menu button talking resizing browser window smaller. menu designed mobile layout.

site:

http://dai1.designangler.com/

css:

#slide-menu {   margin-right: -250px;   right: 0;   top:0;   width: 250px;   background: #222;   position: fixed;   height: 100%;   overflow-y: auto;   z-index: 10001;   font-family: roboto,sans-serif;   color: #fff;   font-weight: 100;   font-size: 1.5em; }   #push{   /* div holds menu button */   position: fixed;   top: 0;   padding: 0 1em;   background: #366982;   width:100%;   display:none;    z-index: 10000; } 

screenshots illustrate point:

menu closed: http://prntscr.com/2oaf82

menu open button being overlapped: http://prntscr.com/2oafv4

you can't. fixed fixed. there other ways though. here's one:

in js toggles menu ($('#push, #close').click(function () {...}) toggle class on body element called .menu-open

$('body').toggleclass('menu-open'); 

and update css:

.menu-btn {     float: right;     margin-right: 2em; } .menu-open .menu-btn {     float: left;     margin-right: 0;     margin-left: 2em; } 

Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -