API tools faq
paste
Advertisement
MikkoDC

SRN Nav

MikkoDC
Dec 9th, 2024
14
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.21 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3.  
  4. @media only screen and (max-width: 1399px) {
  5. #navigation .desktop-nav ul > li {
  6. padding-left: 0 !important;
  7. padding-right: 0 !important;
  8. }
  9. }
  10. @media only screen and (max-width: 1387px) {
  11. // #navigation .desktop-nav ul > li a{
  12. // font-size: 14px !important;
  13. // line-height: 20px !important;
  14. // }
  15. }
  16. @media only screen and (max-width: 1270px) {
  17. // #navigation .desktop-nav ul > li a{
  18. // font-size: 14px !important;
  19. // }
  20. #navigation .desktop-nav ul > li{
  21. padding-left: 0 !important;
  22. padding-right: 0 !important
  23. }
  24.  
  25.  
  26. }
  27. @media only screen and (max-width: 1160px) {
  28. .main-nav ul li a {
  29. font-size: 14px;
  30. }
  31. }
  32.  
  33. @media only screen and (max-width: 1025px) {
  34. .main-nav ul li a {
  35. font-size: 15px;
  36. }
  37. }
  38.  
  39. @media only screen and (min-width: 1081px) {
  40. .main-nav ul li.menu-item-has-children ul.sub-menu li:hover > ul.sub-menu ,
  41. .main-nav ul li.menu-item-has-children ul.sub-menu li:focus > ul.sub-menu {
  42. display: inline-block;
  43. }
  44. }
  45.  
  46. @media only screen and (max-width: 1080px) {
  47.  
  48.  
  49. #navigation {
  50. text-align: right;
  51. width: 100%;
  52. }
  53.  
  54. button.firstToggle {
  55. display: block;
  56. }
  57.  
  58. .menu-toggle-wrap {
  59. display: none;
  60. }
  61.  
  62. .toggle-nav {
  63. display: inline-block;
  64. margin-right: 0
  65. }
  66.  
  67. .nav-mobile-header {
  68. height: 55px;
  69. background-color: #004c84;
  70. color: #ffffff;
  71. font-weight: 600;
  72. display: flex;
  73. justify-content: space-between;
  74. width: 100%;
  75. align-items: center;
  76. font-size: 16px;
  77. padding: 0 20px;
  78. text-transform: uppercase;
  79. border-top: 1px solid #033d67;
  80. }
  81.  
  82. .mobile-toggle-wrap {
  83. position: absolute;
  84. right: 0;
  85. top: 50%;
  86. transform: translateY(-50%);
  87. width: 60px;
  88. height: 60px;
  89. }
  90.  
  91. .nav-mobile-header.active {
  92. background-color: #0e7cc0;
  93. }
  94.  
  95. nav.main-nav {
  96. margin-top: 0;
  97. position: fixed;
  98. width: 100%;
  99. right: 0;
  100. top: 78px;
  101. overflow-y: auto;
  102. height: calc(100% - 103px);
  103. z-index: -1;
  104. right: 0;
  105. transition: transform 0.3s;
  106. transform: translateY(-5000px);
  107.  
  108. @include breakpoint(xs) {
  109. width: 100%;
  110. }
  111. }
  112.  
  113. body.collapse_menu nav.main-nav {
  114. transform: translateY(0px);
  115. opacity: 1;
  116. z-index: -1;
  117. }
  118. body.collapse_menu header {
  119. }
  120.  
  121. /*Mobile Menu*/
  122. .desktop-nav {
  123. display: none;
  124. }
  125.  
  126. .mobile-nav {
  127. display: block;
  128. }
  129. .menu-main-navigation-container,
  130. .menu-mobile-menu-container {
  131. display: block;
  132. margin: 0 auto;
  133. width: 100%;
  134. }
  135.  
  136. .mobile-nav.main-nav {
  137.  
  138. .main-nav-list {
  139. height: auto;
  140. background: $white;
  141. border-radius: 0;
  142. width: 100%;
  143. margin: 0 auto;
  144. padding:0;
  145. overflow-y: scroll;
  146. overflow-x: hidden;
  147. height: auto;
  148. }
  149.  
  150. ul {
  151. text-align: left;
  152. width: 100%;
  153. margin: 0;
  154. padding:0;
  155. }
  156. }
  157.  
  158. #mobile-menu {
  159. background-color: $primary__color;
  160. padding: 10px 20px;
  161.  
  162. li {
  163. line-height: 0 !important;
  164. display: block;
  165. position: relative;
  166. width: 100%;
  167. margin:0 0 1px!important;
  168.  
  169. &:last-child {
  170. margin-bottom: 0 !important;
  171. }
  172.  
  173. &.current-menu-ancestor,
  174. &.current_page_item {
  175. // background: #243C51;
  176.  
  177. // > a {
  178. // color: $white;
  179. // }
  180.  
  181. .open-menu {
  182. padding: 0;
  183. margin: 0;
  184. border: 0 !important
  185. }
  186.  
  187. }
  188.  
  189. a {
  190. font-family: $font__secondary;
  191. display: inline-block;
  192. justify-content: inherit;
  193. color: $white;
  194. height: auto;
  195. padding: 0;
  196. font-weight: 400;
  197. font-size: 16px;
  198. line-height: 24px;
  199. text-transform: capitalize;
  200. padding: 16px 0px;
  201. }
  202.  
  203.  
  204. }
  205. [class*='button-'] {
  206. padding: 0;
  207. width: 100%;
  208.  
  209. a {
  210. margin-top: 20px!important;
  211. padding: 10px 20px !important;
  212. width: 100%;
  213. border-radius: 3px !important;
  214. text-align: left;
  215. font-weight: 400 !important;
  216.  
  217. &:hover {
  218. background-color: $primary__color!important;
  219. color: $white!important;
  220. }
  221. }
  222.  
  223. }
  224. }
  225. #mobile-menu li.menu-item-has-children > ul.sub-menu {
  226. opacity: 1;
  227. background-color: $white!important;
  228. visibility: visible;
  229. transform: translateY(0);
  230. min-height: auto;
  231. left: 0;
  232. width: 100%;
  233. display: none;
  234. position: relative;
  235. z-index: 8;
  236. margin-bottom: 0;
  237. padding:0 0 10px;
  238. top:0;
  239. width: 97%;
  240. margin: 0 auto;
  241. background: transparent;
  242.  
  243. // &:before {
  244. // content: "";
  245. // position: absolute;
  246. // left: 0;
  247. // top: 0;
  248. // background: $blue1;
  249. // border-top: 1px solid $blue1;
  250. // width: 100%;
  251. // height: 10px;
  252. // }
  253.  
  254. // second level
  255. li {
  256. position: relative;
  257. margin-bottom: 1px !important;
  258. padding: 0;
  259. border-bottom:0;
  260. padding-left: 0;
  261. width: 100%;
  262. display: flex;
  263. flex-direction: row-reverse;
  264. flex-wrap: wrap;
  265. background: transparent !important;
  266. padding:0;
  267.  
  268. &.current-menu-item {
  269. // a {
  270. // background: #0C263E;
  271. // color: $white;
  272. // }
  273.  
  274. &.scrollNav a{
  275. background: #f9f9f9;
  276. color: #4B5353;
  277. }
  278. }
  279.  
  280. a {
  281. text-transform: capitalize;
  282. color: #4B5353;
  283. font-size: 14px;
  284. font-family: $font__secondary;
  285. padding: 14px 0px;
  286. position: relative;
  287. border-radius: 3px;
  288.  
  289. > li {
  290. padding: 0;
  291. a {
  292. padding:10px 20px;
  293. }
  294. }
  295.  
  296. &:not(.open-menu) {
  297. margin-right: auto;
  298. padding: 22px 0 22px 20px;
  299. font-family: $font__main;
  300. text-transform: uppercase;
  301. font-weight: 600;
  302. color: $primary__color!important;
  303. }
  304. }
  305.  
  306. &.active {
  307. > a {
  308. padding-bottom: 8px;
  309. }
  310. }
  311.  
  312. }
  313. }
  314.  
  315. .main-nav.mobile-nav ul li.menu-item-has-children ul.sub-menu li a.open-menu {
  316. margin-top: 10px;
  317. }
  318.  
  319. .main-nav.mobile-nav ul li.menu-item-has-children ul.sub-menu li a.open-menu,
  320. a.open-menu {
  321. width: 20px !important;
  322. height: 20px !important;
  323. float: right;
  324. margin-right: 15px;
  325. margin-top: 8px;
  326. }
  327.  
  328.  
  329. header.sticky .main-nav.mobile-nav ul li > a {
  330. }
  331.  
  332.  
  333. .main-nav ul li a:hover,
  334. .main-nav ul li a:focus {
  335. color: inherit !important
  336. }
  337.  
  338. .main-nav ul li.menu-item-has-children ul.sub-menu {
  339. background: $white;
  340. border-radius: 0;
  341. position: relative;
  342. width: 100%;
  343. display: none;
  344. left: 0;
  345. top: 0;
  346. opacity: 1;
  347. visibility: visible;
  348. transition: inherit;
  349. box-shadow: none;
  350. padding-bottom: 0;
  351. margin: 0 0 10px;
  352. }
  353.  
  354. .main-nav ul li.menu-item-has-children ul.sub-menu a {
  355. color: #fff;
  356. line-height: 15px;
  357. text-align: left;
  358. white-space: nowrap;
  359. text-overflow: ellipsis;
  360. overflow: hidden;
  361. word-break: break-word;
  362. word-wrap: break-word;
  363. padding-left: 0;
  364. font-size: 15px;
  365. }
  366.  
  367. .main-nav ul li.menu-item-has-children ul.sub-menu a:hover,
  368. .main-nav ul li.menu-item-has-children ul.sub-menu a:focus {
  369. color: #ffffff;
  370. background: transparent;
  371. }
  372.  
  373. .main-nav ul li.menu-item-has-children ul.sub-menu a:before {
  374. display: none;
  375. }
  376.  
  377. .nav-mobile-header {
  378. height: 55px;
  379. background-color: #004c84;
  380. color: #ffffff;
  381. font-weight: 600;
  382. display: flex;
  383. justify-content: space-between;
  384. width: 100%;
  385. align-items: center;
  386. font-size: 16px;
  387. padding: 0 20px;
  388. text-transform: uppercase;
  389. border-top: 1px solid #033d67;
  390. }
  391.  
  392. .nav-mobile-header.active {
  393. background-color: #0e7cc0;
  394. }
  395.  
  396. .main-nav ul li.menu-item-has-children a:after {
  397. display: none;
  398. }
  399.  
  400. .main-nav ul li.menu-item-has-children a.open-menu:before {
  401. position: absolute;
  402. transition: all ease-in-out 150ms;
  403. display: inline-block !important;
  404. content: '\f0d7' !important;
  405. font: normal normal normal 16px/1 FontAwesome !important;
  406. right: 0px;
  407. top: 20px;
  408. color: $secondary__color;
  409. }
  410.  
  411. .main-nav ul li.menu-item-has-children ul li.menu-item-has-children > a:before {
  412. top: 12px;
  413. }
  414.  
  415. .main-nav ul li.menu-item-has-children ul.sub-menu li {
  416. background: $primary__color !important;
  417. width: 100%;
  418. height: auto;
  419. padding-left: 0;
  420. padding-right: 0;
  421. }
  422.  
  423. .main-nav ul li.menu-item-has-children ul.sub-menu li:last-child > a {
  424. border-bottom: none;
  425. }
  426.  
  427. .main-nav ul li.menu-item-has-children ul.sub-menu a span {
  428. font-size: 16px;
  429. display: inline-block;
  430. margin: 0;
  431. }
  432.  
  433. .main-nav ul li.menu-item-has-children ul.sub-menu li a {
  434. color: $white;
  435. height: auto !important;
  436. display: inline-block;
  437. width: auto;
  438. padding: 0;
  439. }
  440.  
  441. .main-nav ul li.menu-item-has-children ul.sub-menu li ul.sub-menu a:hover,
  442. .main-nav ul li.menu-item-has-children ul.sub-menu li ul.sub-menu a:focus {
  443. background: none;
  444. }
  445. /*All Menu Item with Icons*/
  446. .main-nav ul li:before {
  447. left: 0 !important;
  448. }
  449. /*Third Level Menu*/
  450. .main-nav ul li.menu-item-has-children ul.sub-menu li ul.sub-menu {
  451. position: relative;
  452. margin-right: 0;
  453. top: 0;
  454. left: 0;
  455. }
  456.  
  457. .main-nav ul li.menu-item-has-children ul.sub-menu li ul.sub-menu li a {
  458. color: $gray1;
  459. }
  460.  
  461. .main-nav ul li.menu-item-has-children ul.sub-menu li ul.sub-menu li {
  462. padding-left: 0;
  463. }
  464.  
  465. .main-nav ul li.menu-item-has-children ul.sub-menu li ul.sub-menu li.current-menu-item > a,
  466. .main-nav ul li.menu-item-has-children ul.sub-menu li ul.sub-menu li.current_page_item > a {
  467. color: $gray1 !important;
  468. background: transparent !important;
  469. }
  470. }
  471.  
  472. @media only screen and (max-width: 1370px) {
  473.  
  474. .mobile-nav ul li {
  475. margin: 0;
  476. }
  477. .mobile-nav ul li.active {
  478. padding-bottom: 0;
  479. }
  480. #navigatio n.desktop-nav ul ul a {
  481. padding: 11px 16px;
  482. }
  483. .main-nav ul li.menu-item-has-children a:after {
  484. top: 3px;
  485. }
  486. .menu_footer ul li a {
  487. font-size: 12px !important;
  488. }
  489. }
  490.  
  491. @media only screen and (max-width: 767px) {
  492.  
  493. body.collapse_menu nav.main-nav {
  494. top: 77px;
  495. }
  496. }
  497.  
  498. /* iPad Pro in portrait & landscape*/
  499. /* Portrait and Landscape */
  500. @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
  501. .main-nav ul li a {
  502. font-size: 13px !important;
  503. }
  504.  
  505. .main-nav ul li.menu-item-has-children ul.sub-menu li:focus > ul.sub-menu,
  506. .main-nav ul li.menu-item-has-children ul.sub-menu li:hover > ul.sub-menu {
  507. display: none;
  508. }
  509.  
  510. .desktop-nav ul li.menu-item-has-children:focus > ul.sub-menu,
  511. .desktop-nav ul li.menu-item-has-children:hover > ul.sub-menu {
  512. display: none;
  513. }
  514. }
  515.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!