Edit File: header-slide-out.css
/* HEADER SLIDE OUT ================================================ */ /* header slide-out headerwrap */ body.fixed-header.page-loaded #headerwrap { position: fixed; } body.fixed-header.page-loaded.admin-bar #headerwrap { margin-top: 32px; } .mobile-menu-visible #headerwrap #menu-icon { display: none; /* menu icon when sidemenu is open */ } #header { text-align: inherit; padding: 1.05em 0; } .header-bar { float: left; } /* header slide out site logo */ #site-logo { display: inline-block; vertical-align: middle; } /* header slide out site description */ #site-description { margin: 1em; display: inline-block; } /* header slide out social widget */ #header .social-widget { position: static; float: none; } /* header slide out searchform */ #searchform-wrap { display: block; margin: 1em 0 0; } #headerwrap #searchform .icon-search:before { left: 7px; top: 3px; position: absolute; background: transparent; color: #000; width: 16px; height: 16px; font-size: 18px; padding: 3px; margin: 0; transform: none; } #headerwrap #searchform #s:focus, #headerwrap #searchform #s:hover, #headerwrap #searchform .icon-search:hover + #s { width: 100%; background-color: #eee; } /* header slide out main nav */ #headerwrap #main-nav li { float: none; display: block; position: relative; width: auto; } /* menu link */ #headerwrap #main-nav a, #headerwrap #main-nav ul a { width: auto; display: block; border: none; padding: .55em 0; margin: 0; font-size: 100%; font-weight: normal; line-height: 1.5em; background: none; text-decoration: none; } /* current link */ #headerwrap #main-nav .current_page_item > a, #headerwrap #main-nav .current-menu-item > a { color: #ed1e24; } /* sub level */ #headerwrap #main-nav ul { background: none; border: none; clear: both; color: inherit; display: block; font-size: .95em; position: static; width: auto; height: auto; margin: 0; padding: 0; opacity: 1; transform: none; box-shadow: none; } /* sub-menu icon */ #headerwrap #main-nav .menu-item-has-children > a:after, #headerwrap #main-nav ul .menu-item-has-children > a:after { display: none; } /* mega menu */ #headerwrap #main-nav .has-mega-sub-menu .mega-sub-menu, #headerwrap #main-nav .has-mega-column > .sub-menu { background: none; box-shadow: none; } #headerwrap #main-nav .has-mega-column > .sub-menu { max-height: inherit; } #headerwrap #main-nav .has-mega-sub-menu .mega-sub-menu, #headerwrap #main-nav .has-mega-column > ul.sub-menu { position: static; display: block; border: none; min-height: 0; max-height: none; margin: 0; width: auto; opacity: 1; transform: none; } #headerwrap #main-nav .has-mega-sub-menu .mega-sub-menu ul { height: auto; width: auto; float: none; } #headerwrap #main-nav .has-mega-column > .sub-menu > li { display: block; float: none; width: auto; margin: 0; padding: 0; } #headerwrap #main-nav .has-mega-column .sub-menu > li > a { text-transform: none; margin: 0; } #headerwrap #main-nav .mega-sub-menu li:after { content: ''; } #main-nav li.mega-link.loading:before, #headerwrap #main-nav .has-sub-menu > a:after, #headerwrap #main-nav .has-mega-sub-menu > a:after, #headerwrap #main-nav .mega-sub-menu li a:after, #headerwrap #main-nav .mega-menu-posts { display: none; } #headerwrap #main-nav .has-mega-column > .sub-menu .widget { margin-top: .5em; margin-bottom: .5em; } /* Remove sub arrow mobile */ #main-nav .menu-item-has-children > a .sub-arrow, #main-nav .page_item_has_children > a .sub-arrow { display: none !important; } /* sub-menu child arrow */ #main-nav .menu-item-has-children .child-arrow:before, #main-nav .page_item_has_children .child-arrow:before { content: "\e801"; /* ti-angle-down */ font-family: 'themify_theme_icon'; font-size: 0.8em; cursor: pointer; position: absolute; right: 0; top: 4px; transition: all 0.5s ease-in-out; } #main-nav .menu-item-has-children .child-arrow.toggle-on:before, #main-nav .page_item_has_children .child-arrow.toggle-on:before { content: "\e800"; /* ti-close */ transform: rotate(-90deg); } /* sub-menu dropdown animation */ .header-slide-out #headerwrap #main-nav .has-sub-menu > .children > li > ul.children, .header-slide-out #headerwrap #main-nav .has-mega-column > .children > li > ul.children, .header-slide-out #headerwrap #main-nav > li > div.children, .header-slide-out #headerwrap #main-nav > li > ul.children, .header-slide-out #headerwrap #main-nav .has-sub-menu > .sub-menu > li > ul.sub-menu, .header-slide-out #headerwrap #main-nav .has-mega-column > .sub-menu > li > ul.sub-menu, .header-slide-out #headerwrap #main-nav > li > div.sub-menu, .header-slide-out #headerwrap #main-nav > li > ul.sub-menu { height: 100%; overflow: hidden; max-height: 0; transition: max-height 0.5s ease-in-out; margin: 0; padding: 0 0 0 1em; } .header-slide-out #headerwrap #main-nav .has-sub-menu > .children > li > .toggle-on + ul.children, .header-slide-out #headerwrap #main-nav .has-mega-column > .children > li > .toggle-on + ul.children, .header-slide-out #headerwrap #main-nav > li > .toggle-on + div.children, .header-slide-out #headerwrap #main-nav > li > .toggle-on + ul.children, .header-slide-out #headerwrap #main-nav .has-sub-menu > .sub-menu > li > .toggle-on + ul.sub-menu, .header-slide-out #headerwrap #main-nav .has-mega-column > .sub-menu > li > .toggle-on + ul.sub-menu, .header-slide-out #headerwrap #main-nav > li > .toggle-on + div.sub-menu, .header-slide-out #headerwrap #main-nav > li > .toggle-on + ul.sub-menu { max-height: 1000px; min-height: initial; } /* header slide out slide cart */ .slide-cart-visible #menu-icon { display: none; } /* header slide out header widget */ .header-widget { display: none; text-align: center; } .header-widget .header-widget-inner { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } /* header slide out fixed-header */ .fixed-header #header { min-height: inherit; } #headerwrap.fixed-header #searchform-wrap, #headerwrap.fixed-header .header-bar { display: block; } .mobile_menu_active #headerwrap.fixed-header .social-widget, #headerwrap.fixed-header .social-widget { display: inline-block; } /* MOBILE MENU ACTIVE */ body:not(.mobile_menu_active) #headerwrap .header-icons { position: absolute; display: block; right: 7%; text-decoration: none; color: inherit; font-size: 1em; z-index: 2; } body:not(.mobile_menu_active):not(.announcement-bar-showing):not(.themify_builder_active) #headerwrap .header-icons { top: 50%; transform: translateY(-50%); } .announcement-bar-showing:not(.mobile_menu_active) #headerwrap .header-icons{ bottom: 15px; } body:not(.mobile_menu_active)body.mobile-menu-visible .header-icons, body:not(.mobile_menu_active)body.slide-cart-visible .header-icons { z-index: 1 !important; /* prevent the overlap of header buttons with the sidemenu */ } /* slide menu close */ body:not(.mobile_menu_active) #headerwrap #menu-icon-close { position: absolute; display: block; text-decoration: none; top: 10px; right: 10px; font-size: 20px; color: inherit; } body:not(.mobile_menu_active) #headerwrap #menu-icon-close:after { content: "\e800"; /* ti-close */ font-family: 'themify_theme_icon'; } /* Slide Menu Styles */ body:not(.mobile_menu_active) .sidemenu { transition: all .2s ease-in-out; height: 100%; width: 300px; padding: 2em 1.5em; background-color: #fff; color: #000; display: block; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: fixed; top: 0; z-index: 11111; } .slide-cart-visible .sidemenu, .mobile-menu-visible .sidemenu { box-shadow: -4px 0 22px -22px rgba(0,0,0,.8); } #main-nav a, #main-nav ul a, #main-nav .mega-menu-posts a { color: #000; } body:not(.mobile_menu_active) .sidemenu h1, body:not(.mobile_menu_active) .sidemenu h2, body:not(.mobile_menu_active) .sidemenu h3, body:not(.mobile_menu_active) .sidemenu h4, body:not(.mobile_menu_active) .sidemenu h5, body:not(.mobile_menu_active) .sidemenu h6 { color: inherit; } body:not(.mobile_menu_active).admin-bar .sidemenu { top: 32px; } body:not(.mobile_menu_active) #mobile-menu { right: -300px; } body:not(.mobile_menu_active) #mobile-menu.sidemenu-on { right: 0; } body:not(.mobile_menu_active).sidemenu-active { position: relative; } body:not(.mobile_menu_active).sidemenu-active, body:not(.mobile_menu_active).sidemenu-active #headerwrap { left: 0; transition: left .2s ease-in-out; } body:not(.mobile_menu_active).sidemenu-right, body:not(.mobile_menu_active).sidemenu-right #headerwrap.fixed-header { left: -300px; } /* SEARCH FORM */ body:not(.mobile_menu_active) #headerwrap #searchform { position: relative; left: auto; right: auto; top: auto; bottom: auto; float: none; clear: both; margin: 0 0 1em; padding: 0; width: auto; } body:not(.mobile_menu_active) #headerwrap #searchform #s { width: 100%; float: none; transition: none; margin: auto; color: inherit; padding: 5px 15px 5px 35px; background-color: #eee; position: static; height: auto; } /* fix tinyMCE buttons in Builder on frontend, #3021 */ .frontend.noScroll .mce-container.mce-floatpanel { position: fixed; }
Back to File Manager