• Hi everyone, I’m building a WordPress website for a client and i just notice an empty space before the site header, i’ve tried all i know on CSS but the empty space won’t go, i traced the file and found it inside (wp-includes/admin-bar.php) after modification, the empty space still show on the site frontend if a user is logged in.
    Below are the default code, Please i need some help anybody know how to modify this function?
    /**
    * Default admin bar callback.
    *
    * @since 3.1.0
    */
    function _admin_bar_bump_cb() { ?>
    <style type=”text/css” media=”screen”>
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
    html { margin-top: 46px !important; }
    * html body { margin-top: 46px !important; }
    }
    </style>
    <?php
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • The admin bar shows only when logged in – You can hide it via CSS or hide it completely by adding this snippet to the theme’s functions.php

    show_admin_bar( false ); //set to false to hide admin bar all together

    Thread Starter igwejoshua

    (@igwejoshua)

    Thank you so much @jaycbrf for the support i really appreciate, I would like to Edit it via CSS, something like this (1) html { margin-top: 10px !important; }, * html body { margin-top: 10px !important; }, and (2) @media screen and ( max-width: 782px ) {
    html { margin-top: 20px !important; } * html body { margin-top: 20px !important; }
    } .

    I have tried the above CSS code into the themes options on WordPress admin but it didn’t work, Please is there any other way to do this or any other CSS code?

    Not sure how that will affect your problem without seeing site. If there is a fixed top nav or other positioned elements it may ruin the layout.

    Thread Starter igwejoshua

    (@igwejoshua)

    The margin-top: 32px has already ruined the site header by reshaping it from what I wanted to build, I just need to reduce it to 10px on desktop and 20px mobile devices so it will fit in, Thanks.

    Just hide it altogether using the code above, there is no need to have the admin bar show on the page while logged in. But again, without seeing the page there is little more I can do to help.

    Thread Starter igwejoshua

    (@igwejoshua)

    Is it possible to hide the admin bar only on mobile devices (small screen)?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to edit the Default admin bar callback’ is closed to new replies.