Advertisement
Guest User

Untitled

a guest
Jun 27th, 2019
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.72 KB | None | 0 0
  1. /**** Nesting Menu ****/
  2.  
  3. /* when mobile menu is open, change hamburger icon to x icon */
  4.  
  5. #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
  6. content: '\4d';
  7. }
  8. /* makes sub sub menu icon be right arrow instead of down arrow */
  9.  
  10. #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
  11. #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
  12. content: '5';
  13. }
  14. /* - mobile menu toggling elements, injected via jQuery - */
  15. /* make menu list item be relative, to be able to position toggle within this item */
  16.  
  17. #main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
  18. position: relative;
  19. }
  20. /* the new toggle element, which is added via jQuery */
  21.  
  22. #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
  23. position: absolute;
  24. z-index: 1;
  25. width: 36px;
  26. height: 36px;
  27. line-height: 36px;
  28. border-radius: 50%;
  29. top: 5px;
  30. right: 30px;
  31. cursor: pointer;
  32. text-align: center;
  33. }
  34. /* the new toggle element when popped */
  35.  
  36. #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
  37. background-color: rgba(255,255,255, 0.2);
  38. }
  39. /* toggle icon */
  40.  
  41. #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
  42. font-family: "ETmodules" !important;
  43. font-weight: normal;
  44. font-style: normal;
  45. font-variant: normal;
  46. -webkit-font-smoothing: antialiased;
  47. -moz-osx-font-smoothing: grayscale;
  48. line-height: 36px;
  49. font-size: 24px;
  50. text-transform: none;
  51. speak: none;
  52. content: '\33';
  53. color: #da1755;
  54. }
  55. /* toggle icon when triggered */
  56.  
  57. #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
  58. content: '\32';
  59. }
  60. /* hide sub menus by default */
  61.  
  62. #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
  63. display: none !important;
  64. padding-left: 0;
  65. }
  66. /* show sub menu when triggered via jQuery toggle, and add slight bg color */
  67.  
  68. #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
  69. display: block !important;
  70. }
  71. /* remove sub menu list item left padding, since padding will be on anchors */
  72.  
  73. #main-header #mobile_menu.et_mobile_menu li li {
  74. padding-left: 0;
  75. }
  76. /* adjust mobile menu anchors side paddings */
  77.  
  78. #main-header #mobile_menu.et_mobile_menu li a {
  79. padding-left: 20px;
  80. padding-right: 20px;
  81. }
  82. /* indent sub sub menus further */
  83.  
  84. #main-header #mobile_menu.et_mobile_menu li li li a {
  85. padding-left: 60px;
  86. padding-right: 20px;
  87. }
  88.  
  89. #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
  90. background-color: transparent;
  91. font-weight: inherit;
  92. }
  93. /* make the current page's mobile menu link be different */
  94.  
  95. #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
  96. font-weight: bolder;
  97. }
  98.  
  99. /****** Code Style: Menu Slide-In ******/
  100.  
  101. /* Font Awesome */
  102. .fa {
  103. margin-right: 15px ;
  104. }
  105.  
  106. @media only screen and (max-width: 980px){
  107. #mobile_menu {
  108. display: block !important;
  109. min-height: 100vh;
  110. height: 100%;
  111. top: 0;
  112. right: 0;
  113. position: fixed;
  114. z-index: 9998;
  115. overflow: scroll;
  116. border-top: none;
  117. padding-top: 60px !important;
  118. }
  119.  
  120. .et_mobile_menu li a {
  121. color: #da1755 !important;
  122. width: 100%;
  123. float: left;
  124. text-align: left;
  125. border-bottom: 1px solid #ddd;
  126. margin: 5px;
  127. transition: .2s;
  128. text-transform: uppercase;
  129. }
  130. .mobile_nav ul#mobile_menu .current_page_item > a {
  131. color: #fff !important;
  132. background-color: rgba(255, 255, 255, 0.1);
  133. }
  134.  
  135. .mobile_nav.closed #mobile_menu {
  136. background: rgba(51,51,51,0.9) !important;
  137. -webkit-transform: translateX(100%);
  138. -moz-transform: translateX(100%);
  139. -ms-transform: translateX(100%);
  140. -o-transform: translateX(100%);
  141. transform: translateX(100%);
  142. -webkit-backface-visibility: hidden;
  143. backface-visibility: hidden;
  144. -webkit-transition: -webkit-transform 0.4s 0s;
  145. -moz-transition: -moz-transform 0.4s 0s;
  146. transition: transform 0.4s 0s;
  147. background: rgba(51,51,51,0.9) !important;
  148. }
  149.  
  150. .mobile_nav.opened #mobile_menu {
  151. background: rgba(27,29,30,0.98) !important;
  152. -webkit-transform: translateX(0);
  153. -moz-transform: translateX(0);
  154. -ms-transform: translateX(0);
  155. -o-transform: translateX(0);
  156. transform: translateX(0);
  157. -webkit-overflow-scrolling: touch;
  158. -webkit-transition: -webkit-transform 0.4s 0s;
  159. -moz-transition: -moz-transform 0.4s 0s;
  160. transition: transform 0.4s 0s;
  161. }
  162.  
  163. #main-header .container.clearfix.et_menu_container {
  164. width: 100%;
  165. }
  166.  
  167. .mobile_menu_bar:before {
  168. color: #1b1d1e !important;
  169. }
  170. .mobile_nav.opened .mobile_menu_bar:before {
  171. content: '\4d';
  172. color: #fff !important;
  173. z-index: 9999;
  174. }
  175. }
  176.  
  177. @media only screen and (max-width: 980px) {
  178. .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {
  179. z-index: 9999;
  180. }
  181. #et-top-navigation {
  182. padding-right: 5px;
  183. }
  184. }
  185.  
  186. @media only screen and (min-width: 481px) {
  187. #mobile_menu {
  188. width: 340px;
  189. margin-left: calc(100% - 340px);
  190. }
  191. }
  192. @media only screen and (max-width: 480px) {
  193. #mobile_menu {
  194. width: 290px;
  195. margin-left: calc(100% - 290px);
  196. }
  197. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement