Wordpress Sticky navbar when the admin bar is present

Question

I used this sticky jQuery plugin in my site for the top navbar. jQuery Sticky

It works correctly, but when the WP admin bar is present that cover the top navbar. I tried to dependency the stickiness to the admin bar:

jQuery(document).ready(function($){                                                        
    if ( $("#wpadminbar").length ) {
                $("#navbar").sticky({topSpacing:"28px"}); 
                    } else { $("#navbar").sticky({topSpacing:0});
                           }                                   
                 });

but this is immediately stuck the navbar to the top not only when scrolling. I appreciate any assistance. Thanks

Answer 1

Can't just adjust navbar's margin-top?

I'm not using the Sticky plugin but I've a similar problem and the code below solve.

(function($) {
    'use strict';

    $(document).ready(function() {
        // if adminbar exist (should check for visible?) then add margin to our navbar
        var $wpAdminBar = $('#wpadminbar');
        if ($wpAdminBar.length) {
            $('div.navbar').css('margin-top',$wpAdminBar.height()+'px');
        }
    });
})(jQuery);

Answer 2

Here is my final script in my case. Maybe it is will helpful for someone else.

jQuery(document).ready(function($){                                                             
        var $wpAdminBar = $('#wpadminbar');
        if ($wpAdminBar.length) {
        $("div.navbar").sticky({topSpacing:$wpAdminBar.height()});
        } else {
        $("div.navbar").sticky({topSpacing:0});
    }       
}); 

Answer 3

I think it's less complicated than you're making it. if a person is logged in, you can test the body element for the "logged-in" class. Unless I'm missing something obvious, this works for me.

if($("body").hasClass("logged-in")) {
    $("#site-navigation").sticky({topSpacing: 28, className: "stickyNav"});
} else {
    $("#site-navigation").sticky({topSpacing: 0, className: "stickyNav"});
}

Answer 4

/* This is Fix CSS for WP Admin Bar */
@media screen and ( min-width: 601px ) {
    .logged-in.admin-bar #navbar-default.affix-top { margin-top: 31px !important; }
    .logged-in.admin-bar #navbar-default.affix { margin-top: 32px !important; }
    body.logged-in .navbar-default.affix{ top:32px }
    .navbar-default.affix{ width:100%;top:0px;z-index:999;border-radius:0;border:none }
}
@media screen and ( max-width: 782px ) and ( min-width: 601px ) {
    .logged-in.admin-bar #navbar-default.affix-top { margin-top: 0px !important; }
    .logged-in.admin-bar #navbar-default.affix { margin-top: 46px !important; }
    .logged-in.admin-bar #xs-phone { margin-top: 45px !important; }
}
@media screen and ( max-width: 600px ) {
    .logged-in.admin-bar #xs-phone { padding-top: 45px !important; }
    .navbar-default.affix{position: relative !important;}
}

and add in functions.php

add_action('get_header', 'remove_admin_login_header');
function remove_admin_login_header() {
    remove_action('wp_head', '_admin_bar_bump_cb');
}

Answer 5

Just change the "28px" to 28, and it works for me, or you can use this:

(function ($) {
  $(document).ready(function(){
    if ($("#wpadminbar").length) {
        $("#sticker-sticky").sticky({topSpacing:28});
    }else {
        $("#sticker-sticky").sticky({topSpacing:0});
    }
  });
})(jQuery);

Answer 6

You can disable the admin bar from showing

add_filter('show_admin_bar', '__return_false');

Answer 7

Shortest format that works:

jQuery(document).ready(function ($) {
        
    var $navbar = $("#masthead");
    var $wpAdminBar = $('#wpadminbar');
        
    $navbar.sticky({topSpacing:  $wpAdminBar.length? $wpAdminBar.height() : 0 });
    
});