CSS   177

mobile-menu.css

Guest on 20th July 2021 03:57:09 PM

  1. .responsive-menu-wrap {
  2.         display: none;
  3. }
  4. .mobile-menu-toggle {
  5.         background:#fff;
  6.         color: #000;
  7.         font-size: 16px;
  8.         font-weight: 400;
  9.         text-align: center;
  10.         position: relative;
  11.         z-index: 100;
  12.         height:48px;
  13.         height:100px;
  14. }
  15. .logo-mobile img {
  16.         height:20px;
  17.         position: relative;
  18.         top:16px;
  19. }
  20. .mobile-menu-icon {
  21.         position:absolute;
  22.         float:right;
  23.         left: 5px;
  24.   top: 20px;
  25.         height:48px;
  26.         width:48px;
  27.         line-height: 48px;
  28.         text-align: center;
  29.         cursor: pointer;
  30.         background:#303030;
  31.         color:#fff;
  32. }
  33. .mobile-menu-icon {
  34.         font-size: 18px;
  35. }
  36. .responsive-mobile-menu {
  37.         background:#303030;
  38.         color:#000;
  39.         width:280px;
  40.         padding-bottom: 50px;
  41.         position: fixed;
  42.         left:-280px;
  43.         top:0;
  44.         float:left;
  45.         z-index: 999;
  46.     -webkit-transition: all 0.3s ease;
  47.     -moz-transition: all 0.3s ease;
  48.     transition: all 0.3s ease;
  49.     overflow-y:scroll;
  50.     height:100%;
  51. }
  52. .responsive-mobile-menu .mobile-menu {
  53.         padding:10px 20px 60px;
  54. }
  55. .responsive-mobile-menu #s {
  56.         margin:5px;
  57. }
  58. .responsive-mobile-menu #searchform {
  59.         padding: 25px 0 0 35px;
  60. }
  61. .responsive-mobile-menu #searchform i {
  62.         color:#fff;
  63. }
  64. .responsive-mobile-menu #searchform input {
  65.     width: 150px;
  66.         text-indent: 20px;
  67.         background:#fff;
  68.         color:#000;
  69.         font-weight: 400;
  70.         font-size:11px;
  71. }
  72. .responsive-mobile-menu #searchbutton {
  73.  
  74. }
  75. .responsive-mobile-menu ul li a {
  76.         padding-bottom:15px;
  77. }
  78. .responsive-mobile-menu ul li a {
  79.         font-size:16px;
  80.         color:#fff;
  81.         font-weight: bold;
  82.         letter-spacing: 0;
  83.         display:block;
  84.         padding: 1px 20px;
  85.         margin-top:10px;
  86. }
  87. .responsive-mobile-menu ul li ul.children-depth-0 a {
  88.         font-size:12px;
  89.         font-weight: normal;
  90.         margin-top:0;
  91.         padding:2px 20px;
  92.         color:#a6a6a6;
  93.         background:none;
  94. }
  95. .responsive-mobile-menu li.menu-item-has-children a {
  96.         font-weight: bold;
  97. }
  98. .responsive-mobile-menu ul.sub-menu li a {
  99.         font-size:12px;
  100.         color:#a6a6a6;
  101.         letter-spacing: 0;
  102.         font-weight: 400;
  103.         display:block;
  104.         margin-top:0;
  105.         border-top:0;
  106.         padding-top:4px;
  107. }
  108. .responsive-mobile-menu .megamenu-textbox {
  109.         font-size:11px;
  110.         line-height:20px;
  111.         color:#eee;
  112.         padding: 2px 20px 20px 20px;
  113. }
  114. .responsive-mobile-menu h6 {
  115.         color:#fff;
  116.         padding:0 0 10px 20px;
  117.         margin:0;
  118.         font-size:14px;
  119.         margin-top:20px;
  120. }
  121. .responsive-mobile-menu ul.sub-menu {
  122. }
  123. .responsive-mobile-menu li {
  124.         display:block;
  125. }
  126. .responsive-mobile-menu ul li a:hover,
  127. .responsive-mobile-menu li.menu-item-has-children a:hover {
  128.         color:#fff;
  129. }

Raw Paste


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