MAINHACK

Viewing / Editing File: mobile-styles.css

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
.menu-container { font-family: 'Open Sans', sans-serif; }

@media (max-width: 425px) {
.menu-container .crbnMenu ul { padding: 0; margin: 0; list-style-type: none; }
.menu-container .crbnMenu a { border-bottom: 1px solid rgba(255,255,255,0.17); display: block; padding: 10px 20px; color: #fff;text-transform: uppercase;}
.menu-container .crbnMenu .link-stack { cursor: pointer; margin: 0 0px 0; }
.menu-container .crbnMenu .link-stack .brand { text-transform: uppercase; font-weight: bold; color: #aaa; }
.menu-container .crbnMenu .menu { display: none;border: 1px solid rgba(255,255,255,0.17); position: fixed; z-index: 9999; background: rgba(42, 60, 122,0.91); width: 100%; top: 100px; }
.menu-container .crbnMenu .menu li a span{ color: #d2d2d2; font-family: arial; text-shadow: none; text-transform: uppercase; }
.menu-container .crbnMenu .menu li a .nav-link-icon { margin-right: 10px; }
.menu-container .crbnMenu .menu li a .menu-toggle { float: right; color: #FFF; }
.menu-container .crbnMenu .menu li ul { padding: 0; margin: 0; display: none; }
.menu-container .crbnMenu .menu li ul li a { color: #fff; font-size: 13px; padding: 3% 0 3% 10%; text-shadow: none; font-family: arial; text-transform: uppercase; }
.menu-container .crbnMenu .menu li ul li a:hover { color: #ccc; }
.menu-container #nav-toggle { position: fixed !important; left: 10px !important; top: 75px !important; height: 5px !important; width: 0 !important; padding-top: 7px !important; padding-bottom: 7px !important; z-index: 99999 !important; right: 0 !important; margin: 0 !important; border: none !important;}
.menu-container #nav-toggle span { height: 5px !important; width: 30px; right: 0px; background: #2a3c7a; position: absolute; content: ''; transition: all 500ms ease-in-out !important; border: none !important; outline: none !important; }
.menu-container #nav-toggle span::before, .menu-container #nav-toggle span::after { height: 4px !important; width: 30px !important; background: #2a3c7a !important; position: absolute !important; display: block !important; content: '' !important; transition: all 500ms ease-in-out !important; }

.menu-container #nav-toggle { position: fixed important; left: 10px important; top: 70px important; height: 5px; }
 
}

@media (max-width: 599px) {
.menu-container .crbnMenu ul { padding: 0; margin: 0; list-style-type: none; }
.menu-container .crbnMenu a { border-bottom: 1px solid rgba(255,255,255,0.17); display: block; padding: 10px 20px; color: #fff;text-transform: uppercase;}
.menu-container .crbnMenu .link-stack { cursor: pointer; margin: 0 0px 0; }
.menu-container .crbnMenu .link-stack .brand { text-transform: uppercase; font-weight: bold; color: #aaa; }
.menu-container .crbnMenu .menu { display: none;border: 1px solid rgba(255,255,255,0.17); position: fixed; z-index: 9999; background: rgba(42, 60, 122,0.91); width: 100%; top: 150px; }
.menu-container .crbnMenu .menu li a span{ color: #d2d2d2; font-family: arial; text-shadow: none; text-transform: uppercase; }
.menu-container .crbnMenu .menu li a .nav-link-icon { margin-right: 10px; }
.menu-container .crbnMenu .menu li a .menu-toggle { float: right; color: #FFF; }
.menu-container .crbnMenu .menu li ul { padding: 0; margin: 0; display: none; }
.menu-container .crbnMenu .menu li ul li a { color: #fff; font-size: 13px; padding: 3% 0 3% 10%; text-shadow: none; font-family: arial; text-transform: uppercase; }
.menu-container .crbnMenu .menu li ul li a:hover { color: #ccc; }
.menu-container #nav-toggle { position: fixed important; left: 10px important; top: 70px important; height: 5px; }

}

@media (min-width: 600px) {
.menu-container .crbnMenu ul { padding: 0; margin: 0; list-style-type: none; }
.menu-container .crbnMenu a { text-decoration: none; color: #333; }
.menu-container .crbnMenu .link-stack { cursor: pointer; padding: 15px; background-color: #eee; border-bottom: 1px solid #ddd; }
.menu-container .crbnMenu .link-stack .brand { text-transform: uppercase; font-weight: bold; color: #aaa; }
.menu-container .crbnMenu .menu { display: none; background-color: #f6f6f6; }
.menu-container .crbnMenu .menu li a { border-bottom: 1px solid #eaeaea; display: block; padding: 10px 20px; }
.menu-container .crbnMenu .menu li a .nav-link-icon { margin-right: 10px; }
.menu-container .crbnMenu .menu li a .menu-toggle { display: none; }
.menu-container .crbnMenu .menu li ul { padding: 0; margin: 0; display: none; }
.menu-container .crbnMenu .menu li ul li a { padding-left: 25px; } 
.menu-container .crbnMenu .link-stack { cursor: pointer; padding: 0; background-color: #eee; border-bottom: none; }
.menu-container #nav-toggle { position: absolute; left: 10px; top: 105px; height: 5px; width: 0; padding-top: 7px; padding-bottom: 7px; z-index: 99; right: 0; margin: 0; border: none; }

}
@media (min-width: 670px) {
    .menu-container #nav-toggle { position: absolute; left: 40px; top: 103px; height: 5px; width: 10px; padding-top: 7px; padding-bottom: 7px; z-index: 99; right: 0; margin: 0; border: none; }
}
@media (min-width: 768px) {
.menu-container .crbnMenu ul { padding: 0; margin: 0; list-style-type: none; }
.menu-container .crbnMenu a { text-decoration: none; color: #333; }
.menu-container .crbnMenu .link-stack { cursor: pointer; padding: 15px; background-color: #eee; border-bottom: 1px solid #ddd; }
.menu-container .crbnMenu .link-stack .brand { text-transform: uppercase; font-weight: bold; color: #aaa; }
.menu-container .crbnMenu .menu { display: none; background: rgba(0,0,0,0.9); position: absolute; z-index: 999; width: 100%; color: #fff; top: 140px; }
.menu-container .crbnMenu .menu li a { border-bottom: 1px solid #373737;display: block;padding: 10px 20px;color: #fff; }
.menu-container .crbnMenu .menu li a .nav-link-icon { margin-right: 10px; }
.menu-container .crbnMenu .menu li a .menu-toggle { display: block; }
.menu-container .crbnMenu .menu li ul { padding: 0; margin: 0; display: none; }
.menu-container .crbnMenu .menu li ul li a { padding-left: 25px; } 
.menu-container .crbnMenu .link-stack { cursor: pointer; padding: 0; background-color: #eee; border-bottom: none; }
.menu-container #nav-toggle { position: absolute !important; left: 50px !important; top: 6% !important; height: 10px !important; width: 0; padding-left:10px !important; padding-bottom: 7px !important; z-index: 99999 !important; right: 0 !important; margin: 0 !important; border: none !important; }
.menu-container .crbnMenu .menu li a .menu-toggle { float: right; color: #FFF; }

}
@media (min-width:1024px) {
.menu-container #nav-toggle { position: absolute !important; left: 0 !important; top: 4.5% !important; height: 10px !important; width: 0; padding-top: 7px !important; padding-bottom: 7px !important; z-index: 999999 !important; right: 0 !important; margin: 0 auto !important; border: none !important; }
.menu-container .crbnMenu .menu { display: none; background: rgba(0,0,0,0.9); position: absolute; z-index: 999; width: 100%; color: #fff; top: 80px; }
    
    
    
    
}
@media (min-width: 1200px) {
.menu-container .crbnMenu { z-index: -1; width: 250px; position: absolute; }
.menu-container .crbnMenu ul { padding: 0; margin: 0; list-style-type: none; }
.menu-container .crbnMenu a { text-decoration: none; color: #333; }
.menu-container .crbnMenu .link-stack { padding: 15px; background-color: #eee; border-bottom: 1px solid #ddd; cursor: pointer; }
.menu-container .crbnMenu .link-stack .brand { text-transform: uppercase; font-weight: bold; color: #aaa; }
.menu-container .crbnMenu .link-stack .nav-toggle { display: none; }
.menu-container .crbnMenu .menu { display: block !important; background-color: #f6f6f6; }
.menu-container .crbnMenu .menu li a { font-size: 0.7em; color: #595959; font-weight: bold; border-bottom: 1px solid #eaeaea; display: block; padding: 10px 20px; }
.menu-container .crbnMenu .menu li a .nav-link-icon { margin-right: 10px; }
.menu-container .crbnMenu .menu li a .menu-toggle { display: block; float: right; }
.menu-container .crbnMenu .menu li ul { padding: 0; margin: 0; display: none; }
.menu-container .crbnMenu .menu li ul li a { font-weight: normal; font-size: 0.6em; padding-left: 25px; }
.menu-container .content { margin: 0px 0px 0px 250px; } }
.menu-container #nav-toggle { position: fixed; left: 10px; top: 70px; height: 5px; width: 0; padding-top: 7px; padding-bottom: 7px; z-index: 999999; right: 0; margin: 0; border: none; }
.menu-container #nav-toggle span { height: 5px; width: 30px; right: 0px; background: #2a3c7a; position: absolute; content: ''; transition: all 500ms ease-in-out; border: none; outline: none; }
.menu-container #nav-toggle span:before, .menu-container #nav-toggle span:after { height: 4px; width: 30px; background: #2a3c7a; position: absolute; display: block; content: ''; transition: all 500ms ease-in-out; }
.menu-container #nav-toggle span:before { top: -8px; }
.menu-container #nav-toggle span:after { bottom: -8px; }
.menu-container #nav-toggle.nav-open span { background: transparent; }
.menu-container #nav-toggle.nav-open span:before { transition: all 500ms ease-in-out; transform: translateY(8px) rotate(45deg); }
.menu-container #nav-toggle.nav-open span:after { transition: all 500ms ease-in-out; transform: translateY(-8px) rotate(-45deg); }

body { margin: 0; padding: 0; background-color: #fff; }

@media (max-width: 480px) {
    .menu-container #nav-toggle { position: fixed important; left: 10px important; top: 70px important; height: 5px; }
    
}

@media (max-width: 414px) {
.menu-container #nav-toggle { position: fixed !important; left: 10px !important; top: 100px !important; height: 5px !important; width: 0 !important; padding-top: 7px !important; padding-bottom: 7px !important; z-index: 99999 !important; right: 0 !important; margin: 0 !important; border: none !important;}

.menu-container #nav-toggle { position: absolute !important; left: 10px !important; top: 105px !important; height: 5px !important; width: 0 !important; padding-top: 7px !important; padding-bottom: 7px !important; z-index: 99999 !important; right: 0 !important; margin: 0 !important; border: none !important; }
.menu-container #nav-toggle span::before, .menu-container #nav-toggle span::after { height: 4px !important; width: 30px !important; background: #2a3c7a !important; position: absolute !important; display: block !important; content: '' !important; transition: all 500ms ease-in-out !important; }
.menu-container #nav-toggle { position: absolute !important; left: 10px !important; top: 110px !important; }

}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: mobile-styles.css

Server Info

System Features

User Info