/* ----------------------------------- Template: Theme Name NOTE: This is Header style file. All Header related style included in this file. --------------------------------------*/ .header-position { left: 0; position: absolute; width: 100%; z-index: 9; } .header-area{} .logo { margin-top: 20px; } .main-menu{} .main-menu ul{} .main-menu ul li { display: inline-block; position: relative; transition: all .3s ease 0s; } .main-menu ul li.active { background-color: #383838; } .main-menu ul li.active a{ color: #fff; } .main-menu ul li.active ul li a { color: #5a5a5a; } .main-menu ul li:hover { background-color: #383838; } .main-menu ul li.active ul li:hover a{ color: #fff; } .main-menu.menu-style-4 ul li:hover { background-color: transparent; } .main-menu.menu-style-4 ul li:hover > a { color: #888; } .main-menu ul li a { color: #5a5a5a; font-size: 16px; font-weight: 600; position: relative; text-transform: capitalize; padding: 25px 24px; display: block; } .main-menu ul li:hover > a{color:#fff} .main-menu ul li ul { background: #fff none repeat scroll 0 0; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); left: 0; opacity: 0; position: absolute; text-align: left; top: 100%; transition: all 0.3s ease 0s; visibility: hidden; width: 215px; z-index: 999; } .main-menu ul li:hover > ul{opacity:1;visibility:visible;} .main-menu ul li ul li a{} .main-menu ul li ul li { display: block; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 0.03); transition: all .3s ease 0s; } .main-menu ul li ul li:hover { background: #383838; } .main-menu ul li ul li a { color: #5a5a5a; display: block; font-size: 14px; font-weight: 300; padding: 10px 15px; text-transform: capitalize; } .main-menu ul li ul li:first-child { border-top: none; } .main-menu ul li ul li:hover > a{padding-left:15px} .main-menu ul li ul li a:before{display:none} .main-menu ul li ul li > ul { left: 100%; margin-top: -1px; opacity: 0; position: absolute; top: 45%; visibility: hidden; } .main-menu ul li ul li:hover > ul { top: 0; } .main-menu.text-right span { float: right; } .mean-container .mean-bar { background: transparent none repeat scroll 0 0; min-height: 0; padding: 0; } .mean-container a.meanmenu-reveal { border: 1px solid #464646; color: #464646; margin-top: -22px; padding: 4px 5px; position: absolute; } .mean-container a.meanmenu-reveal span { background-color: #333; } .mean-container .mean-nav { margin-top: 15px; } /** * Note: I have omitted any vendor-prefixes for clarity. * Adding them is left as an exercise for the reader. */ /* stiky */ .header-sticky.sticky { animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0; left: 0; position: fixed; top: 0; width: 100%; z-index: 999999; box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4); } .header-sticky.sticky .main-menu ul li a{ padding: 25px 24px; } .header-sticky.sticky .main-menu ul li ul li a { padding: 10px 15px; } .header-sticky.sticky .logo { margin-top: 21px; } .header-sticky.sticky .menu-toggle { margin-top: 27px; } .header-sticky.sticky .main-menu ul li ul li { padding: 0; } /* intelligent-header */ .headroom { will-change: transform; transition: transform 200ms linear; } .headroom--pinned { transform: translateY(0%); } .headroom--unpinned { transform: translateY(-100%); } .intelligent-header { background-color: #fff; left: 0; position: fixed; width: 100%; z-index: 999999; } .header-space { height: 80px; } .intelligent-header.headroom--pinned { transition: all 0.3s ease 0s; } .intelligent-header.headroom--not-top { box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4); } /* Menu Toggle */ .menu-toggle { box-sizing: border-box; float: right; height: 19px; margin-left: 30px; margin-top: 26px; padding: 0; } .stick .menu-toggle { margin-top: 25px; } .hamburger-box { height: 19px; width: 30px; } .hamburger-inner, .hamburger-inner::after, .hamburger-inner::before { background-color: #919090; height: 2px; width: 30px; } .hamburger-inner::before { top: -8px; } .hamburger-inner::after { bottom: -8px; } /* Main Menu */ .main-menu { padding: 0; } .menu-style-toggle{} .menu-style-toggle nav { opacity: 0; margin-right: -30px; visibility: hidden; } .menu-style-toggle nav.menu-open { opacity: 1; margin-right: 0; visibility: visible; } .menu-style-toggle nav { float: left; transition: all 0.3s ease 0s; } .main-menu.mean-menu.menu-style-toggle.text-right { float: right; } .waraper .header-sticky.sticky { padding-left: 100px; padding-right: 100px; } .waraper { padding: 0 100px; }