divi fixed and hamburger navigation setup

1@media screen and (max-width: 980px) {
2 .container { 
3 width: 100% !important;
4 }
5 .et_header_style_left .logo_container{
6 padding-left: 25px;
7 }
8 .et_header_style_centered #main-header .mobile_nav {
9 background-color: transparent;
10 }
11 .mobile_nav.closed .select_page {
12 display: none;
13 }
14 .et-fixed-header#main-header {
15 background-color: transparent !important;
16 }
17}
18.et_mobile_menu {
19 top: 0 !important;
20 border-top: 3px solid #283fc0 !important;;
21 background-color: #fff !important;
22 padding: 20% 0;
23}
24.et_mobile_menu li a {
25 text-align: center;
26 font-size: .8em;
27 border: 0;
28 padding: 15px 0;
29 letter-spacing: 1px;
30}
31.mobile_nav ul#mobile_menu .current_page_item > a {
32 color: #283fc0;
33}
34.mobile_nav ul#mobile_menu li ul li a {
35 font-size: .8em !important;
36 margin: auto;
37 color: #363636 !important;
38 padding-top: 0.2em;
39}
40.et_mobile_menu li a:hover {
41 color: #999;
42 -webkit-transition: all .2s ease-in-out;
43 transition: all .2s ease-in-out;
44}
45.mobile_menu_bar:before {
46 padding-right: 25px;
47 color: #363636 !important;
48}
49.mobile_nav.opened .mobile_menu_bar:before {
50 content: "\4d";
51 z-index: 99999;
52}
53
54/* NESTING MOBILE MENU SETTINGS */
55#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
56 content: '\4d';
57}
58
59#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after, 
60#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
61 content: '5'; 
62}
63
64#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
65 position: relative; 
66}
67
68#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
69 position: absolute;
70 background-color: rgba(0,0,0,0.03);
71 z-index: 1;
72 width: 36px;
73 height: 36px;
74 line-height: 36px;
75 border-radius: 50%;
76 top: 6px;
77 right: 10px;
78 cursor: pointer;
79 text-align: center;
80}
81
82#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
83 background-color: rgba(0,0,0,0.1);
84}
85
86#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
87 font-family: "ETmodules" !important;
88 font-weight: normal;
89 font-style: normal;
90 font-variant: normal;
91 -webkit-font-smoothing: antialiased;
92 -moz-osx-font-smoothing: grayscale;
93 line-height: 36px;
94 font-size: 24px;
95 text-transform: none;
96 speak: none;
97 content: '\33';
98}
99
100#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
101 content: '\32';
102}
103
104#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
105 display: none !important;
106 padding-left: 0;
107}
108
109#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
110 display: block !important;
111 background-color: rgba(0,0,0,0.03);
112}
113
114 #main-header #mobile_menu.et_mobile_menu li li {
115 padding-left: 0;
116}
117
118#main-header #mobile_menu.et_mobile_menu li a, 
119#main-header #mobile_menu.et_mobile_menu li li a,
120#main-header #mobile_menu.et_mobile_menu li li li a {
121 padding-left: 20px;
122 padding-right: 20px;
123}
124
125#main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a {
126 padding-right: 20px;
127}
128
129#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
130 background-color: transparent;
131 font-weight: inherit;
132}
133
134#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
135 font-weight: bolder;
136}
137