Chắc bạn đã nhìn thấy hình thức menu này ở vô số website hiện nay đúng không nào?
Menu sẽ cố định khi khách ghé thăm site cuộn xuống phía dưới màn hình. Hình thức này giúp cho khách dễ dàng di chuyển website của bạn. Họ không còn mất thời gian để cuộn lên đầu trang để nhìn thấy menu và di chuyển sang phần khác của site.
Đang xem: Cố định menu khi cuộn trang
Bạn đang xem: Cố định menu khi cuộn trang
Bạn cũng muốn cố định menu trên website của bạn?
Bạn sẽ học được kỹ thuật này trong bài viết hôm nay
Cách cố định menu khi cuộn trang trong WordPress?
Bây giờ bạn cần cài đặt và kích hoạt plugin Sticky Menu (or Anything!) on Scroll. Tên plugin dài loằng ngoằng nhưng nó làm việc rất tốt. Mình không gặp lỗi gì khi cố định menu.
Ngay khi plugin được kích hoạt, bạn sẽ đi tới Settings -> Sticky Menu (or Anything!) để cấu hình plugin.
Click vào mũi tên để bắt đầu tìm ra cái đoạn code HTML của menutrên trang web:
Như vậy phần tùy chọn Sticky Element chúng ta đã giải quyết xong. Đến đây là menu của bạn đã được cố định khi cuộn xuống rồi đấy.
Ngoài ra bạn để ý thấy có một vài tùy chọn khác của plugin. Các tùy chọn này đều được giải thích rõ ràng do vậy bạn sẽ không gặp nhiều khó khăn để hiểu chúng.
Nếu bạn không thích dùng plugin có thể bổ sung đoạn code CSS sau:
#site-navigation {background:#fff;height:60px;z-index:170;margin:0 auto;border-bottom:1px solid #dadada;width:100%;position:fixed;top:0;left:0;right:0;text-align: center;}
Thay giá trị #site-navigation bằng CSS ID của bạn. CSS ID là giá trị bạn xác định ở bước trên.
Nếu menu cố định có hiện tượng đè lên phần tiêu đề và header thì bổ sung thêm không gian so với phần top của trang bằng bằng đoạn code sau:
.site-branding {margin-top:60px;}
Với bài viết này, bạn đã biết cách cố định menu khi cuộn trang.
Nếu bạn có vấn đề với việc cố định menu, hãy để lại câu hỏi ở bên dưới.
Đừng quên click like fanpage để ủng hộ blog.
Danh mục Thủ Thuật WordPress Điều hướng bài viếtCách thêm nút mua ngay trong website WordPress bán hàngĐánh giá plugin WP Mega Menu: cách tạo mega menu đẹp mắt
Label Tên* Email* WebSite URL Label Tên* Email* WebSite URL 20 Comments newest oldest Inline FeedbacksView all comments Oc1ober Tháng Ba 5, 2021 8:30 chiều
Muốn áp dụng cả cho mobile thì sửa hay tạo Code như thế nào bạn?
Reply Hoa Tháng Một 8, 2021 11:09 sáng Anh ơi xem giúp em trang: https://xenangtaygiare.vn/ nhé!
Reply Dung Tháng Một 4, 2020 6:54 chiều Cho mình hỏi chút, mình dùng Flasome, mình muốn cố định chỉ thanh submenu thôi, thử bao nhiêu cách cũng chưa biết làm, nhờ anh giúp đỡ. Web http://thietbipanasonic.vn
Reply Author Nguyễn Văn Thịnh Tháng Một 5, 2020 7:28 sáng Reply to Dung ý bạn là cái phần menu bên trong danh mục sản phẩm phải không. Cố định cái này mình ít thấy vì nó chiếm không gian theo chiều dọc nên chắc theme không hỗ trợ. Mình không dùng theme này nhiều nên không rõ bạn có thử hỏi tác giả theme nếu mua bản quyền hoặc vào các group wordpress hỏi xem vì ở đó có dân code.
Reply Bien hieu van phong Tháng Chín 11, 2019 11:40 chiều mình đã làm và thanh công cảm ơn admin
Reply thietbinanghungviet Tháng Năm 25, 2019 10:56 sáng Em đã cài mà không được. Ad xem giúp Em nhé. Tks adhttps://thietbinanghungviet.com/
Reply thietbinanghungviet Tháng Năm 25, 2019 10:56 sáng Reply to thietbinanghungviet Em cài plugin nhé
Reply phannhon Tháng Ba 4, 2019 7:37 chiều sao mình cài xong nó cũng di chuyển nhưng nó đang nằm ngang nó nhảy xuống dọc xác lề trái
Reply Author Nguyễn Văn Thịnh Tháng Ba 4, 2019 7:53 chiều Reply to phannhon mình thấy mấy cái này còn phụ thuộc vào theme vì động chạm đến code nên theme này thì ăn có khi theme khác vẫn lỗi. Hay nhất vẫn là có theme hỗ trợ sẵn tính năng này thì tốt.
Reply hoàng sơn Tháng Năm 29, 2018 5:26 chiều web mình chỉ có class thôi ko có id thì làm ntn
Reply Hồi nguyễn Tháng Ba 20, 2018 9:13 chiều bạn tìm giúp mình cái css id trang web kinhphunano.com với. Mình ko tìm dc. thanks bạn
Reply Author Nguyễn Văn Thịnh Tháng Ba 21, 2018 8:07 sáng Reply to Hồi nguyễn theme của bạn chỉ có css class nên bạn thay đổi code css class với trường hợp của bạn bạn có thể thử .sitenav
Reply khanh30125 Tháng Hai 25, 2018 3:04 chiều e làm trên theme metro magazine, trên menu em có chèn icon vào nhưng e lm theo thì cái menu nó trong suốt
Reply Author Nguyễn Văn Thịnh Tháng Hai 25, 2018 3:09 chiều Reply to khanh30125 nói chung cái này chủ yếu là do css bạn nghiên cứu thêm css cho phù hợp với theme của mình xem sao.
Reply Hiếu Tháng Hai 9, 2018 12:37 chiều Cảm ơn bạn, đang cần gấp
Reply Tho Nguyen Tháng Mười Hai 26, 2017 12:31 chiều Bài viết rất dễ hiểu. Thanks bạn.
Reply Author Nguyễn Văn Thịnh Tháng Mười Hai 26, 2017 1:39 chiều Reply to Tho Nguyen Thanks bạn ghé thăm blog của mình
Reply kua Tháng Chín 9, 2017 8:27 chiều cám ơn sếp mình làm được rồi !!!
Reply Author Nguyễn Văn Thịnh Tháng Chín 9, 2017 8:40 chiều Reply to kua chúc mừng bạn
Reply
Bình luận gần đây
VPS giá rẻ
Dành cho người mới
1. WordPress/SharedHost
Học WordPress căn bản
Học tạo website với bán hàng với Woocomerce
Sử dụng cPanel
Cách lập website cho newbie
Sử dụng FTP cho newbie
2. VPS
Học cách sử dụng VPS
Cách cài đặt máy chủ A2Hosting
Cách cài đặt máy chủ Digital Ocean
Cách cài đặt máy chủ Linode
Cách cài đặt máy chủ Vultr
Đừng quên những ưu đãi này
Elegant Theme: giảm 20% cho gói thành viên một năm
A2Hosting: shared host giảm 51%. Xem đánh giá.
HawkHost: mã giảm tới 40%. Xem ở đây.
Linode VPS: Tặng 20$ cho khách hàng mới. Xem ở đây.
DigitalOcean VPS: Tặng 10$ cho khách hàng mới. Xem ở đây.
Vultr VPS: Tặng 103$ cho khách hàng mới. Xem ở đây.
Tham khảo
SharedHost nước ngoài nên dùng
VPS nước ngoài giá rẻ chất lượng
Địa chỉ mua Theme WordPress tốt nhất
Công cụ nghiên cứ từ khóa tốt nhất
Địa chỉ mua tên miền tốt nhất