Css For Mobile Menu
Mon Aug 18 2025 03:31:25 GMT+0000 (Coordinated Universal Time)
Saved by @quanganh141220 #wordpress #divi #menumobile
<style> /* menu open */ body{ overflow-x: hidden; } body.open-menu{ overflow: hidden; } #header-main{ transition: all 0.5s; } .scroll-web #header-main { background-color: #1B101D !important; top: 20px; } #menu-menu-header .menu-item.menu-item-has-children { margin-top: 0; padding: 0 25px; } #menu-menu-header .menu-item.menu-item-has-children > a { display: flex; align-items: center; gap: 10px; padding: 0; } #menu-menu-header .menu-item.menu-item-has-children > a:first-child:after { content: ""; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNC4xNjc5NyA0Ljk0OTIyTDAgMC43ODEyNUwwLjczMDQ2OSAwLjA1MDc4MTJMMS4wOTU3IDAuNDE2MDE2TDQuMTY3OTcgMy41MDk3N0w3LjYwNTQ3IDAuMDcyMjY1Nkw4LjMzNTk0IDAuNzgxMjVMNC4xNjc5NyA0Ljk0OTIyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==); width: 8.336px; height: 4.898px; position: unset; display: block; } .menu-icon { width: 50px; height: 50px; background: #f15a29; display: flex; justify-content: center; align-items: center; cursor: pointer; flex-direction: column; transition: background 0.3s ease; } .menu-icon:hover { background: #27b4b2; } .menu-icon span { display: block; width: 30px; height: 2px; background: white; margin: 2.5px 0; transition: width 0.3s ease; } .menu-icon:hover span:nth-child(2) { width: 16px; } @media(min-width: 981px){ #menu-open{ display: none !important; } } #menu-mobile-section{ opacity: 0; visibility: hidden; transition: all 0.5s; } #menu-mobile-section.active { opacity: 1 !important; visibility: visible !important; z-index: 1000 !important; } #menu-mobile-section #menu-box { transition: all 0.5s; } #menu-mobile-section.active #menu-box { right: 0; } .header-menu-custom{ height: calc(100% - 30px); overflow: scroll; scrollbar-width: none; -ms-overflow-style: none; } .header-menu-custom::-webkit-scrollbar{ display: none; } .header-menu-custom .menu { list-style: none; padding: 0; } #menu-mobile-section .header-menu-custom .sub-menu { list-style: none; padding: 0 0 0 20px !important; display: none; } #menu-mobile-section .header-menu-custom .et-show-dropdown ul.sub-menu { display: block; } #menu-mobile-section .header-menu-custom .menu a { color: #323D62; font-family: Figtree; font-size: 18px; font-style: normal; font-weight: 500; line-height: 1.35; letter-spacing: 0.24px; padding: 10px; width: 100%; display: block; position: relative; } #menu-mobile-section .header-menu-custom .menu .sub-menu a { font-size: 16px; line-height: 1.2; padding: 8px 0; } #menu-mobile-section .header-menu-custom .menu .menu-item-has-children > a:after { content: ""; width: 12px; height: 12px; position: absolute; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNC4xNjc5NyA0Ljk0OTIyTDAgMC43ODEyNUwwLjczMDQ2OSAwLjA1MDc4MTJMMS4wOTU3IDAuNDE2MDE2TDQuMTY3OTcgMy41MDk3N0w3LjYwNTQ3IDAuMDcyMjY1Nkw4LjMzNTk0IDAuNzgxMjVMNC4xNjc5NyA0Ljk0OTIyWiIgZmlsbD0iIzFCMTAxRCIvPgo8L3N2Zz4K); background-repeat: no-repeat; background-position: center; background-size: contain; top: 50%; transform: translateY(-50%); right: 0; transition: all 0.3s; } #menu-mobile-section .header-menu-custom .menu .menu-item-has-children.et-hover > a:after{ transform: translateY(-50%) rotate(180deg); } .close-button { width: 30px; height: 30px; padding: 5px; position: relative; cursor: pointer; margin: 0 0 0 auto; background: #ED5D2C; } .close-button span { position: absolute; width: 2px; height: 60%; background-color: #ffffff; top: 50%; left: 50%; transform-origin: center; transition: all 0.3s; } .close-button:hover{ background: #32B4B8; } .close-button .line1 { transform: translate(-50%, -50%) rotate(45deg); } .close-button .line2 { transform: translate(-50%, -50%) rotate(-45deg); } @media(min-width: 982px){ .menu-icon.menu-open { display: none; } } @media(min-width: 767px){ #menu-mobile-section.active #menu-box { width: 80%; max-width: 520px; } } @media(max-width: 767px){ .menu-icon { width: 40px; height: 40px; } } @media(max-width: 520px){ #menu-mobile-section.active #menu-box { width: 100%; } .menu-icon { width: 40px; height: 40px; } } </style>
Comments