13

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

9 Answers 9

11

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

1
  • 7
    This (incorrectly) affects all logged in users. Consider the answer by Brent instead. Commented Jul 17, 2012 at 11:06
29

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.

5
  • 1
    body.admin-bar is the correct selector (and this the correct answer). Zach L's answer affects all logged in users, but only logged in users with content editing permissions have the admin bar visible and need the header moved down the page. Commented Jul 17, 2012 at 11:06
  • interesting... I've never personally had a setup with any users without these permissions. I imagine its the same as if in the user settings they disable the admin bar. Commented Jul 17, 2012 at 15:43
  • 1
    Version note: .admin-bar is not longer appearing in WordPress 4. It's now called #wpadminbar and does not wrap the content, therefore the above cannot be applied to version 4+
    – Raptor
    Commented Feb 4, 2016 at 4:18
  • A SASS version is also available, together with explanation for mobiles/desktop resolutions (responsive websites) and mobile-first approach: sitepoint.com/getting-sticky-headers-wordpress-admin-bar-behave
    – Minister
    Commented Nov 4, 2018 at 11:55
  • How will this work once the user is scrolling down? Then the wp navigation bar will be stuck "almost at top of screen" which looks rather stupid
    – FooBar
    Commented Sep 26, 2019 at 14:15
2

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')
2
  • 1
    Please edit your answer, and add an explanation: why could that solve the problem?
    – fuxia
    Commented Dec 13, 2016 at 16:20
  • Changing '.site-header' to 'body' got this to work for me.
    – Kaji
    Commented Oct 9, 2017 at 23:33
2

This works as well

body.logged-in > header {  
    margin-top: 32px;  
}  
2
  • Please try to add a bit of an explanation - this will allow the OP and future users to learn and understand what's happening rather than just being a place where people get their code written for them. Thanks for answering. Commented Apr 18, 2020 at 17:37
  • The parent selector is not needed. body.logged-in header works fine. Commented Feb 2, 2022 at 6:44
2

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' : ''; ?>">
2
  • I was looking a while for adjusting the WordPress admin bar with the fixed-top navbar in Bootstrap 5. That was the best solution that worked like a charm for me without adding too much extra code. Thanks!
    – Mike Quade
    Commented Nov 17, 2023 at 12:14
  • In my case, I added position: relative instead of top: 32px to fix the problem.
    – Raptor
    Commented Jun 14 at 5:59
1

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.

0

I just used this CSS.

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

Try this, it is works fine

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

give the top navbar

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.