Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * Design Shack Respnsive Menu
- */
- * {
- padding: 0;
- margin: 0;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- nav {
- width: 90%;
- margin: 0 auto;
- overflow: hidden;
- }
- nav ul {
- list-style: none;
- overflow: hidden;
- }
- nav li a {
- background: #404751;
- border-right: 1px solid #fff;
- color: #fff;
- display: block;
- float: left;
- font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
- padding: 10px;
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- width: 12.5%;
- /*TRANSISTIONS*/
- -webkit-transition: background 0.5s ease;
- -moz-transition: background 0.5s ease;
- -o-transition: background 0.5s ease;
- -ms-transition: background 0.5s ease;
- transition: background 0.5s ease;
- }
- /*HOVER*/
- nav li a:hover {
- background: #222;
- }
- /*SMALL*/
- nav small {
- font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
- text-transform: none;
- color: #aaa;
- }
- /*BORDER FIX*/
- nav li:last-child a {
- border: none;
- }
- /*ORANGE MENU*/
- nav .orange {
- margin-top: 50px;
- }
- .orange li a {
- background: #404751;
- }
- .orange small {
- color: white;
- }
- .orange li a:hover {
- background: #F16529;
- }
- /*RED MENU*/
- nav .red {
- margin-top: 50px;
- }
- .red li a {
- background: #5C0002;
- }
- .red small {
- color: white;
- }
- .red li a:hover {
- background: #a60306;
- }
- /* MEDIA QUERIES*/
- @media only screen and (max-width : 1220px),
- only screen and (max-device-width : 1220px){
- nav li a {
- font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
- }
- nav small {
- font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
- }
- }
- @media only screen and (max-width : 930px),
- only screen and (max-device-width : 930px){
- nav li a {
- width: 25%;
- border-bottom: 1px solid #fff;
- font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
- }
- nav li:last-child a, nav li:nth-child(4) a {
- border-right: none;
- }
- nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
- border-bottom: none;
- }
- }
- @media only screen and (max-width : 580px),
- only screen and (max-device-width : 580px){
- nav li a {
- width: 50%;
- font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
- padding-top: 12px;
- padding-bottom: 12px;
- }
- nav li:nth-child(even) a {
- border-right: none;
- }
- nav li:nth-child(5) a, nav li:nth-child(6) a {
- border-bottom: 1px solid #fff;
- }
- }
- @media only screen and (max-width : 320px),
- only screen and (max-device-width : 320px){
- nav li a {
- font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
- }
- }
Add Comment
Please, Sign In to add comment