/* Theme Name: Raki Child Theme URI: https://raki.wpengine.com/ Description: Raki Child Theme Author: the WeDesignTech team Author URI: https://wedesignthemes.com/ Template: raki Version: 1.0.0 Text Domain: raki-child */ /** * Auto-hide / reveal sticky header * --------------------------------- * Pattern: header sits normally at the top of the page. Once the user * scrolls past a threshold it becomes fixed; scrolling further DOWN * slides it up out of view; scrolling UP slides it back in at a * shorter/compact height. * * Setup required in Elementor: * 1. Select your header Section/Container (the whole row). * 2. Advanced tab → CSS ID → enter: site-header * (no "#", just the plain id) */ :root { --site-header-transition-duration: 450ms; --site-header-ease: cubic-bezier(0.22, 1, 0.36, 1); /* smooth, no overshoot/snap */ } /* ========================================================== Anti-flash on page load Until the JS has measured the header and applied its first state (adds .sh-ready to ), the header is kept invisible — but still occupies its space, so the page never jumps. This stops the unstyled / left-aligned header from flashing while Elementor's own CSS and layout settle. The animation is a JS-independent failsafe: if the script never runs, the header is revealed after 2 seconds. ========================================================== */ html:not(.sh-ready) #site-header { visibility: hidden; animation: site-header-failsafe 0s linear 2s forwards; } @keyframes site-header-failsafe { to { visibility: visible; } } @keyframes site-header-fade-in { from { opacity: 0; } to { opacity: 1; } } #site-header { position: relative; width: 100%; z-index: 999; } /* Transitions are only enabled once the page is ready, so nothing animates during the initial load. */ html.sh-ready #site-header { transition: transform var(--site-header-transition-duration) var(--site-header-ease), padding-top var(--site-header-transition-duration) var(--site-header-ease), padding-bottom var(--site-header-transition-duration) var(--site-header-ease), box-shadow var(--site-header-transition-duration) var(--site-header-ease), background-color var(--site-header-transition-duration) var(--site-header-ease); animation: site-header-fade-in 250ms ease-out; will-change: transform; backface-visibility: hidden; /* avoids sub-pixel flicker during transform on some GPUs */ } /* Added by JS once the user has scrolled past the threshold — switches the row to fixed positioning so it can slide over the page content. left + right + width are all set so the row always spans the full viewport instead of shrinking to its content. */ #site-header.is-sticky { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); */ background-color: #ffffff; /* match your header's real background */ } /* Scrolling down: slide the whole row up and out of view. */ #site-header.is-sticky.is-hidden { transform: translateY(-100%); } /* Scrolling up: slide back in, shorter than the resting (top-of-page) height. Adjust these two values to roughly half your row's normal top/bottom padding as a starting point, then fine-tune. */ #site-header.is-sticky.is-compact { padding-top: 0px; padding-bottom: 0px; } /* Optional but recommended: shrink the logo specifically while compact, so the row visually reads as "smaller", not just less padded. Replace the selector with your actual logo widget's class if different — right-click the logo in the editor → Inspect to find it. */ #site-header .elementor-widget-theme-site-logo img, #site-header .elementor-widget-image img { /*max-height: 60px; your logo's normal height */ transition: max-height var(--site-header-transition-duration) var(--site-header-ease); } #site-header.is-sticky.is-compact .elementor-widget-theme-site-logo img, #site-header.is-sticky.is-compact .elementor-widget-image img { /*max-height: 38px; compact height while scrolling up */ } .productdesctext .wdt-heading-content-wrapper { text-align: justify; } .wdt-simple-style.wdt-post-entry .blog-entry .entry-title h4 { font-weight: 400; font-family:tajawal; } .wdt-simple-style.wdt-post-entry .blog-entry > div.entry-thumb, .wdt-simple-style.wdt-post-entry .blog-entry > div.entry-thumb img { border-radius: 20px; } #header-wrapper { margin: 0 0 0px; } ul.hfe-breadcrumbs { display: flex; flex-direction: row; } /* Mobile menu container ko left side align karne ke liye */ .mobile-menu { left: 0; right: auto; } /* Agar menu off-screen slide animations transform CSS se ho rahi hain */ .mobile-menu:not(.nav-is-visible) { transform: translateX(-100%); /* Right ki bajaye left ki taraf hide karega */ } .mobile-menu.nav-is-visible { transform: translateX(0); } /* Close button (X) ko left side par position karne ke liye */ .mobile-menu .close-nav { text-align: left; padding-left: 15px; }