Forums

Give help. Get help.

  • # December 17, 2012 at 2:19 pm

    Because the wordpress admin bar has `html{ margin-top: 28px !important; }` forced in, it makes `html, body { height: 100%; }` too large.. and I don’t see how to compensate. It seems horrible to use javascript for this (remove 28px from body height and recalculate every time the window is resized..)

    Is there any way around this?

    # December 17, 2012 at 4:05 pm

    Hi @damon

    I can understand what you mean, but does it really matter if it breaks it, as the only time that code is active is when you are logged into WordPress as an admin.

    # December 17, 2012 at 5:11 pm

    You can completely remove the admin bar or put it below your footer.

    Lox
    # March 19, 2013 at 8:24 pm

    @damon, did you managed to solve that issue? I tried a negative bottom margin on html with no luck ….

    # March 19, 2013 at 8:30 pm

    On the Edit User Page, Uncheck the “Admin bar visible on front end” option.

    If that still doesnt work, follow this article: http://wp.tutsplus.com/tutorials/how-to-disable-the-admin-bar-in-wordpress-3-3/

    # March 19, 2013 at 10:44 pm

    > I can understand what you mean, but does it really matter if it breaks it, as the only time that code is active is when you are logged into WordPress as an admin.

    This. What’s the point in disabling something that only you see?

    # September 30, 2016 at 10:28 am

    Well, I’m a few years late with this response, but I just ran into this problem with a BuddyPress site I’m building where the admin bar is visible to all visitors. I was able to fix the problem by adding style="margin-top:0 !important" to the html tag in my header.php. Hope that helps!

    # July 10, 2018 at 8:15 am

    There is a simple solution. Add a conditional class ‘admin-bar’ to the HTML element like this:

    <html <?php
        language_attributes();
        echo is_admin_bar_showing() ? 'class="admin-bar"' : '';
    ?>>
    

    Then this CSS:

    html {
        height: 100%;
    }
    html.admin-bar {
        height: calc(100% - 32px);
    }
    
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag