API tools faq
paste
Advertisement
xpeed

Mega menu

xpeed
Apr 20th, 2018
115
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.33 KB | None | 0 0
raw download clone embed print report
  1. /**
  2.  *  Navigation Start
  3.  * -----------------------------------------------------------------------------
  4.  */
  5.  
  6. .site-navigation ul {
  7.     list-style: none;
  8.     margin: 0;
  9. }
  10.  
  11. .site-navigation li {
  12.     border-top: 1px solid rgb(236, 236, 236);
  13. }
  14.  
  15. .site-navigation ul ul {
  16.     margin-left: 20px;
  17. }
  18.  
  19. .site-navigation a {
  20.     color: #000;
  21.     display: block;
  22.     font-size: 14px;
  23. }
  24.  
  25. .site-navigation a:hover {
  26.     color: #1EB1E2;
  27.     background: #f9f9f9;
  28. }
  29.  
  30. .site-navigation .current_page_item > a,
  31. .site-navigation .current_page_ancestor > a,
  32. .site-navigation .current-menu-item > a,
  33. .site-navigation .current-menu-parent > a,
  34. .site-navigation .current-menu-ancestor > a {
  35.     color: #1EB1E2;
  36. }
  37. .sub-menu li a, .mega-menu li a {
  38.     font-size: 14px;
  39. }
  40.  
  41. /* Primary Navigation */
  42.  
  43. .primary-navigation {
  44.     -webkit-box-sizing: border-box;
  45.     -moz-box-sizing: border-box;
  46.     box-sizing: border-box;
  47.     font-size: 14px;
  48.     padding-top: 24px;
  49.     position: relative;
  50. }
  51. .primary-navigation i {
  52.     color: #585858;
  53. }
  54. .primary-navigation.toggled-on {
  55.     padding: 72px 10px 36px;
  56.     background-color: #fff;
  57.     z-index: 99999;
  58. }
  59.  
  60. .primary-navigation .nav-menu {
  61.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  62.     display: none;
  63. }
  64.  
  65. .primary-navigation.toggled-on .nav-menu {
  66.     display: block;
  67.  
  68. }
  69.  
  70. .primary-navigation a {
  71.     padding: 7px 0;
  72.     line-height: inherit;
  73.     display: block;
  74. }
  75.  
  76. .primary-navigation a:before {
  77.     font-family: 'FontAwesome';
  78.     font-style: normal;
  79.     position: relative;
  80.     font-size: 16px;
  81.     line-height: 0;
  82.     margin-right: 5px;
  83.     top: 1px;
  84.     font-weight: 100;
  85.     display: inline-block;
  86.     width: 1em;
  87.     text-align: center;
  88. }
  89.  
  90. /* Mega Menu */
  91.  
  92. @media screen and (max-width: 400px) {
  93.  
  94.     .primary-navigation .mega-nav {
  95.         display: none;
  96.     }
  97.  
  98. }
  99.  
  100. @media screen and (min-width: 401px) {
  101.  
  102.     .primary-navigation .mega-nav {
  103.         display: none;
  104.     }
  105.  
  106. }
  107.  
  108. @media screen and (min-width: 673px) {
  109.  
  110.     .primary-navigation .mega-nav li {
  111.         border-top: none;
  112.         border-bottom: none;
  113.     }
  114.  
  115.     .primary-navigation .mega-nav {
  116.         padding: 10px;
  117.     }
  118.  
  119.     .primary-navigation .mega-nav > li {
  120.         padding: 8px 21px;
  121.     }
  122.  
  123.     .primary-navigation .mega-nav {
  124.         display: block;
  125.     }
  126.  
  127. }
  128.  
  129. @media screen and (max-width: 782px) {
  130.     .primary-navigation p {
  131.         color: #1EB1E2;
  132.         margin: 7px 0;
  133.     }
  134.  
  135.     .primary-navigation a {
  136.         padding: 7px 0;
  137.     }
  138.  
  139.     .primary-navigation a:before {
  140.         display: inline-block;
  141.         width: 1em;
  142.         text-align: center;
  143.     }
  144. }
  145.  
  146. @media screen and (min-width: 783px) {
  147.  
  148.     .primary-navigation {
  149.  
  150.         padding: 0;
  151.     }
  152.  
  153.     .primary-navigation.toggled-on {
  154.         border-bottom: 0;
  155.         margin: 0;
  156.         padding: 0;
  157.     }
  158.  
  159.     .primary-navigation .menu-toggle {
  160.         display: none;
  161.         padding: 0;
  162.     }
  163.  
  164.     .primary-navigation .nav-menu {
  165.         border-bottom: 0;
  166.         display: block;
  167.     }
  168.  
  169.     .primary-navigation a {
  170.         padding: 0 12px;
  171.         white-space: nowrap;
  172.     }
  173.  
  174.     .primary-navigation a:before {
  175.         position: relative;
  176.         font-size: 16px;
  177.         line-height: 0;
  178.         margin-right: 9px;
  179.         top: 2px;
  180.         font-weight: 100;
  181.     }
  182.  
  183.     .primary-navigation ul ul a {
  184.         padding: 18px 10px 18px 17px;
  185.         white-space: normal;
  186.         width: 176px;
  187.     }
  188.  
  189.     .primary-navigation ul ul a:hover,
  190.     .primary-navigation ul ul li.focus > a {
  191.         background-color: #F5F5F5;
  192.     }
  193.  
  194.  
  195.     .primary-navigation .menu-item-has-children > a,
  196.     .primary-navigation .page_item_has_children > a {
  197.         padding-right: 26px;
  198.     }
  199.  
  200.     .primary-navigation .menu-item-has-children > a:after,
  201.     .primary-navigation .page_item_has_children > a:after {
  202.         -webkit-font-smoothing: antialiased;
  203.         content: "\f091";
  204.         display: inline-block;
  205.         font: normal 8px/1 Black Tie;
  206.         position: absolute;
  207.         right: 12px;
  208.         top: 22px;
  209.         vertical-align: text-bottom;
  210.     }
  211.  
  212.     .primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
  213.     .primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
  214.     .primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
  215.     .primary-navigation .page_item_has_children li.page_item_has_children > a:after {
  216.         content: "\f093";
  217.         right: 8px;
  218.         top: 20px;
  219.         font: normal 8px/1 Black Tie;
  220.     }
  221.  
  222.     .primary-navigation li .menu-item-has-children > a,
  223.     .primary-navigation li .page_item_has_children > a {
  224.         padding-right: 20px;
  225.         width: 168px;
  226.         /*color: #1EB1E2;*/
  227.     }
  228.  
  229.  
  230.  
  231.     .primary-navigation li:hover > a,
  232.     .primary-navigation li.focus > a {
  233.         background-color: #f9f9f9;
  234.         color: #1EB1E2;
  235.     }
  236.  
  237.     .primary-navigation li {
  238.         border: 0;
  239.         display: inline-block;
  240.         height: 48px;
  241.         line-height: 48px;
  242.         position: relative;
  243.     }
  244.  
  245.     .primary-navigation li li {
  246.         border: 0;
  247.         display: block;
  248.         height: auto;
  249.         line-height: 1.0909090909;
  250.     }
  251.  
  252.     .primary-navigation ul li:hover > ul,
  253.     .primary-navigation ul li.focus > ul {
  254.         left: auto;
  255.     }
  256.  
  257.     .primary-navigation ul ul li:hover > ul,
  258.     .primary-navigation ul ul li.focus > ul {
  259.         left: 100%;
  260.     }
  261.  
  262.     .primary-navigation ul ul {
  263.         background-color: #fff;
  264.         float: left;
  265.         margin: 0;
  266.         position: absolute;
  267.         top: 48px;
  268.         left: -999em;
  269.         z-index: 99999;
  270.  
  271.     }
  272.  
  273.     .primary-navigation ul ul ul {
  274.         left: -999em;
  275.         top: 0;
  276.     }
  277.  
  278.     .primary-navigation .mega-menu .menu-item {
  279.         float: none;
  280.     }
  281.  
  282.     .primary-navigation ul .mega-menu ul {
  283.         position: static;
  284.         float: none;
  285.     }
  286.  
  287.     .primary-navigation .menu-item-has-mega-menu {
  288.         position: relative;
  289.     }
  290.  
  291.     .primary-navigation .mega-menu {
  292.         display: none;
  293.         position: absolute;
  294.         right: -500px;
  295.         top: 100%;
  296.         background: #FFFFFF;
  297.         z-index: 10;
  298.         border: 1px solid #EDEDED;
  299.         border-top: 2px solid #1EB1E2;
  300.     }
  301.  
  302.     .primary-navigation .mega-menu ul {
  303.         background: none;
  304.     }
  305.  
  306.     .primary-navigation .mega-menu a {
  307.         padding: 0;
  308.         display: inline;
  309.         position: relative;
  310.         line-height: 22px;
  311.         text-transform: none;
  312.     }
  313.  
  314.     #masthead .primary-navigation .mega-menu .sub-menu .current-menu-item a {
  315.         font-weight: normal;
  316.         color: #3de132;
  317.     }
  318.  
  319.  
  320.     .primary-navigation .mega-menu p {
  321.         margin: 0 0 1em 0;
  322.     }
  323.  
  324.     .primary-navigation .mega-menu a:before {
  325.         top: -2px;
  326.         line-height: 22px;
  327.         text-decoration: none;
  328.     }
  329.  
  330.     .primary-navigation .mega-menu a:after {
  331.         display: none !important;
  332.     }
  333.  
  334.     .primary-navigation .mega-menu li,
  335.     .primary-navigation .mega-menu li:hover {
  336.         background: none;
  337.     }
  338.  
  339.     .primary-navigation .menu-item-has-mega-menu:hover .mega-menu {
  340.         display: block;
  341.     }
  342.  
  343.     .primary-navigation .mega-menu .menu-item {
  344.         color: #000;
  345.         text-transform: none;
  346.         font-size: 13px;
  347.         line-height: 20px;
  348.     }
  349.  
  350.     /* row */
  351.     .primary-navigation .mega-menu-row {
  352.         width: 100%;
  353.         display: table;
  354.         table-layout: fixed;
  355.         padding: 30px 0;
  356.     }
  357.  
  358.     .primary-navigation .mega-menu-row {
  359.         border-top: 1px solid #484848; /* overrides from settings / styling / mega-menu */
  360.     }
  361.  
  362.     .primary-navigation .mega-menu-row:first-child {
  363.         border-top: none;
  364.     }
  365.  
  366.     /* column */
  367.     .primary-navigation .mega-menu-col {
  368.         display: table-cell;
  369.         width: 1px;
  370.         padding: 0 30px;
  371.         border-left: 1px solid #1EB1E2; /* overrides from settings / styling / mega-menu */
  372.     }
  373.  
  374.     .primary-navigation .mega-menu-col:first-child {
  375.         border-left: none;
  376.     }
  377.  
  378.     .primary-navigation .mega-menu-col > a {
  379.         display: inline-block;
  380.         width: auto !important;
  381.         padding: 0 !important;
  382.         font-size: 19px;
  383.         margin-top: 5px;
  384.         margin-bottom: 14px;
  385.         text-transform: none;
  386.         color: #1EB1E2;
  387.     }
  388.  
  389.     .primary-navigation .mega-menu-col > a:before {
  390.         top: 2px;
  391.     }
  392.  
  393.     /* column sub-menus */
  394.     .primary-navigation .mega-menu-col .sub-menu .sub-menu {
  395.         padding-left: 27px;
  396.     }
  397.  
  398.     .primary-navigation .mega-menu-row .sub-menu-has-icons {
  399.         padding-left: 27px;
  400.     }
  401.  
  402.     .primary-navigation .mega-menu-row .menu-item-has-icon > p {
  403.         margin-left: -27px;
  404.     }
  405.  
  406.     .primary-navigation .mega-menu-row .sub-menu-has-icons a:before,
  407.     .primary-navigation .mega-menu-row > .menu-item-has-icon > a:before {
  408.         position: absolute;
  409.         left: -27px;
  410.         width: 18px;
  411.         text-align: center;
  412.         margin: 0;
  413.     }
  414.  
  415.     .primary-navigation .mega-menu-row > .menu-item-has-icon > a {
  416.         left: 27px;
  417.     }
  418.  
  419.     .primary-navigation .mega-menu li:hover a {
  420.         background: none;
  421.     }
  422.  
  423.     .primary-navigation .mega-menu-col p + .sub-menu {
  424.         margin-top: 12px;
  425.     }
  426.  
  427. }
  428. /* Secondary Navigation */
  429.  
  430. .secondary-navigation {
  431.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  432.     font-size: 12px;
  433.     margin: 48px 0;
  434. }
  435.  
  436. .secondary-navigation a {
  437.     padding: 9px 0;
  438. }
  439.  
  440. .secondary-navigation a.fa:before {
  441.     margin-right: 10px;
  442. }
  443.  
  444. .menu-toggle {
  445.     background-color: #000;
  446.     border-radius: 0;
  447.     cursor: pointer;
  448.     font-size: 0;
  449.     height: 48px;
  450.     margin: 0;
  451.     overflow: hidden;
  452.     padding: 0;
  453.     position: absolute;
  454.     top: 0;
  455.     right: 0;
  456.     text-align: center;
  457.     width: 48px;
  458. }
  459.  
  460. .menu-toggle:before {
  461.     color: #fff;
  462.     content: "\f0b5";
  463.     display: inline;
  464.     font: normal 8px/1 Black Tie;
  465.     margin-top: 16px;
  466.     font-size: 25px;
  467. }
  468.  
  469. .menu-toggle:active,
  470. .menu-toggle:focus,
  471. .menu-toggle:hover {
  472.     background-color: #444;
  473. }
  474.  
  475. .menu-toggle:focus {
  476.     outline: 1px dotted;
  477. }
  478.  
  479.  
  480. .fw-page-builder-content {
  481.     margin-left: -15px;
  482.     margin-right: -15px;
  483. }
  484.  
  485.  
  486. /**
  487.  *  Navigation End
  488.  * -----------------------------------------------
  489.  */
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!