Bilah admin dan masalah tajuk yang diperbaiki?

9

Saya telah menetapkan tajuk untuk memiliki posisi teratas tetap. Saat masuk ke wordpress, bilah admin np wp mencakup bagian atas tajuk saya sehingga tidak mungkin untuk mengakses navigasi teratas saya. Saya ingin admin wp untuk mendorong navigasi teratas saya di bawah sehingga keduanya terlihat. Adakah yang tahu solusi untuk memperbaiki masalah ini?

Contoh masalah saya dapat ditemukan di ... www.nickriversdesign.com/dev

headers admin-bar Nick
sumber

Jawaban:

8

di css Anda, Anda bisa mencoba sesuatu seperti: body.logged-in{margin-top:20px;}atau jika ini tidak bekerja kode lain menggunakan .logged-inkelas

Zach Lysobey
sumber
6
Ini (salah) mempengaruhi semua pengguna yang masuk. Pertimbangkan jawabannya oleh Brent sebagai gantinya.
Chris Burgess
22

Coba tambahkan ini ke file CSS Anda: 

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

yang body.admin-bardeklarasi di depan akan memastikan bahwa gaya ini hanya bisa diterapkan ketika admin bar terlihat.

Brent
sumber
1
body.admin-bar adalah pemilih yang benar (dan ini jawaban yang benar). Jawaban Zach L memengaruhi semua pengguna yang masuk, tetapi hanya pengguna yang masuk dengan izin pengeditan konten yang memiliki bilah admin yang terlihat dan perlu tajuk dipindahkan ke bawah halaman.
Chris Burgess
menarik ... Saya tidak pernah secara pribadi melakukan pengaturan dengan pengguna mana pun tanpa izin ini. Saya membayangkan itu sama seperti jika dalam pengaturan pengguna mereka menonaktifkan bar admin.
Zach Lysobey
Catatan versi: .admin-bartidak lagi muncul di WordPress 4. Sekarang disebut #wpadminbardan tidak membungkus konten, oleh karena itu di atas tidak dapat diterapkan untuk versi 4+
Raptor
Versi SASS juga tersedia, bersama dengan penjelasan untuk resolusi ponsel / desktop (situs web responsif) dan pendekatan mobile-first: sitepoint.com/getting-sticky-headers-wordpress-admin-bar-behave
Minister
Bagaimana cara kerjanya setelah pengguna menggulir ke bawah? Kemudian bilah navigasi wp akan macet "hampir di atas layar" yang terlihat agak bodoh
FooBar
1

Saya percaya, pada perangkat dengan lebar lebih kecil, wpadminbar tidak diposisikan tetap. Jadi, jika Anda menggulir dokumen di telepon pintar, bilah admin akan mengikuti gulungan itu dan tidak akan tinggal di bagian atas jendela. Dengan mengingat hal ini, mengapa tidak menambahkan beberapa javascript di footer tema Anda tepat setelah wp_head()panggilan. Dengan cara ini kita dapat menargetkan lebar perangkat dan apakah dokumen tersebut memiliki adminbar atau tidak. Maka cukup buat beberapa aturan CSS dan tambahkan ke kepala dokumen - seperti di bawah ini!

<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>

Dengan asumsi nav Anda memiliki kelas 'main-navigation'dan pada gulir Anda menambahkan kelas lain yang dinamai 'fixed'. Ubah CSS untuk menargetkan panel navigasi Anda dengan mengganti 'body.admin-bar .main-navigation.fixed'dengan apa pun yang Anda inginkan untuk menargetkan Anda.

Ini dapat ditingkatkan lebih lanjut misalnya memeriksa apakah admin bar sudah diperbaiki atau tidak, tetapi untuk sekarang, saya harap ini akan membantu.

Ezzat Ali
sumber
1

Coba ini untuk WordPress 4+. Ia memeriksa apakah bilah admin ada dan jika demikian gerakkan tajuk tetap sedikit ke bawah untuk mengkompensasi.

    //fix for admin bar
    if ($('#wpadminbar')[0])
        $('.site-header').css('top', '32px')
Ya kata Reinstate Monica
sumber
1
Harap edit jawaban Anda , dan tambahkan penjelasan: mengapa itu bisa menyelesaikan masalah?
fuxia
Mengubah '.site-header' menjadi 'body' membuat ini berhasil bagi saya.
Kaji
1

Ini juga berfungsi

body.logged-in > header {  
    margin-top: 32px;  
}
AnDongNing
sumber
Silakan coba tambahkan sedikit penjelasan - ini akan memungkinkan OP dan pengguna masa depan untuk belajar dan memahami apa yang terjadi daripada hanya menjadi tempat di mana orang mendapatkan kode mereka ditulis untuk mereka. Terimakasih telah menjawab.
Tony Djukic
0

Saya hanya menggunakan CSS ini.

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

Coba ini, ini berfungsi dengan baik

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

berikan navbar atas 

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