1#mobileheader 2{ 3 display: none; 4 background: #2980b9; 5 color: #fff; 6 padding: .4045em .809em; 7 position: relative; 8 line-height: 50px; 9 text-align: center; 10 font-size: 100%; 11} 12 13#mobileheader a 14{ 15 color: #fff; 16 font-weight: 700; 17 flex: 1; 18} 19 20#mobileheader .menu 21{ 22 font-size: 30px; 23 float: left; 24 cursor: pointer; 25} 26 27/*@media only screen and (max-width: 42em)*/ 28@media (max-width: 42em) 29{ 30 31 #mobileheader 32 { 33 display: flex; 34 align-items: center; 35 } 36 37 #mobileheader #btn-mobilemenu 38 { 39 cursor:pointer; 40 position: relative; 41 width: 30px; 42 height: 30px; 43 } 44 45 #mobileheader #btn-mobilemenu .icon-menu 46 { 47 position: absolute; 48 top: 3px; 49 left: 0; 50 } 51 52 #mobileheader #btn-mobilemenu .icon-menu:before{ 53 background:#fff; 54 border-radius:2px; 55 box-shadow:0 10px #fff, 0 20px #fff; 56 content:''; 57 display:block; 58 height:5px; 59 width:30px; 60 -webkit-box-shadow:0 10px #fff, 0 20px #fff; 61 } 62 63 #mobileheader #btn-mobilemenu i { 64 font-size: 30px; 65 position: absolute; 66 top: 0; 67 left: 0; 68 } 69 70} 71