CSS   110
rmp menu
Guest on 19th March 2023 12:32:02 AM


  1. /** This file is major component of this plugin so please don't try to edit here. */
  2. #rmp_menu_trigger-1518 {
  3.   width: 30px;
  4.   height: 30px;
  5.   position: absolute;
  6.   top: 8px;
  7.   border-radius: 5px;
  8.   display: none;
  9.   text-decoration: none;
  10.   right: 1%;
  11.   background: transparent;
  12.   transition: transform 0.5s, background-color 0.5s; }
  13.   #rmp_menu_trigger-1518 .rmp-trigger-box {
  14.     width: 25px;
  15.     color: #fff; }
  16.   #rmp_menu_trigger-1518 .rmp-trigger-icon-active, #rmp_menu_trigger-1518 .rmp-trigger-text-open {
  17.     display: none; }
  18.   #rmp_menu_trigger-1518.is-active .rmp-trigger-icon-active, #rmp_menu_trigger-1518.is-active .rmp-trigger-text-open {
  19.     display: inline; }
  20.   #rmp_menu_trigger-1518.is-active .rmp-trigger-icon-inactive, #rmp_menu_trigger-1518.is-active .rmp-trigger-text {
  21.     display: none; }
  22.   #rmp_menu_trigger-1518 .rmp-trigger-label {
  23.     color: #fff;
  24.     pointer-events: none;
  25.     line-height: 13px;
  26.     font-family: inherit;
  27.     font-size: 14px;
  28.     display: inline;
  29.     text-transform: inherit; }
  30.     #rmp_menu_trigger-1518 .rmp-trigger-label.rmp-trigger-label-top {
  31.       display: block;
  32.       margin-bottom: 12px; }
  33.     #rmp_menu_trigger-1518 .rmp-trigger-label.rmp-trigger-label-bottom {
  34.       display: block;
  35.       margin-top: 12px; }
  36.   #rmp_menu_trigger-1518 .responsive-menu-pro-inner {
  37.     display: block; }
  38.   #rmp_menu_trigger-1518 .responsive-menu-pro-inner, #rmp_menu_trigger-1518 .responsive-menu-pro-inner::before, #rmp_menu_trigger-1518 .responsive-menu-pro-inner::after {
  39.     width: 25px;
  40.     height: 3px;
  41.     background-color: #f37d27;
  42.     border-radius: 4px;
  43.     position: absolute; }
  44.   #rmp_menu_trigger-1518.is-active .responsive-menu-pro-inner, #rmp_menu_trigger-1518.is-active .responsive-menu-pro-inner::before, #rmp_menu_trigger-1518.is-active .responsive-menu-pro-inner::after {
  45.     background-color: #f37d27; }
  46.   #rmp_menu_trigger-1518:hover .responsive-menu-pro-inner, #rmp_menu_trigger-1518:hover .responsive-menu-pro-inner::before, #rmp_menu_trigger-1518:hover .responsive-menu-pro-inner::after {
  47.     background-color: #f37d27; }
  48.  
  49. /* Hamburger menu styling */
  50. @media screen and (max-width: 767px) {
  51.   #rmp_menu_trigger-1518 {
  52.     display: block; }
  53.   #rmp-container-1518 {
  54.     position: fixed;
  55.     top: 0;
  56.     margin: 0;
  57.     transition: transform 0.5s;
  58.     overflow: auto;
  59.     display: block;
  60.     width: 75%;
  61.     background-color: #f37d27;
  62.     background-image: url('');
  63.     height: 100%;
  64.     left: 0;
  65.     padding-top: 0px;
  66.     padding-left: 0px;
  67.     padding-bottom: 0px;
  68.     padding-right: 0px; }
  69.   #rmp-menu-wrap-1518 {
  70.     padding-top: 0px;
  71.     padding-left: 0px;
  72.     padding-bottom: 0px;
  73.     padding-right: 0px;
  74.     background-color: #f37d27; }
  75.     #rmp-menu-wrap-1518 .rmp-menu, #rmp-menu-wrap-1518 .rmp-submenu {
  76.       width: 100%;
  77.       box-sizing: border-box;
  78.       margin: 0;
  79.       padding: 0; }
  80.     #rmp-menu-wrap-1518 .rmp-submenu-depth-1 .rmp-menu-item-link {
  81.       padding-left: 10%; }
  82.     #rmp-menu-wrap-1518 .rmp-submenu-depth-2 .rmp-menu-item-link {
  83.       padding-left: 15%; }
  84.     #rmp-menu-wrap-1518 .rmp-submenu-depth-3 .rmp-menu-item-link {
  85.       padding-left: 20%; }
  86.     #rmp-menu-wrap-1518 .rmp-submenu-depth-4 .rmp-menu-item-link {
  87.       padding-left: 25%; }
  88.     #rmp-menu-wrap-1518 .rmp-submenu.rmp-submenu-open {
  89.       display: block; }
  90.     #rmp-menu-wrap-1518 .rmp-menu-item {
  91.       width: 100%;
  92.       list-style: none;
  93.       margin: 0; }
  94.     #rmp-menu-wrap-1518 .rmp-menu-item-link {
  95.       height: 40px;
  96.       line-height: 40px;
  97.       font-size: 15px;
  98.       border-bottom: 1px solid #ffffff;
  99.       font-family: inherit;
  100.       color: #ffffff;
  101.       text-align: left;
  102.       background-color: #f37d27;
  103.       font-weight: normal;
  104.       letter-spacing: 0px;
  105.       display: block;
  106.       width: 100%;
  107.       text-decoration: none;
  108.       position: relative;
  109.       overflow: hidden;
  110.       transition: background-color 0.5s, border-color 0.5s, 0.5s;
  111.       padding: 0 5%;
  112.       padding-right: 50px; }
  113.       #rmp-menu-wrap-1518 .rmp-menu-item-link:after, #rmp-menu-wrap-1518 .rmp-menu-item-link:before {
  114.         display: none; }
  115.       #rmp-menu-wrap-1518 .rmp-menu-item-link:hover {
  116.         color: #fff;
  117.         border-color: #ffffff;
  118.         background-color: #f29a5c; }
  119.       #rmp-menu-wrap-1518 .rmp-menu-item-link:focus {
  120.         outline: none;
  121.         border-color: unset;
  122.         box-shadow: unset; }
  123.       #rmp-menu-wrap-1518 .rmp-menu-item-link .rmp-font-icon {
  124.         height: 40px;
  125.         line-height: 40px;
  126.         margin-right: 10px;
  127.         font-size: 15px; }
  128.     #rmp-menu-wrap-1518 .rmp-menu-current-item .rmp-menu-item-link {
  129.       color: #fff;
  130.       border-color: #ffffff;
  131.       background-color: #f26400; }
  132.       #rmp-menu-wrap-1518 .rmp-menu-current-item .rmp-menu-item-link:hover {
  133.         color: #fff;
  134.         border-color: #ffffff;
  135.         background-color: #f29a5c; }
  136.     #rmp-menu-wrap-1518 .rmp-menu-subarrow {
  137.       position: absolute;
  138.       top: 0;
  139.       bottom: 0;
  140.       text-align: center;
  141.       overflow: hidden;
  142.       background-size: cover;
  143.       overflow: hidden;
  144.       right: 0;
  145.       border-left-style: solid;
  146.       border-left-color: #212121;
  147.       border-left-width: 1px;
  148.       height: 40px;
  149.       width: 40px;
  150.       color: #fff;
  151.       background-color: #212121; }
  152.       #rmp-menu-wrap-1518 .rmp-menu-subarrow:hover {
  153.         color: #fff;
  154.         border-color: #3f3f3f;
  155.         background-color: #3f3f3f; }
  156.       #rmp-menu-wrap-1518 .rmp-menu-subarrow .rmp-font-icon {
  157.         margin-right: unset; }
  158.       #rmp-menu-wrap-1518 .rmp-menu-subarrow * {
  159.         vertical-align: middle;
  160.         line-height: 40px; }
  161.     #rmp-menu-wrap-1518 .rmp-menu-subarrow-active {
  162.       display: block;
  163.       background-size: cover;
  164.       color: #fff;
  165.       border-color: #212121;
  166.       background-color: #212121; }
  167.       #rmp-menu-wrap-1518 .rmp-menu-subarrow-active:hover {
  168.         color: #fff;
  169.         border-color: #3f3f3f;
  170.         background-color: #3f3f3f; }
  171.     #rmp-menu-wrap-1518 .rmp-submenu {
  172.       display: none; }
  173.       #rmp-menu-wrap-1518 .rmp-submenu .rmp-menu-item-link {
  174.         height: px;
  175.         line-height: 40px;
  176.         letter-spacing: 0px;
  177.         font-size: 15px;
  178.         border-bottom: 1px solid #ffffff;
  179.         font-family: inherit;
  180.         color: #ffffff;
  181.         text-align: left;
  182.         background-color: #f37d27; }
  183.         #rmp-menu-wrap-1518 .rmp-submenu .rmp-menu-item-link:hover {
  184.           color: #fff;
  185.           border-color: #ffffff;
  186.           background-color: #f29a5c; }
  187.       #rmp-menu-wrap-1518 .rmp-submenu .rmp-menu-current-item .rmp-menu-item-link {
  188.         color: #fff;
  189.         border-color: #ffffff;
  190.         background-color: #f26400; }
  191.         #rmp-menu-wrap-1518 .rmp-submenu .rmp-menu-current-item .rmp-menu-item-link:hover {
  192.           color: #fff;
  193.           border-color: #ffffff;
  194.           background-color: #f29a5c; }
  195.       #rmp-menu-wrap-1518 .rmp-submenu .rmp-menu-subarrow {
  196.         right: 0;
  197.         border-right: unset;
  198.         border-left-style: solid;
  199.         border-left-color: #212121;
  200.         border-left-width: 1px;
  201.         height: 40px;
  202.         line-height: 40px;
  203.         width: 40px;
  204.         color: #fff;
  205.         background-color: #212121; }
  206.         #rmp-menu-wrap-1518 .rmp-submenu .rmp-menu-subarrow:hover {
  207.           color: #fff;
  208.           border-color: #3f3f3f;
  209.           background-color: #3f3f3f; }
  210.       #rmp-menu-wrap-1518 .rmp-submenu .rmp-menu-subarrow-active {
  211.         color: #fff;
  212.         border-color: #212121;
  213.         background-color: #212121; }
  214.         #rmp-menu-wrap-1518 .rmp-submenu .rmp-menu-subarrow-active:hover {
  215.           color: #fff;
  216.           border-color: #3f3f3f;
  217.           background-color: #3f3f3f; }
  218.     #rmp-menu-wrap-1518 .rmp-menu-item-description {
  219.       margin: 0;
  220.       padding: 5px 5%;
  221.       opacity: 0.8;
  222.       color: #ffffff; }
  223.   #rmp-search-box-1518 {
  224.     display: block;
  225.     padding-top: 0px;
  226.     padding-left: 5%;
  227.     padding-bottom: 0px;
  228.     padding-right: 5%; }
  229.     #rmp-search-box-1518 .rmp-search-form {
  230.       margin: 0; }
  231.     #rmp-search-box-1518 .rmp-search-box {
  232.       background: #fff;
  233.       border: 1px solid #dadada;
  234.       color: #333;
  235.       width: 100%;
  236.       padding: 0 5%;
  237.       border-radius: 30px;
  238.       height: 45px;
  239.       -webkit-appearance: none; }
  240.       #rmp-search-box-1518 .rmp-search-box::placeholder {
  241.         color: #C7C7CD; }
  242.       #rmp-search-box-1518 .rmp-search-box:focus {
  243.         background-color: #fff;
  244.         outline: 2px solid #dadada;
  245.         color: #333;
  246.         /** Menu Title Style */ }
  247.   #rmp-menu-title-1518 {
  248.     background-color: #212121;
  249.     color: #fff;
  250.     text-align: left;
  251.     font-size: 13px;
  252.     padding-top: 10%;
  253.     padding-left: 5%;
  254.     padding-bottom: 0%;
  255.     padding-right: 5%;
  256.     font-weight: 400;
  257.     transition: background-color 0.5s, border-color 0.5s, color 0.5s; }
  258.     #rmp-menu-title-1518:hover {
  259.       background-color: #212121;
  260.       color: #fff; }
  261.     #rmp-menu-title-1518 > a {
  262.       color: #fff;
  263.       width: 100%;
  264.       background-color: unset;
  265.       text-decoration: none; }
  266.       #rmp-menu-title-1518 > a:hover {
  267.         color: #fff; }
  268.     #rmp-menu-title-1518 .rmp-font-icon {
  269.       font-size: 13px; }
  270.     #rmp-menu-title-1518 .rmp-menu-title-image {
  271.       /** Menu Additional Content Style */ }
  272.   #rmp-menu-additional-content-1518 {
  273.     padding-top: 0px;
  274.     padding-left: 5%;
  275.     padding-bottom: 0px;
  276.     padding-right: 5%;
  277.     color: #fff;
  278.     text-align: center;
  279.     font-size: 16px; } }
  280. /**
  281.  This file contents common styling of menus.
  282.  */
  283. .rmp-container {
  284.   display: none;
  285.   visibility: visible;
  286.   padding: 0px 0px 0px 0px;
  287.   z-index: 99998;
  288.   transition: all 0.3s; }
  289.   .rmp-container.rmp-fade-top, .rmp-container.rmp-fade-left, .rmp-container.rmp-fade-right, .rmp-container.rmp-fade-bottom {
  290.     display: none; }
  291.   .rmp-container.rmp-slide-left, .rmp-container.rmp-push-left {
  292.     transform: translateX(-100%);
  293.     -ms-transform: translateX(-100%);
  294.     -webkit-transform: translateX(-100%);
  295.     -moz-transform: translateX(-100%); }
  296.   .rmp-container.rmp-slide-left.rmp-menu-open, .rmp-container.rmp-push-left.rmp-menu-open {
  297.     transform: translateX(0);
  298.     -ms-transform: translateX(0);
  299.     -webkit-transform: translateX(0);
  300.     -moz-transform: translateX(0); }
  301.   .rmp-container.rmp-slide-right, .rmp-container.rmp-push-right {
  302.     transform: translateX(100%);
  303.     -ms-transform: translateX(100%);
  304.     -webkit-transform: translateX(100%);
  305.     -moz-transform: translateX(100%); }
  306.   .rmp-container.rmp-slide-right.rmp-menu-open, .rmp-container.rmp-push-right.rmp-menu-open {
  307.     transform: translateX(0);
  308.     -ms-transform: translateX(0);
  309.     -webkit-transform: translateX(0);
  310.     -moz-transform: translateX(0); }
  311.   .rmp-container.rmp-slide-top, .rmp-container.rmp-push-top {
  312.     transform: translateY(-100%);
  313.     -ms-transform: translateY(-100%);
  314.     -webkit-transform: translateY(-100%);
  315.     -moz-transform: translateY(-100%); }
  316.   .rmp-container.rmp-slide-top.rmp-menu-open, .rmp-container.rmp-push-top.rmp-menu-open {
  317.     transform: translateY(0);
  318.     -ms-transform: translateY(0);
  319.     -webkit-transform: translateY(0);
  320.     -moz-transform: translateY(0); }
  321.   .rmp-container.rmp-slide-bottom, .rmp-container.rmp-push-bottom {
  322.     transform: translateY(100%);
  323.     -ms-transform: translateY(100%);
  324.     -webkit-transform: translateY(100%);
  325.     -moz-transform: translateY(100%); }
  326.   .rmp-container.rmp-slide-bottom.rmp-menu-open, .rmp-container.rmp-push-bottom.rmp-menu-open {
  327.     transform: translateX(0);
  328.     -ms-transform: translateX(0);
  329.     -webkit-transform: translateX(0);
  330.     -moz-transform: translateX(0);
  331.     /** Scrolling bar in menu setting box **/ }
  332.   .rmp-container::-webkit-scrollbar {
  333.     width: 0px; }
  334.   .rmp-container ::-webkit-scrollbar-track {
  335.     box-shadow: inset 0 0 5px transparent; }
  336.   .rmp-container ::-webkit-scrollbar-thumb {
  337.     background: transparent; }
  338.   .rmp-container ::-webkit-scrollbar-thumb:hover {
  339.     background: transparent; }
  340.   .rmp-container .rmp-menu-wrap .rmp-menu {
  341.     transition: none;
  342.     border-radius: 0;
  343.     box-shadow: none;
  344.     background: none;
  345.     border: 0;
  346.     bottom: auto;
  347.     box-sizing: border-box;
  348.     clip: auto;
  349.     color: #666;
  350.     display: block;
  351.     float: none;
  352.     font-family: inherit;
  353.     font-size: 14px;
  354.     height: auto;
  355.     left: auto;
  356.     line-height: 1.7;
  357.     list-style-type: none;
  358.     margin: 0;
  359.     min-height: auto;
  360.     max-height: none;
  361.     opacity: 1;
  362.     outline: none;
  363.     overflow: visible;
  364.     padding: 0;
  365.     position: relative;
  366.     pointer-events: auto;
  367.     right: auto;
  368.     text-align: left;
  369.     text-decoration: none;
  370.     text-indent: 0;
  371.     text-transform: none;
  372.     transform: none;
  373.     top: auto;
  374.     visibility: inherit;
  375.     width: auto;
  376.     word-wrap: break-word;
  377.     white-space: normal; }
  378.   .rmp-container .rmp-menu-additional-content {
  379.     display: block;
  380.     word-break: break-word; }
  381.   .rmp-container .rmp-menu-title {
  382.     display: flex;
  383.     flex-direction: column; }
  384.     .rmp-container .rmp-menu-title .rmp-menu-title-image {
  385.       max-width: 100%;
  386.       margin-bottom: 15px;
  387.       display: block;
  388.       margin: auto;
  389.       margin-bottom: 15px; }
  390.  
  391. button.rmp_menu_trigger {
  392.   z-index: 999999;
  393.   overflow: hidden;
  394.   outline: none;
  395.   border: 0;
  396.   display: none;
  397.   margin: 0;
  398.   transition: transform 0.5s, background-color 0.5s;
  399.   padding: 0; }
  400.   button.rmp_menu_trigger .responsive-menu-pro-inner::before, button.rmp_menu_trigger .responsive-menu-pro-inner::after {
  401.     content: "";
  402.     display: block; }
  403.   button.rmp_menu_trigger .responsive-menu-pro-inner::before {
  404.     top: 10px; }
  405.   button.rmp_menu_trigger .responsive-menu-pro-inner::after {
  406.     bottom: 10px; }
  407.   button.rmp_menu_trigger .rmp-trigger-box {
  408.     width: 40px;
  409.     display: inline-block;
  410.     position: relative;
  411.     pointer-events: none;
  412.     vertical-align: super; }
  413.  
  414. /*  Menu Trigger Boring Animation */
  415. .rmp-menu-trigger-boring .responsive-menu-pro-inner {
  416.   transition-property: none; }
  417.   .rmp-menu-trigger-boring .responsive-menu-pro-inner::after, .rmp-menu-trigger-boring .responsive-menu-pro-inner::before {
  418.     transition-property: none; }
  419. .rmp-menu-trigger-boring.is-active .responsive-menu-pro-inner {
  420.   transform: rotate(45deg); }
  421.   .rmp-menu-trigger-boring.is-active .responsive-menu-pro-inner:before {
  422.     top: 0;
  423.     opacity: 0; }
  424.   .rmp-menu-trigger-boring.is-active .responsive-menu-pro-inner:after {
  425.     bottom: 0;
  426.     transform: rotate(-90deg); }
Raw Paste

Login or Register to edit or fork this paste. It's free.