Menu mobile mặc định của flatsome hơi trống và nhìn hơi khó chịu nhưng chỉ cần thêm logo ở trên cùng thì sẽ dễ nhìn hơn. Sau đây mình hướng dẫn bạn thêm vài dòng code vào function của theme để thêm logo tự động.
Link demo: https://banhang1.shoppingweb.vn/
Cách thêm logo cho menu mobile theme flatsome
Bước 1 : Vào Giao diện -> Theme File Editor -> Sau đó chọn function.php và nhập đoạn code sau
function show_logo_mobile() {
echo '<div class="logo-custom">';
get_template_part('template-parts/header/partials/element','logo');
echo '</div>';
?>
<style>
.mobile-sidebar .logo-custom img { width: 250px; }
.mobile-sidebar .logo-custom { display: flex; justify-content: center; padding-left: 0 !important; padding-top: 0; margin-top: 0; }
</style>
<?php
}
add_action('flatsome_before_sidebar_menu_elements','show_logo_mobile');Bước 2 : Nhấn save lại và xem kết quả, nếu logo cần căn chỉnh thì ở dòng css .mobile-sidebar .logo-custom bạn chỉnh lại theo cách sau
- justify-content : center ( Căn giữa )
- justify-content : left ( Căn trái )
- justify-content : right ( Căn phải )
Chúc các bạn thành công!
