هل كان هذا المقال مفيداً؟
شكرا على تعليقاتك!

فريق من المحررين المبدعين والمتخصصين، يعملون على إنتاج محتوى عالي الجودة، موثوق ومفيد، يلبي تطلعات جمهورنا العربي والعالمي. نحرص على تقديم مقالات شيقة ومعلومات دقيقة بأسلوب جذاب وسهل القراءة.
إذا كنت تستخدم قالب Astra الشهير في موقع ووردبريس، فربما لاحظت مشكلة مزعجة تحدث عند تحميل الصفحة:
وميض الشعار (Logo Flicker) أو اختفاءه لجزء من الثانية قبل أن يظهر بشكل طبيعي.
هذه المشكلة تحدث عادة أثناء الانتقال بين “الهيدر المخصص للموبايل” و”الهيدر الخاص بالكمبيوتر”، مما يؤدي إلى عرض لحظي غير مستقر لعناصر الهيدر، وخصوصًا الشعار.
تتمثل أسباب هذه المشكلة في:
هذه العوامل مجتمعة قد تؤدي إلى “وميض الشعار” أو ظهور شعارين بشكل خاطف قبل استقرار العرض النهائي.
بعد بحث وتجارب عديدة، تم التوصل إلى كود CSS بسيط وفعّال يعمل على إخفاء العناصر التي تسبب الوميض عند تحميل الصفحة، وبالتالي يمنع حدوث المشكلة نهائيًا.
@media screen and (min-width: 921px){
.ast-header-break-point .main-navigation {
display: none;
}
#ast-mobile-header {
display: none !important;
}
}
طريقة التركيب:
💡 ملاحظة: هذا الكود يخبر المتصفح بإخفاء الهيدر المخصص للموبايل والهيدر الخاص بوضع التحول (Break-point) عندما تكون الشاشة أكبر من 921px، أي على الشاشات المكتبية فقط. وهذا يمنع أي تبديل بصري مفاجئ بينها.
نعم. الكود لا يحذف أي عنصر، بل فقط يخفي العناصر غير الضرورية في الوضع المكتبي التي كانت تظهر لفترة قصيرة أثناء تحميل الصفحة. وهو يعمل ضمن حدود CSS فقط، دون أي تأثير على الأداء أو البنية.
هذا الحل تم الوصول إليه بفضل أحد المطورين المجهولين الذين شاركوا تجربتهم، فكل الشكر والتقدير له.
مشكلة وميض الشعار في قالب Astra مزعجة، لكنها قابلة للحل عبر هذا الكود البسيط.
إذا كنت تستخدم قالب Astra وتواجه هذه المشكلة، لا تتردد بتجربة هذا الحل الفوري لتقديم تجربة مستخدم أكثر احترافية لزوار موقعك.
فريق من المحررين المبدعين والمتخصصين، يعملون على إنتاج محتوى عالي الجودة، موثوق ومفيد، يلبي تطلعات جمهورنا العربي والعالمي. نحرص على تقديم مقالات شيقة ومعلومات دقيقة بأسلوب جذاب وسهل القراءة.