Thanh quản trị và vấn đề tiêu đề cố định?

Tôi đã tạo kiểu cho tiêu đề của mình để có một vị trí trên cùng cố định. Trong khi đăng nhập vào wordpress, thanh điều hướng quản trị wp bao gồm phần trên cùng của tiêu đề khiến tôi không thể truy cập điều hướng hàng đầu của mình. Tôi muốn điều hướng quản trị wp đẩy điều hướng hàng đầu của tôi bên dưới để cả hai đều hiển thị. Có ai biết giải pháp nào để khắc phục vấn đề này không?

Một ví dụ về vấn đề của tôi có thể được tìm thấy tại ... www.nickriversdesign.com/dev

trong css của bạn, bạn có thể thử một cái gì đó như: body.logged-in{margin-top:20px;}hoặc nếu điều này không hoạt động một số mã khác bằng cách sử dụng .logged-inlớp

Hãy thử thêm nó vào tệp CSS của bạn:

body.admin-bar #branding-wrap{top: 28px;} 
body.admin-bar #wrapper{margin-top: 145px;}

các body.admin-bartuyên bố ở phía trước sẽ đảm bảo rằng những phong cách chỉ nhận được áp dụng khi thanh quản trị có thể nhìn thấy.

Tôi tin rằng, trên các thiết bị có chiều rộng nhỏ hơn, wpadminbar không được định vị cố định. Vì vậy, nếu bạn cuộn tài liệu trong điện thoại thông minh, thanh quản trị sẽ theo cuộn và sẽ không ở trên cùng của cửa sổ. Hãy ghi nhớ điều này, tại sao không thêm một số javascript vào phần chân trang của chủ đề của bạn ngay sau wp_head()cuộc gọi. Bằng cách này, chúng tôi có thể nhắm mục tiêu chiều rộng của thiết bị và liệu tài liệu có thanh quản trị hay không. Sau đó, chỉ cần tạo một số quy tắc CSS và nối nó vào đầu tài liệu - như bên dưới!

<script>
( function(e) {
    var ab = document.getElementById( 'wpadminbar' );
    if ( typeof( ab ) === 'object' && window.innerWidth >= 610 ) {
        var abh = ab.offsetHeight || ab.clientHeight || ab.scrollHeight;
        var style = document.createElement( 'style' );
        style.id = 'adminbar_main_nav_controle_rules';
        document.getElementsByTagName( 'head' )[0].appendChild( style );
        var rules = document.createTextNode( 'body.admin-bar .main-navigation.fixed { margin-top: ' + abh + 'px !important; }' );
        style.appendChild( rules );
        console.debug( 'wpadmibar space is covered' );
    }
})();
</script>

Giả sử điều hướng của bạn có một lớp 'main-navigation'và trên cuộn bạn thêm một lớp khác được đặt tên 'fixed'cho nó. Thay đổi CSS để nhắm mục tiêu bảng điều hướng của bạn bằng cách thay thế 'body.admin-bar .main-navigation.fixed'bằng bất kỳ cách nào bạn muốn nhắm mục tiêu của bạn.

Nó có thể được cải thiện hơn nữa, ví dụ kiểm tra xem thanh quản trị có được sửa hay không, nhưng bây giờ, tôi hy vọng nó sẽ giúp ích.

Hãy thử điều này cho WordPress 4+. Nó kiểm tra xem thanh quản trị có mặt hay không và nếu vậy hãy di chuyển tiêu đề cố định xuống một chút để bù lại.

    //fix for admin bar
    if ($('#wpadminbar')[0])
        $('.site-header').css('top', '32px')

Điều này cũng làm việc

body.logged-in > header {  
    margin-top: 32px;  
}  

Tôi chỉ sử dụng CSS này.

body.admin-bar #main-header  {
padding-top: 32px }

Hãy thử nó, nó hoạt động tốt

$(document).ready(function() {
    if ($('#wpadminbar')[0]) {
        $('header').css('top', '32px')
    }
});

cung cấp cho thanh điều hướng hàng đầu

.navbar-fixed-top {
    border-width: 0 0 1px;
    padding: 0;
    position: relative!
}