Hướng dẫn tạo Navigation Menu nổi trên WordPress

Bạn thấy rằng nhiều trang web phổ biến hiện nay đang sử dụng menu điều hướng nổi. Thông thường, các menu điều hướng được hiển thị trên đầu và sẽ mất khi người dùng cuộn chuột xuống. Các menu điều hướng nổi sẽ luôn hiển thị khi cuộn chuột xuống. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo một menu điều hướng nổi trong WordPress.

Phương pháp 1: Dùng plugin để thêm Menu điều hướng nổi

Phương pháp này rất dễ và khuyến nghị cho tất cả mọi người. Nếu bạn chưa thiết lập menu điều hướng, thì vui lòng xem hướng dẫn về cách thêm menu điều hướng trong WordPress.

Đầu tiên bạn cần cài đặt và kích hoạt Sticky Menu (or Anything!) trên plugin Scroll. Để biết thêm thông tin chi tiết, hãy xem hướng dẫn chi tiết về cách cài đặt plugin WordPress.

Sau khi kích hoạt, vào Settings » Sticky Menu (or Anything!) để cài đặt cấu hình plugin.

Trước tiên, bạn cần nhập ID CSS của menu điều hướng.

Tiếp đến bạn cần sử dụng tool để kiểm tra trình duyệt của bạn để tìm ID CSS.

Truy cập trang web của bạn và trỏ chuột vào menu điều hướng. Sau đó, bạn cần nhấp chuột phải và chọn Inspect từ menu Trình duyệt của bạn.

Thao tác này sẽ chia màn hình hiện tại của bạn thành hai phần và bạn sẽ có thể xem source code cho menu điều hướng của mình. Việc bạn cần làm là tìm một dòng code như bên dưới:

1 <nav id="site-navigation" class="main-navigation" role="navigation">

Trong ví dụ này, menu điều hướng của chúng tôi CSS ID là site-navigation.

Tiếp tục và nhập ID CSS trong cài đặt plugin như # site-navigation này.

Tiếp theo trên trang cài đặt plugin là xác định khoảng trắng giữa phần top màn hình và menu nổi. Bạn có thể sử dụng cài đặt này nếu menu của bạn lấp một số thứ mà bạn không muốn ẩn. Còn nếu không, bạn có thể bỏ qua cài đặt này.

Sau đó, bạn cần nhấp vào tích vào tùy chọn: ‘Check for Admin Bar’. Thao tác này sẽ thêm khoảng trắng cho thanh admin WordPress.

Tùy chọn tiếp theo trong phần cài đặt là cho phép bạn bỏ chọn menu điều hướng nếu người dùng truy cập vào trang web của bạn trên màn hình nhỏ như điện thoại chẩng hạn.

Bạn có thể kiểm tra giao diện của nó trên các thiết bị di động hoặc máy tính bảng. Nếu bạn không thích, thì bạn có thể thêm độ phân giải 780px cho tùy chọn này.

Đừng quên bấm vào nút save để lưu các thay đổi của bạn.

Bây giờ bạn truy cập trang web của bạn để xem menu điều hướng nổi hoạt động như thế nào.

Phương pháp 2: Thêm Menu điều hướng nổi theo cách thủ công

Với phương pháp này bạn sẽ thêm đoạn code CSS custom vào theme của mình. Nếu bạn đã thực hiện điều này trước đây, thì vui lòng xem bài hướng dẫn cách chèn custom Css vào trang WordPress.

Trước tiên, bạn vào Appearance » Customize để chạy theme customizer.

Click vào ’Additional CSS ở khung bên trái và sau đó chèn đoạn code CSS này.

1
2
3
4
5
6
7
8
9
10
11
12
13
#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 thế #site-navigation bằng ID CSS của menu điều hướng và nhấp vào button Save & Publish.

Bây giờ hãy truy cập vào trang web để xem menu điều hướng nổi của bạn hoạt động như thế nào.

Nếu menu điều hướng của bạn thường xuất hiện sau title trang web, thì đoạn code CSS dưới đây có thể lấp tiêu đề và tiêu đề trang web.

Bạn cũng có thể dễ dàng điều chỉnh bằng cách thêm một lề vào vùng tiêu đề của bạn bằng cách sử dụng đoạn code CSS như thế này:

1
2
3
.site-branding {
margin-top:60px;
}

Thay thế site-branding bằng class CSS trên header area.

Chúng tôi hy vọng bài viết này đã giúp bạn hiểu được cách thêm menu điều hướng nổi vào trang web WordPress của bạn. Bạn cũng có thể tham khảo danh sách 15 hướng dẫn xây dựng menu điều hướng trong WordPress.

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể thấy chúng tôi trênTwitter và Facebook.

Leave a Reply

Your email address will not be published. Required fields are marked *

+