관리-도구
편집 파일: navbar-orange.css
=============================== Header CSS =================================*/ .header{ background-color:#fff; } .header .navbar-collapse{ padding:0; } /* Topbar */ .header .topbar { background-color: orange; padding: 5px 0px; font-size: 12px; } .header .content { float: left; } .header .content li { display: inline-block; color: #fff; margin-right: 10px; font-weight:500; } .header .content li:last-child{ margin-right: 0px; padding-right:0px; border-right:0px; } .header .content li i { margin-right: 5px; } .header .content li a { color: #fff; } .header .social{ float:right; } .header .social li { display: inline-block; margin: 0; margin-right: 15px; } .header .social li:last-child{ margin-right:0px; } .header .social li a { color: #fff; } /* Logo */ .header .logo { float: left; margin-top: 34px; } .header .header-widget { float: right; padding: 30px 0; } .header .single-widget { position: relative; display: inline-block; padding-left: 60px; margin-right: 20px; } .header .single-widget:last-child { margin-right: 0px; border-right: 0px; padding-right: 0px; } .header .single-widget i { position: absolute; text-align: center; font-size: 18px; top: 0; left: 0; width: 40px; height: 40px; line-height: 40px; border: 1px solid #e6e6e6; border-radius: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .header .single-widget:hover i{ border-color:transparent; } .header .single-widget h4 { font-weight: 500; font-size: 16px; } .header .single-widget h4 span { color: #666; font-weight: 400; display: block; margin-top: 5px; font-size: 14px; } .header .single-widget h4 a{ color:#000; } .header .header-menu { background: orange; z-index: 3333; } .header .navbar { background: none; box-shadow: none; border: none; position: relative; padding: 0; } .navbar-nav { display: block; } .header .nav li { float: left; position: relative; margin-right: 5px; } .header .nav li:last-child{ margin-right:0px; } .header .nav li a { color: #fff; font-size: 14px; text-transform: uppercase; padding: 10px 20px; display: block; position: relative; text-shadow: none; } .header .nav li:hover a, .header .nav li.active a { color: #fff; } .header .nav li a i { margin-left: 5px; } .header .nav li .dropdown { background: #fff; width: 220px; position: absolute; left: 0; z-index: 99; opacity: 0; visibility: hidden; -webkit-transform:scale(0.5); -moz-transform:scale(0.5); transform:scale(0.5); -webkit-box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.2); box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; margin: 0; border: solid; border-color: #fff; border-width: 1px; /*list-style: none; padding: 0; margin: 0;*/ } .header .nav li:hover .dropdown{ transform:scale(1.0); opacity:1; visibility:visible; } .header .nav li .dropdown li{ float:none; margin:0; } .header .nav li .dropdown li a { padding: 10px 15px; color: #666; display: block; font-weight: 400; text-transform: capitalize; background: transparent; } .header .nav li .dropdown li i{ float:right; } .header .nav li .dropdown li:hover a{ color:#fff; } .header .nav li .dropdown.submenu{ left:100%; top:0; opacity:0; visibility:hidden; -webkit-transform:scale(0.5); -moz-transform:scale(0.5); transform:scale(0.5); } .header .nav li .dropdown li:hover .dropdown.submenu{ opacity:1; visibility:visible; transform:scale(1.0); } .header .nav li .dropdown li .dropdown.submenu li a { color: #777; background: transparent; } .header .nav li .dropdown li .dropdown.submenu li:hover a{ color:#fff; } .header .button { position: absolute; top: 0; right: 0; } .header .button .btn { margin-top: 8px; color: #fff; border-radius: 50px; box-shadow:none; border:1px solid transparent; } .header .button .btn:hover{ color:#252525; background:transparent; border-color:#e6e6e6; } .header .button .btn i{ margin-right:5px; } /* Header Sticky */ .header.sticky .header-menu{ position:fixed; width:100%; top:0; left:0; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; background:#fff; transition:all 0.4s ease; animation: fadeInDown 1s both 0.2s; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.30); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.30); box-shadow:0px 0px 10px rgba(0, 0, 0, 0.30); } /*=============================== End Header CSS =================================*/ @media only screen and (max-width: 767px){ .breadcrumbs { padding: 50px 0; } .breadcrumbs h2 { font-size: 25px; } .section-title { text-align: center; margin-bottom: 30px; padding: 0; } .header .logo { float: none; margin:0; } .header .logo img{ /*max-width: 80%;*/ max-width: 50px; margin:0; } .slicknav_menu { background: transparent;; padding: 5px; } .slicknav_nav { clear: both; color: #fff; margin: 0; background: orange; } .slicknav_btn:hover{ background:orange; } .slicknav_nav .slicknav_item a i{ display:none; } .slicknav_nav li:hover a{ background:#fff; color:#252525; } .slicknav_nav li .dropdown li a, .slicknav_nav li .dropdown li .dropdown li a{ background:transparent; color:#fff; } .slicknav_nav li .dropdown li:hover a, .slicknav_nav li .dropdown li .dropdown li:hover a{ background:#fff; color:#252525; } .slicknav_nav .slicknav_arrow{ float:right; } .button .btn{ font-size:14px; } .slicknav_menu { display: block; margin-top: -28px; } .slicknav_btn { margin: 0; position: relative; top: -7px; } .header .header-inner { padding: 15px 0; background:#fff; } .header .content,.header .social { float: none; text-align: center; } .header .content li { display: block; font-size: 15px; margin-right: 0px; padding-right: 0px; border:none; } .header .single-widget.button, .header .search-bar, .header .header-widget, .header .header-menu{ display:none; } /* Header Sticky */ .header.sticky .header-inner{ position:fixed; width:100%; top:0; z-index:33333; left:0; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; animation: fadeInDown 1s both 0.2s; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.30); } /**/ } /*nav bar hover active color*/ .header .content li i, .header .social li:hover a, .header .single-widget i, .header .button .btn:hover i { color: #f8f9fa; } .header .nav li:hover a, .header .nav li.active a, .header .nav li .dropdown li:hover a, .header .nav li .dropdown li .dropdown.submenu li:hover a, .header .button .btn, .breadcrumbs ul li.active a { background: orange; } .new_footer_area { background: #fbfbfd; } .new_footer_top { padding: 10px 0px 200px; position: relative; overflow-x: hidden; } .new_footer_top .footer_bg { position: absolute; bottom: 0; background: url("http://droitthemes.com/html/saasland/img/seo/footer_bg.png") no-repeat scroll center 0; width: 100%; height: 266px; } .new_footer_top .footer_bg .footer_bg_one { background: url("https://1.bp.blogspot.com/-mvKUJFGEc-k/XclCOUSvCnI/AAAAAAAAUAE/jnBSf6Fe5_8tjjlKrunLBXwceSNvPcp3wCLcBGAsYHQ/s1600/volks.gif") no-repeat center center; width: 330px; height: 105px; background-size:100%; position: absolute; bottom: 0; left: 30%; -webkit-animation: myfirst 22s linear infinite; animation: myfirst 22s linear infinite; } .new_footer_top .footer_bg .footer_bg_two { background: url("https://1.bp.blogspot.com/-hjgfxUW1o1g/Xck--XOdlxI/AAAAAAAAT_4/JWYFJl83usgRFMvRfoKkSDGd--_Sv04UQCLcBGAsYHQ/s1600/cyclist.gif") no-repeat center center; width: 88px; height: 100px; background-size:100%; bottom: 0; left: 38%; position: absolute; -webkit-animation: myfirst 30s linear infinite; animation: myfirst 30s linear infinite; } @-moz-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } @-webkit-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } @keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } .th-blue{color: orange !important} ul,ul li{ list-style:none; padding:0; margin:0; } a { text-decoration:none; } a:active, a:hover { outline: 0; text-decoration:none; } /*.slicknav_menu{ display:none; }