Elementor Sticky Header কী, কীভাবে কাজ করে এবং সঠিকভাবে কিভাবে তৈরি করবেন (Step-by-Step Guide)

ভূমিকা

আজকাল প্রায় সব modern ওয়েবসাইটেই আমরা একটা জিনিস দেখি—
স্ক্রল করলে উপরের header টা স্ক্রিনে লেগে থাকে, এবং অনেক সময় এর background color পরিবর্তন হয়ে যায়।

এটাই হলো Sticky Header।

কিন্তু Elementor-এ sticky header বানাতে গিয়ে অনেকেই সমস্যায় পড়ে,
বিশেষ করে যখন scroll করার পর header-এর color change করতে চায়।

এই ব্লগে আমরা খুব সহজ ভাষায় দেখবো:

• Sticky Header আসলে কী
• Elementor এটা কীভাবে কাজ করে
• কোথায় সাধারণত ভুল হয়
• এবং সঠিক উপায়ে কীভাবে sticky header তৈরি করতে হয়

Sticky Header আসলে কী?

Sticky Header হলো এমন একটি header—

• Page load হলে normal অবস্থায় থাকে
• User যখন নিচে scroll করে
• তখন header screen-এর উপরে লেগে থাকে

👉 এর ফলে user সবসময় menu, contact button বা CTA দেখতে পায়।

এটা:

• User experience ভালো করে
• Website-কে professional দেখায়
• Conversion বাড়াতে সাহায্য করে

👉 Normal Header vs Sticky Header comparison screenshot

Elementor-এ Sticky Header কীভাবে কাজ করে?

এখানে সবচেয়ে গুরুত্বপূর্ণ বিষয়টা বুঝতে হবে।

Elementor যখন কোনো header-কে sticky করে, তখন সে নতুন কোনো element তৈরি করে না।
বরং:

👉 একই header container-এর সাথে একটি extra class যোগ করে

এই class-টার নাম:

.elementor-sticky--effects

এটা কখন যোগ হয়?

যখন user Elementor-এ দেওয়া offset value পর্যন্ত scroll করে।

উদাহরণ:

• Offset = 70px
• User 70px scroll করল
• Elementor সাথে সাথে header-এ এই class যোগ করে

📸 (এখানে Image বসাও)
👉 Scroll করার সময় Inspect Element দেখানো, যেখানে .elementor-sticky--effects দেখা যাবে

Step 1: Header Container-এ Sticky Enable করা

প্রথমে তোমার Header Container select করো।

তারপর যাও:

Advanced → Motion Effects

এখানে সেট করো:

• Sticky: Top
• Offset: 70
• Devices: Desktop / Tablet / Mobile (যেটা দরকার)

👉 এই Offset-টাই নির্ধারণ করে দেয় কখন header sticky হবে।

👉 Elementor Motion Effects Sticky Settings

Step 2: Sticky Header-এর জন্য Custom CSS যোগ করা

এখন আসল কাজ।

Header Container select করা অবস্থায় যাও:

Advanced → Custom CSS

এখানে এই কোডটা বসাও 👇

selector {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

selector.elementor-sticky--effects {
  background-color: #e10600;
}

📸 (এখানে Image বসাও)
👉 Elementor Custom CSS panel with sticky code

এই কোড কীভাবে কাজ করছে? (সহজ ভাষায়)

• Page load হলে:
  • Header থাকবে transparent
• User যখন 70px scroll করবে:
  • Elementor header-এ .elementor-sticky--effects যোগ করবে
• CSS সেই class ধরেই:
  • Header-এর background color পরিবর্তন করবে

👉 এখানে JavaScript দরকার নেই
👉 সব কাজ Elementor নিজেই করে দেয়

সাধারণ যে ভুলগুলো হয় (এবং কেন কাজ করে না)

অনেক সময় মানুষ এই ভুলটা করে:

selector .elementor-sticky-effects {
  background-color: red;
}

এই কোড কাজ করে না কারণ:

• .elementor-sticky--effects কোনো child element না
• এটা same header element-এই যোগ হয়

তাই সঠিক selector হলো:

selector.elementor-sticky--effects

👉 এখানে space না থাকাটা খুব গুরুত্বপূর্ণ

Sticky Header কেন আপনার ওয়েবসাইটের জন্য গুরুত্বপূর্ণ?

✔️ Navigation সবসময় চোখের সামনে থাকে
✔️ User experience উন্নত হয়
✔️ CTA button সবসময় visible থাকে
✔️ Website-কে premium look দেয়

SEO-র দিক থেকেও:

• User engagement বাড়ে
• Bounce rate কমতে সাহায্য করে

উপসংহার

Elementor-এ Sticky Header বানানো কঠিন কিছু না,
কিন্তু ভেতরের কাজটা না বুঝলে সহজ জিনিসও কাজ করে না।

যদি তুমি:

• Offset Elementor-এ ঠিকভাবে দাও
• .elementor-sticky--effects class ঠিকভাবে ধরো
• এবং selector সঠিকভাবে লেখো

👉 তাহলে Sticky Header 100% কাজ করবে।