วิธีทำ Sticky Mobile Footer Menu บนธีม Flatsome

Mobile Footer Menu คือ เมนูที่อยู่ในแถบด้านล่าง เมื่อเราเปิดเว็บบนโทรศัพท์มือถือ และไม่ว่าเราจะเลื่อนหน้าจอขึ้นหรือลง ชุดปุ่มเมนูนี้ ก็จะค้างอยู่ตำแหน่งด้านล่างเหมือนเดิม ไม่เลื่อนหายไป

ดูตัวอย่าง

แต่พวกเราต้องใช้ธีม flatsome เวอร์ชั่น 3.13 ขึ้นไปนะ สำหรับวิธีการสร้างมีขั้นตอนดังนี้

สร้าง UX Block สำหรับทำ Sticky Menu Flatsome

คัดลอกและวาง UX shortcode ลงบนเว็บ และกด publish เผยแพร่ให้เรียบร้อย

คัดลอก code

ผลลัพธ์ที่หลังบ้านเว็บก็จะเป็นแบบนี้

เปิดโหมด Builder เพื่อดูหน้าตา UX Block ที่เราได้สร้างไว้

คลิก preview ในโหมด mobile

จากนั้นเราอยากจะได้ logo เป็นรูปอะไร ก็ไล่เปลี่ยนเป็นรูปที่ต้องการได้เลย รวมถึงข้อความและลิงก์ต่างๆ ด้วย อยากใส่อะไรก็สามารถแก้ไขเองได้ทั้งหมดครับ

ใส่ code css เพื่อทำ Sticky Menu

ให้ไปที่ Flatsome > advanced > custom css >

คัดลอกโค้ด css ด้านล่างนี้ไปวางใส่ลงในช่อง all screens

คัดลอก code

กลับไป preview ดูการเปลี่ยนแปลงที่หน้า UX block

เราจะพบว่า พวกเมนู icon ที่เราสร้าง อยู่ตำแหน่งด้านล่างเรียบร้อยแล้ว

ตั้งค่า Sticky Menu ให้ปรากฏทุกหน้าบนเว็บของเรา

อันดับแรก ให้เราไปคัดลอก short code ชื่อ UX Block ที่เราสร้างไว้ก่อน

จากนั้นเอาไปวางที่ตำแหน่ง Footer

ไปที่ Flatsome > advanced > Footer scripts วาง short code ลงไป

เป็นอันเสร็จเรียบร้อย สำหรับการทำ Sticky Mobile Footer Menu ลองไปเปิดหน้าเว็บทดสอบดูนะ