meanmenu.css 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. a.meanmenu-reveal {
  2. display: none;
  3. }
  4. /* when under viewport size, .mean-container is added to body */
  5. .mean-container .mean-bar {
  6. float: left;
  7. width: 100%;
  8. position: absolute;
  9. background: transparent;
  10. padding: 20px 0 0;
  11. z-index: 999;
  12. border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  13. height: 55px;
  14. }
  15. .mean-container a.meanmenu-reveal {
  16. width: 35px;
  17. height: 30px;
  18. padding: 12px 15px 0 0;
  19. position: absolute;
  20. right: 0;
  21. cursor: pointer;
  22. color: #ffffff;
  23. text-decoration: none;
  24. font-size: 16px;
  25. text-indent: -9999em;
  26. line-height: 22px;
  27. font-size: 1px;
  28. display: block;
  29. font-weight: 700;
  30. }
  31. .mean-container a.meanmenu-reveal span {
  32. display: block;
  33. background: #ffffff;
  34. height: 4px;
  35. margin-top: 3px;
  36. border-radius: 3px;
  37. }
  38. .mean-container .mean-nav {
  39. float: left;
  40. width: 100%;
  41. background: #ffffff;
  42. margin-top: 55px;
  43. }
  44. .mean-container .mean-nav ul {
  45. padding: 0;
  46. margin: 0;
  47. width: 100%;
  48. border: none;
  49. list-style-type: none;
  50. }
  51. .mean-container .mean-nav ul li {
  52. position: relative;
  53. float: left;
  54. width: 100%;
  55. }
  56. .mean-container .mean-nav ul li a {
  57. display: block;
  58. float: left;
  59. width: 90%;
  60. padding: 1em 5%;
  61. margin: 0;
  62. text-align: left;
  63. color: #677294;
  64. border-top: 1px solid #DBEEFD;
  65. text-decoration: none;
  66. }
  67. .mean-container .mean-nav ul li a.active {
  68. color: #000000;
  69. }
  70. .mean-container .mean-nav ul li li a {
  71. width: 80%;
  72. padding: 1em 10%;
  73. color: #677294;
  74. border-top: 1px solid #DBEEFD;
  75. opacity: 1;
  76. filter: alpha(opacity=75);
  77. text-shadow: none !important;
  78. visibility: visible;
  79. text-transform: none;
  80. font-size: 14px;
  81. }
  82. .mean-container .mean-nav ul li.mean-last a {
  83. border-bottom: none;
  84. margin-bottom: 0;
  85. }
  86. .mean-container .mean-nav ul li li li a {
  87. width: 70%;
  88. padding: 1em 15%;
  89. }
  90. .mean-container .mean-nav ul li li li li a {
  91. width: 60%;
  92. padding: 1em 20%;
  93. }
  94. .mean-container .mean-nav ul li li li li li a {
  95. width: 50%;
  96. padding: 1em 25%;
  97. }
  98. .mean-container .mean-nav ul li a:hover {
  99. background: #252525;
  100. background: rgba(255,255,255,0.1);
  101. }
  102. .mean-container .mean-nav ul li a.mean-expand {
  103. margin-top: 3px;
  104. width: 100%;
  105. height: 24px;
  106. padding: 12px !important;
  107. text-align: right ;
  108. position: absolute;
  109. right: 0;
  110. top: 0;
  111. z-index: 2;
  112. font-weight: 700;
  113. background: transparent;
  114. border: none !important;
  115. }
  116. .mean-container .mean-push {
  117. float: left;
  118. width: 100%;
  119. padding: 0;
  120. margin: 0;
  121. clear: both;
  122. }
  123. .mean-nav .wrapper {
  124. width: 100%;
  125. padding: 0;
  126. margin: 0;
  127. }
  128. /* Fix for box sizing on Foundation Framework etc. */
  129. .mean-container .mean-bar, .mean-container .mean-bar * {
  130. -webkit-box-sizing: content-box;
  131. -moz-box-sizing: content-box;
  132. box-sizing: content-box;
  133. }
  134. .mean-remove {
  135. display: none !important;
  136. }
  137. .mobile-nav {
  138. display: none;
  139. }
  140. .mobile-nav.mean-container .mean-nav ul li a.active {
  141. color: #FF2D55;
  142. }
  143. .main-nav {
  144. background: #000;
  145. position: absolute;
  146. top: 0;
  147. left: 0;
  148. padding-top: 15px;
  149. padding-bottom: 15px;
  150. width: 100%;
  151. z-index: 999;
  152. height: auto;
  153. }
  154. .mean-nav .dropdown-toggle::after {
  155. display: none;
  156. }
  157. .navbar-light .navbar-brand, .navbar-light .navbar-brand:hover {
  158. color: #fff;
  159. font-weight: bold;
  160. text-transform: uppercase;
  161. }
  162. .main-nav nav ul {
  163. padding: 0;
  164. margin: 0;
  165. list-style-type: none;
  166. }
  167. .main-nav nav .navbar-nav .nav-item {
  168. position: relative;
  169. padding: 15px 0;
  170. }
  171. .main-nav nav .navbar-nav .nav-item a {
  172. font-weight: 500;
  173. font-size: 16px;
  174. text-transform: uppercase;
  175. color: #ffffff;
  176. padding-left: 0;
  177. padding-right: 0;
  178. padding-top: 0;
  179. padding-bottom: 0;
  180. margin-left: 15px;
  181. margin-right: 15px;
  182. }
  183. .main-nav nav .navbar-nav .nav-item a:hover,
  184. .main-nav nav .navbar-nav .nav-item a:focus,
  185. .main-nav nav .navbar-nav .nav-item a.active {
  186. color: #FF2D55;
  187. }
  188. .main-nav nav .navbar-nav .nav-item:hover a {
  189. color: #FF2D55;
  190. }
  191. .main-nav nav .navbar-nav .nav-item .dropdown-menu {
  192. -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  193. box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  194. background: #0d1028;
  195. position: absolute;
  196. top: 80px;
  197. left: 0;
  198. width: 250px;
  199. z-index: 99;
  200. display: block;
  201. padding-top: 20px;
  202. padding-left: 5px;
  203. padding-right: 5px;
  204. padding-bottom: 20px;
  205. opacity: 0;
  206. visibility: hidden;
  207. -webkit-transition: all 0.3s ease-in-out;
  208. transition: all 0.3s ease-in-out;
  209. }
  210. .main-nav nav .navbar-nav .nav-item .dropdown-menu li {
  211. position: relative;
  212. padding: 0;
  213. }
  214. .main-nav nav .navbar-nav .nav-item .dropdown-menu li a {
  215. font-size: 15px;
  216. font-weight: 500;
  217. text-transform: capitalize;
  218. padding: 9px 15px;
  219. margin: 0;
  220. display: block;
  221. color: #ffffff;
  222. }
  223. .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover,
  224. .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus,
  225. .main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active {
  226. color: #FF2D55;
  227. }
  228. .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  229. position: absolute;
  230. left: -100%;
  231. top: 0;
  232. opacity: 0 !important;
  233. visibility: hidden !important;
  234. }
  235. .main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
  236. opacity: 1 !important;
  237. visibility: visible !important;
  238. top: -20px !important;
  239. }
  240. .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  241. position: absolute;
  242. left: -100%;
  243. top: 0;
  244. opacity: 0 !important;
  245. visibility: hidden !important;
  246. }
  247. .main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu li:hover .dropdown-menu {
  248. opacity: 1 !important;
  249. visibility: visible !important;
  250. top: -20px !important;
  251. }
  252. .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  253. color: #ffffff;
  254. text-transform: capitalize;
  255. }
  256. .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover,
  257. .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus,
  258. .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  259. color: #FF2D55;
  260. }
  261. .main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover a {
  262. color: #FF2D55;
  263. }
  264. .main-nav nav .navbar-nav .nav-item:hover ul {
  265. opacity: 1;
  266. visibility: visible;
  267. top: 100%;
  268. }
  269. .main-nav nav .navbar-nav .nav-item:last-child .dropdown-menu {
  270. left: auto;
  271. right: 0;
  272. }
  273. /* Responsive Style */
  274. @media only screen and (max-width: 991px) {
  275. .mobile-nav {
  276. display: block;
  277. position: relative;
  278. }
  279. .mobile-nav .logo {
  280. text-decoration: none;
  281. position: absolute;
  282. top: 11px;
  283. z-index: 999999;
  284. left: 15px;
  285. color: #fff;
  286. font-weight: bold;
  287. text-transform: uppercase;
  288. font-size: 20px;
  289. }
  290. .mean-container .mean-bar {
  291. background-color: #000;
  292. padding: 0;
  293. }
  294. .mean-container a.meanmenu-reveal {
  295. padding: 15px 15px 0 0;
  296. }
  297. .mobile-nav nav .navbar-nav .nav-item a i {
  298. display: none;
  299. }
  300. .main-nav {
  301. display: none !important;
  302. }
  303. }