Admin bar and fixed header issue?

Question

Admin bar and fixed header issue?

Nick

2022年5月28日 11:11

I've styled my header to have a fixed top position. While logged in to wordpress, the wp admin nav bar covers the top section of my header making imposible to access my top navigation. I would like for the wp admin nav to push my top navigation below so both are visible. Does anyone know of any solution to fix this problem?

An example of my problem can be found at... www.nickriversdesign.com/dev

Topic admin-bar headers Wordpress

Category Web

Andrzej Misiewicz · Accepted Answer · 2022年5月28日 11:11

1

Andrzej Misiewicz answered at 2022年5月28日 11:11

I read all answers but didn't find that one:

Why not use wp function:

is_admin_bar_showing()

example header.php theme file

<nav class="nav-default" style="<?php echo is_admin_bar_showing() ? 'top: 32px' : ''; ?>">

AnDongNing · Accepted Answer · 2020年4月18日 12:03

1

AnDongNing answered at 2020年4月18日 12:03

This works as well

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

JanetE · Accepted Answer · 2019年10月29日 17:02

1

JanetE answered at 2019年10月29日 17:02

I just used this CSS.

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

Deepak Kumar · Accepted Answer · 2019年4月30日 07:31

1

Deepak Kumar answered at 2019年4月30日 07:31

give the top navbar

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

Andrii khmelovskyi · Accepted Answer · 2019年2月14日 08:36

1

Andrii khmelovskyi answered at 2019年2月14日 08:36

Try this, it is works fine

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

ykay says Reinstate Monica · Accepted Answer · 2016年12月14日 11:19

1

ykay says Reinstate Monica answered at 2016年12月14日 11:19

Try this for WordPress 4+. It checks if the admin bar is present and if so move the fixed header down a bit to compensate.

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

Ezzat Ali · Accepted Answer · 2015年12月16日 21:01

I believe, on devices with smaller widths, wpadminbar is not positioned fixed. So if you scroll the document in a smartphone, the admin bar will follow the scroll and will not stay at the top of the window. With keeping this in mind, why not add some javascript in the footer of your theme just after the wp_head() call. This way we can target the device width and whether or not the document has the adminbar. Then simply make some CSS rules and append it to the document head - like below!

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

Assuming your nav has a class 'main-navigation' and on scroll you add another class named 'fixed' to it. Change the CSS to target your navigation panel by replacing 'body.admin-bar .main-navigation.fixed' with howsoever you would want to target yours.

It can be further improved for example checking if the admin bar is fixed or not, but for now, I hope it will helps.

Brent · Accepted Answer · 2011年12月19日 23:05

Try adding this to your CSS file:

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

the body.admin-bardeclaration at the front will make sure that these styles only get applied when the admin bar is visible.

Zach Lysobey · Accepted Answer · 2011年12月19日 21:04

1

Zach Lysobey answered at 2011年12月19日 21:04

in your css you could try something like: body.logged-in{margin-top:20px;} or if this doesnt work some other code using the .logged-in class

Admin bar and fixed header issue?

About