แก้ไขเมนูการนำทางที่ตอบสนองของคุณใน Divi

การสร้างเมนูการนำทางที่ตอบสนองได้ดีบนทุกขนาดหน้าจออาจเป็นเรื่องยาก ฉันหวังว่ามันจะไม่สำคัญขนาดนั้น แต่เนื่องจากการนำทางมักจะอยู่ที่ด้านบนสุดของทุกหน้าของไซต์ของคุณ จึงเป็นสิ่งที่มองเห็นได้เป็นอันดับแรกในทุกหน้า ดังนั้นจึงเป็นสิ่งสำคัญที่จะทำให้ถูกต้อง โชคดีที่เครื่องมือปรับแต่งธีมของ Divi ให้คุณปรับแต่งเมนูหลักด้วยตัวเลือกส่วนหัวที่ยอดเยี่ยม แต่สำหรับรูปแบบเมนูเริ่มต้นที่มีโลโก้ทางด้านซ้ายและลิงก์ของเมนูทางด้านขวา สิ่งต่างๆ สามารถสลับไปมาได้อย่างง่ายดายในขนาดหน้าจอที่เล็กกว่า โดยเฉพาะอย่างยิ่งเมื่อคุณมีลิงก์มากเกินไปในส่วนหัว ฉันรู้ว่ามันเกิดขึ้นมากมายสำหรับฉัน ฉันได้เมนูที่เหมาะสมกับเดสก์ท็อป จากนั้นคุณตรวจสอบบนแท็บเล็ต (โดยเฉพาะ iPad Pro) และโลโก้ซ้อนทับกับเมนูและลิงก์บางส่วนก็กระโดดลงไปหนึ่งบรรทัด

วันนี้ฉันจะนำเสนอวิธีแก้ปัญหาที่เป็นประโยชน์สำหรับเมนูการนำทางที่แออัดเหล่านั้น เพื่อให้ดูดีแม้ในขนาดหน้าจอที่ไม่ธรรมดา อย่างน้อยก็สำหรับผู้ใช้บางคน ความน่าเชื่อถือของเว็บไซต์ของคุณก็ขึ้นอยู่กับมัน

มาเริ่มกันเลย.

แก้ไขเมนูการนำทางที่ตอบสนองของคุณใน Divi

สมัครสมาชิกช่อง Youtube ของเรา

สี่โซลูชั่นสำหรับเมนูการนำทางที่แออัด

สิ่งที่ยอดเยี่ยมอย่างหนึ่งเกี่ยวกับ Divi คือมันสร้างขึ้นจากเค้าโครงกริดแบบไหลที่ใช้คิวรีสื่อ (Css แบบแบ่งส่วน) เพื่อปรับสไตล์ไซต์ของคุณสำหรับขนาดหน้าจอต่างๆ จุดที่ทำการปรับเปลี่ยนเหล่านี้คือสิ่งที่เราเรียกว่าเบรกพอยต์ หากคุณมุ่งมั่นที่จะปรับปรุงเมนูการนำทางหลักของคุณบนทุกขนาดหน้าจอ มีโอกาสที่คุณจะต้องใช้ปรับแต่งเมนูของคุณโดยใช้การสืบค้นสื่อและปรับจุดพักบางจุด

ปัญหา

ปัญหาที่พบบ่อยที่สุดที่ฉันพบเมื่อใช้เมนูการนำทางเริ่มต้นของ Divi คือเมื่อลูกค้าต้องการรายการเมนูระดับบนสุดจำนวนมาก การมีรายการเมนูมากกว่า 5 รายการ (หรือมีรายการเมนูที่มีขนาดตัวอักษรขนาดใหญ่) บนเมนูการนำทางหลัก มักจะสร้างตัวแบ่งบรรทัดและโลโก้ที่ขยายใหญ่ขึ้นเมื่อขนาดหน้าจอถึงความกว้างระหว่าง 980-1100 พิกเซล (ขนาดของแล็ปท็อปขนาดเล็ก และเม็ดใหญ่) ฉันมั่นใจว่าคุณเคยประสบปัญหานี้มาก่อน แม้ว่าคุณจะไม่เคยสังเกตเห็นก็ตาม ดูเหมือนว่านี้:

ไม่เหมาะ ลองดูวิธีแก้ปัญหาสี่ข้อนี้

โซลูชัน # 1: ทำให้แถบเมนูเต็มความกว้าง

โดยปกติ ฉันจะไม่แนะนำให้ทำเมนูนำทางของคุณเต็มความกว้าง เว้นแต่ว่าฉันจะทำให้ส่วนที่เหลือของไซต์ของฉันเต็มความกว้างด้วย ฉันคิดว่าความสม่ำเสมอในการออกแบบเป็นสิ่งสำคัญ แต่บางครั้งก็เป็นการประนีประนอมที่ดีหากเมนูการนำทางของคุณดูดีในทุกอุปกรณ์ และมันก็เป็นการแก้ไขที่ง่ายเช่นกัน

ไปที่ Theme Customizer > Header & Navigation > Primary Menu Bar แล้วเลือก Make Full Width

โซลูชัน # 2: ปรับการตั้งค่าโลโก้และแบบอักษร

วิธีแก้ปัญหาง่ายๆ อีกวิธีหนึ่งสำหรับปัญหาของคุณคือการใช้การตั้งค่าตัวปรับแต่งธีมเพื่อปรับตัวเลือกความสูงสูงสุดของโลโก้ ขนาดข้อความ หรือแบบอักษรเริ่มต้น

โปรดใช้ความระมัดระวังในการปรับตัวเลือกเหล่านี้ เนื่องจากคุณไม่ต้องการรวมการออกแบบและความสามารถในการอ่านของโลโก้หรือรายการเมนูของคุณเพื่อแก้ไขได้ง่าย

โซลูชัน #3: การแสดงเมนูมือถือที่เบรกพอยต์ใหม่

ต่อไปนี้คือช่วงทั่วไปสำหรับเบรกพอยต์แต่ละจุดภายใน Divi:

เดสก์ท็อปขนาดใหญ่: 1405px ขึ้นไป
เดสก์ท็อปมาตรฐาน: ระหว่าง 1100px ถึง 1405px
แล็ปท็อปและแท็บเล็ตขนาดใหญ่: ระหว่าง 980px ถึง 1100px
แท็บเล็ต: ระหว่าง 768px ถึง 980px
สมาร์ทโฟนและแท็บเล็ตขนาดเล็ก: ระหว่าง 320px ถึง 768px;
สมาร์ทโฟน: ระหว่าง 320px ถึง 480px;

เบรกพอยต์ที่เมนูการนำทางเริ่มต้นเปลี่ยนเป็นเมนูมือถือ (พร้อมการนำทางแฮมเบอร์เกอร์) คือ 980px ขนาดหน้าจอที่น้อยกว่า 980px จะแสดงเมนูมือถือ

แต่ถ้าคุณต้องการหลีกเลี่ยงตัวแบ่งบรรทัดเมนูแปลก ๆ ให้เปลี่ยนเบรกพอยต์เป็นค่าอื่น สมมติว่าคุณต้องการแสดงเมนูมือถือที่ประมาณ 1024px แทนที่จะเป็น 980px ในการดำเนินการนี้ คุณจะต้องแทรก CSS ที่กำหนดเองลงในคิวรี่สื่อเพื่อแทนที่สไตล์เริ่มต้นใน Divi

ไปที่ Theme Customizer > CSS เพิ่มเติม แล้วป้อนข้อมูลต่อไปนี้:

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

แบบสอบถามสื่อนี้ทำสองสิ่ง มันซ่อนเมนูปกติและแสดงเมนูมือถือที่เบรกพอยต์ 1024px

โซลูชัน #4: การปรับรูปแบบเมนูที่จุดพักบางส่วน

วิธีแก้ปัญหานี้น่าจะเป็นตัวเลือกที่ดีที่สุดเพราะช่วยให้คุณสามารถควบคุมเมนูของคุณได้มากที่สุด ณ จุดพักบางจุด คุณสามารถกำหนดเป้าหมายรายการเมนูของคุณโดยใช้คลาส css เพื่อสร้างสไตล์แบบกำหนดเองในคิวรี่สื่อของคุณ

นี่คือ CSS เริ่มต้นของ Divi สำหรับรายการเมนูของคุณ:

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

สมมติว่าคุณต้องการให้ขนาดแบบอักษรของเมนูของคุณเป็น 18px โดยค่าเริ่มต้น แต่คุณต้องการให้เปลี่ยนเป็น 14px ที่จุดพักบางจุด และเพื่อประหยัดพื้นที่มากขึ้นไปอีก คุณสามารถลดช่องว่างภายในเป็น 15px แทนที่จะเป็น 22px คุณสามารถทำได้โดยกำหนดเป้าหมายคลาส css สำหรับรายการเมนูทั้งหมดและสร้างแบบสอบถามสื่อ

ไปที่เครื่องมือ ปรับแต่งธีม > CSS เพิ่มเติม แล้วป้อนข้อมูลต่อไปนี้:

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

สิ่งที่ CSS นี้ทำคือเปลี่ยนขนาดแบบอักษรเป็น 14px และช่องว่างภายในด้านขวาเป็น 15px บนหน้าจอขนาด 1200px หรือต่ำกว่า การทำเช่นนี้จะสร้างการเปลี่ยนแปลงที่ราบรื่นเมื่อปรับขนาดหน้าจอบนเดสก์ท็อป และช่วยให้คุณสามารถใช้การนำทางเริ่มต้นบนแท็บเล็ตขนาดใหญ่และแล็ปท็อปขนาดเล็กได้

การปรับรูปแบบส่วนหัวอื่นๆ

มีห้าสไตล์ส่วนหัวให้เลือกภายในเครื่องมือปรับแต่งธีมของ Divi (ไม่นับการนำทางในแนวตั้ง) รูปแบบทั้งห้า ได้แก่ ค่าเริ่มต้น (รูปแบบที่กล่าวถึงแล้วในโพสต์นี้) สไลด์อิน แบบเต็มหน้าจอ กึ่งกลาง และโลโก้อินไลน์กึ่งกลาง

เลื่อนเข้าและรูปแบบเต็มหน้าจอ

หากคุณกำลังออกแบบเว็บไซต์ต้องใช้รูปแบบสไลด์หรือแบบเต็มหน้าจอ เมนูตอบสนองของคุณนั้นค่อนข้างจะเข้าใจผิดได้ เนื่องจากไอคอนแฮมเบอร์เกอร์การนำทางบนมือถือนั้นใช้เพื่อเรียกเมนูบนหน้าจอทุกขนาด

สไตล์ตรงกลาง

หากคุณใช้รูปแบบที่อยู่ตรงกลาง คุณจะมีพื้นที่มากขึ้นสำหรับรายการเมนูที่จะหายใจ แต่ถ้าคุณยังต้องการพื้นที่เพิ่ม คุณสามารถใช้โซลูชันแบบกำหนดเองแบบเดียวกับที่เราใช้สำหรับรูปแบบเริ่มต้นเพื่อให้มีลักษณะตามที่คุณต้องการ

รูปแบบโลโก้อินไลน์ตรงกลาง

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

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

สังเกตว่าโลโก้อยู่กึ่งกลางเล็กน้อยในเมนูเมื่อเปรียบเทียบกับโลโก้ที่อยู่ตรงกลางในส่วนหัว

ตอนนี้ฉันกำลังจะย่อป้ายรายการเมนู "องค์ประกอบข้อมูล" เป็น "ข้อมูล" คราวนี้มาดูว่าโลโก้ขยับไปอยู่ตรงกลางมากขึ้นได้อย่างไร

การแก้ปัญหานี้อาจเป็นสิ่งที่คุณต้องการเพื่อให้ได้โลโก้ในที่ที่คุณต้องการ คุณอาจหลีกเลี่ยงการเปลี่ยนแปลงบางอย่างเช่น “เกี่ยวกับเรา” เป็น “เกี่ยวกับ” หรือในทางกลับกันเพื่อทำการปรับเปลี่ยนเล็กน้อยเหล่านั้น

แต่สิ่งนี้อาจทำให้คุณหงุดหงิดเล็กน้อยหากคุณเป็นคนชอบความสมบูรณ์แบบ (ฉันสามารถมีช่วงเวลาของตัวเองได้ เชื่อฉันสิ) ดังนั้น มีระดับการปรับแต่งที่ลึกซึ้งยิ่งขึ้นที่คุณสามารถทำได้หากคุณต้องการปรับเปลี่ยนเพิ่มเติม แทนที่จะปรับข้อความจริงในรายการเมนูเพื่อปรับจุดกึ่งกลางของโลโก้ คุณสามารถเพิ่มคลาส css ที่กำหนดเองให้กับรายการใดก็ได้ และใส่ช่องว่างภายในบางส่วนไว้ทางด้านขวาหรือซ้าย สิ่งนี้จะทำให้คุณได้สะกิดครั้งสุดท้ายที่คุณต้องการเพื่อให้ทุกอย่างอยู่ตรงกลาง

จากแดชบอร์ด wordpress ไปที่ ลักษณะที่ปรากฏ > เมนู และตรวจสอบให้แน่ใจว่าคุณได้เลือกคลาส CSS ไว้ในพื้นที่ตัวเลือกหน้าจอ

จากนั้นสลับเปิดรายการเมนูที่คุณต้องการกำหนดเป้าหมาย จากนั้นป้อนคลาส CSS ลงในช่องอินพุต CSS Classes ฉันเรียกฉันว่า "เขยิบ"

หลังจากนั้นไปที่ Divi > Theme Customizer > CSS เพิ่มเติม และเพิ่ม CSS ที่กำหนดเองต่อไปนี้:

#top-menu li.nudge  {
padding-right: 32px;
}

ด้วย css นี้ เฉพาะรายการที่มีคลาส "เขยิบ" เท่านั้นที่จะได้รับช่องว่างภายใน 32px; ที่ดันโลโก้ให้อยู่ตรงกลางพอดี

แค่นั้นแหละ!

ปิดความคิด

Divi ทำให้การสร้างเว็บไซต์เป็นเรื่องสนุกและง่ายดาย แต่บางครั้ง ความต้องการของงาน (และลูกค้าของเรา) ทำให้เราต้องพยายามอย่างเต็มที่เพื่อให้แน่ใจว่าเว็บไซต์ของเราเป็นตัวเอก และสิ่งที่แยกไซต์ที่ดีออกจากไซต์ที่ยอดเยี่ยมก็คือรายละเอียดเล็กๆ น้อยๆ วิธีการทำงานของเมนูการนำทางที่ตอบสนองเป็นหนึ่งในรายละเอียดสำคัญที่คุณต้องการแก้ไข โดยส่วนใหญ่จะเป็นสิ่งแรกที่ผู้ใช้ของคุณจะเห็นและมีส่วนร่วมกับทุกหน้าในไซต์ของคุณ เมนูที่ดูพังอาจสร้างความประทับใจแรกพบที่ไม่ดี ฉันหวังว่าโพสต์นี้จะช่วย "ดัน" คุณไปในทิศทางที่ถูกต้อง (ขออภัยที่ช่วยตัวเองไม่ได้ :))

ฉันแน่ใจว่ามีปัญหาและวิธีแก้ไขเพิ่มเติมที่ฉันไม่ได้กล่าวถึงในโพสต์นี้ อย่าลังเลที่จะโพสต์ในความคิดเห็น ฉันหวังว่าจะได้ยินจากคุณ.

ไชโย!