Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**** Nesting Menu ****/
- /* when mobile menu is open, change hamburger icon to x icon */
- #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
- content: '\4d';
- }
- /* makes sub sub menu icon be right arrow instead of down arrow */
- #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
- #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
- content: '5';
- }
- /* - mobile menu toggling elements, injected via jQuery - */
- /* make menu list item be relative, to be able to position toggle within this item */
- #main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
- position: relative;
- }
- /* the new toggle element, which is added via jQuery */
- #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
- position: absolute;
- z-index: 1;
- width: 36px;
- height: 36px;
- line-height: 36px;
- border-radius: 50%;
- top: 5px;
- right: 30px;
- cursor: pointer;
- text-align: center;
- }
- /* the new toggle element when popped */
- #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
- background-color: rgba(255,255,255, 0.2);
- }
- /* toggle icon */
- #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
- font-family: "ETmodules" !important;
- font-weight: normal;
- font-style: normal;
- font-variant: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- line-height: 36px;
- font-size: 24px;
- text-transform: none;
- speak: none;
- content: '\33';
- color: #da1755;
- }
- /* toggle icon when triggered */
- #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
- content: '\32';
- }
- /* hide sub menus by default */
- #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
- display: none !important;
- padding-left: 0;
- }
- /* show sub menu when triggered via jQuery toggle, and add slight bg color */
- #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
- display: block !important;
- }
- /* remove sub menu list item left padding, since padding will be on anchors */
- #main-header #mobile_menu.et_mobile_menu li li {
- padding-left: 0;
- }
- /* adjust mobile menu anchors side paddings */
- #main-header #mobile_menu.et_mobile_menu li a {
- padding-left: 20px;
- padding-right: 20px;
- }
- /* indent sub sub menus further */
- #main-header #mobile_menu.et_mobile_menu li li li a {
- padding-left: 60px;
- padding-right: 20px;
- }
- #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
- background-color: transparent;
- font-weight: inherit;
- }
- /* make the current page's mobile menu link be different */
- #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
- font-weight: bolder;
- }
- /****** Code Style: Menu Slide-In ******/
- /* Font Awesome */
- .fa {
- margin-right: 15px ;
- }
- @media only screen and (max-width: 980px){
- #mobile_menu {
- display: block !important;
- min-height: 100vh;
- height: 100%;
- top: 0;
- right: 0;
- position: fixed;
- z-index: 9998;
- overflow: scroll;
- border-top: none;
- padding-top: 60px !important;
- }
- .et_mobile_menu li a {
- color: #da1755 !important;
- width: 100%;
- float: left;
- text-align: left;
- border-bottom: 1px solid #ddd;
- margin: 5px;
- transition: .2s;
- text-transform: uppercase;
- }
- .mobile_nav ul#mobile_menu .current_page_item > a {
- color: #fff !important;
- background-color: rgba(255, 255, 255, 0.1);
- }
- .mobile_nav.closed #mobile_menu {
- background: rgba(51,51,51,0.9) !important;
- -webkit-transform: translateX(100%);
- -moz-transform: translateX(100%);
- -ms-transform: translateX(100%);
- -o-transform: translateX(100%);
- transform: translateX(100%);
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-transition: -webkit-transform 0.4s 0s;
- -moz-transition: -moz-transform 0.4s 0s;
- transition: transform 0.4s 0s;
- background: rgba(51,51,51,0.9) !important;
- }
- .mobile_nav.opened #mobile_menu {
- background: rgba(27,29,30,0.98) !important;
- -webkit-transform: translateX(0);
- -moz-transform: translateX(0);
- -ms-transform: translateX(0);
- -o-transform: translateX(0);
- transform: translateX(0);
- -webkit-overflow-scrolling: touch;
- -webkit-transition: -webkit-transform 0.4s 0s;
- -moz-transition: -moz-transform 0.4s 0s;
- transition: transform 0.4s 0s;
- }
- #main-header .container.clearfix.et_menu_container {
- width: 100%;
- }
- .mobile_menu_bar:before {
- color: #1b1d1e !important;
- }
- .mobile_nav.opened .mobile_menu_bar:before {
- content: '\4d';
- color: #fff !important;
- z-index: 9999;
- }
- }
- @media only screen and (max-width: 980px) {
- .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {
- z-index: 9999;
- }
- #et-top-navigation {
- padding-right: 5px;
- }
- }
- @media only screen and (min-width: 481px) {
- #mobile_menu {
- width: 340px;
- margin-left: calc(100% - 340px);
- }
- }
- @media only screen and (max-width: 480px) {
- #mobile_menu {
- width: 290px;
- margin-left: calc(100% - 290px);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement