/*======================================
Theme Name:SIGNMAKER MAIN CHILD THEME
Theme URI: https://www.signmaker.com.mx
Description: SIGNMAKER CHILD THEME
Author: Dale
Author URI:  https://www.signmaker.com.mx/
Author Email:  info@signmaker.com.mx
Template: Divi
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

 /* ===== NOTES ==================================================================
 * 
 * 
 * =============================================================================== */

/*add your custom CSS below this line*/


/*Mega Menu*/

  /* ============================================================
   1. MEGA MENU CONTAINER
   - Handles visibility, positioning, and fade effects.
   - Ensure your Section has the class: dm-mega-menu
============================================================ */
.dm-mega-menu {
    /* Hides the menu by default on the live site */
    display: none !important;
    opacity: 0 !important;
    
    /* FADE SPEED: Adjust '100ms' to change how fast the menu appears */
    transition: opacity 100ms ease !important;
    
    /* Positioning: Floats the menu over page content */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* Shows the menu when the JavaScript triggers the hover state */
.dm-mega-menu.show {
    display: block !important;
    opacity: 1 !important;
}

/* ============================================================
   2. LAYOUT & ALIGNMENT
   - Centers the content row within the full-width menu.
============================================================ */
.dm-mega-menu .inner-mm {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   3. ANIMATION SETUP (INITIAL STATE)
   - Prepares the columns to slide up by hiding them 
     and pushing them down 30px.
============================================================ */
.dm-mega-menu .inner-mm .left-column,
.dm-mega-menu .inner-mm .top-1,
.dm-mega-menu .inner-mm .top-2,
.dm-mega-menu .inner-mm .top-3,
.dm-mega-menu .inner-mm .bottom-1,
.dm-mega-menu .inner-mm .bottom-2,
.dm-mega-menu .inner-mm .bottom-3 {
    opacity: 0;
    transform: translateY(30px);
}

/* ============================================================
   4. ANIMATION TIMING (STAGGER EFFECT)
   - Defines the upward slide duration (600ms).
   - Adds delays to specific columns to create a wave effect.
============================================================ */

/* Left Column - Appears immediately */
.dm-mega-menu.show .inner-mm .left-column {
    animation: slideUp 600ms ease forwards;
    animation-delay: 0ms;
}

/* Top Row - Staggered delays */
.dm-mega-menu.show .inner-mm .top-1 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 100ms;
}
.dm-mega-menu.show .inner-mm .top-2 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 200ms;
}
.dm-mega-menu.show .inner-mm .top-3 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 300ms;
}

/* Bottom Row - Staggered delays */
.dm-mega-menu.show .inner-mm .bottom-1 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 400ms;
}
.dm-mega-menu.show .inner-mm .bottom-2 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 500ms;
}
.dm-mega-menu.show .inner-mm .bottom-3 {
    animation: slideUp 600ms ease forwards;
    animation-delay: 600ms;
}

/* The Motion Keyframes */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   5. VISUAL BUILDER VISIBILITY
   - Ensures the menu and its contents are fully visible
     while editing in the Divi Visual Builder.
============================================================ */
body.et-fb .dm-mega-menu, 
body.et-pb-preview .dm-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important; 
    top: auto !important;
    z-index: auto !important;
}

/* Resets column transparency/position for editing */
body.et-fb .dm-mega-menu .inner-mm .left-column,
body.et-fb .dm-mega-menu .inner-mm .top-1,
body.et-fb .dm-mega-menu .inner-mm .top-2,
body.et-fb .dm-mega-menu .inner-mm .top-3,
body.et-fb .dm-mega-menu .inner-mm .bottom-1,
body.et-fb .dm-mega-menu .inner-mm .bottom-2,
body.et-fb .dm-mega-menu .inner-mm .bottom-3 {
    opacity: 1 !important;
    transform: none !important;
}

/*End Mega Menu*/




Code:Log In or Sign Up to view this code



/*change hamburger icon to x when mobile menu is open*/

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}


/*adjust the new toggle element which is added via jQuery*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}


/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}


/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}


/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}


/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}


/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #000f54;
	background: #f0f3f6;
	border-radius: 50%;
	padding: 3px;
}


/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}


/*add point on top of the menu submenu dropdown*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}


/*adjust the position of the hamburger menu*/

.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 10px;
	line-height: 0;
}


/*force the background color and add a rounded border*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}


/* Make parent item clickable

.et_mobile_menu .menu-item-has-children .sub-menu{
display: none !important;
}

.pa-block{
display: block !important;
height: fit-content !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding: 5% !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}

.et_mobile_menu .menu-item-has-children .pa-submenu{
display: block !important;
}

.opened .et_mobile_menu{
height: fit-content !important;
padding: 5% !important;
}


ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
    	    text-align: right;
    	    width: 100%;
    }

/* Make scrollable
/*make the Divi mobile dropdown menu scrollable*/

.et_mobile_menu {
overflow: scroll !important;
max-height: 80vh;
}