Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Sticky footer being destroyed by wordpress admin bar

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 17, 2012 at 2:19 pm #41401
    damon
    Participant

    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 #117816
    Watson90
    Member

    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 #117819
    chrisburton
    Participant

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

    March 19, 2013 at 8:24 pm #128870
    Lox
    Member

    @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 #128872
    noahgelman
    Participant

    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 #128885
    TheDoc
    Member

    > 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 #246051
    [email protected]
    Participant

    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 #273856
    photocurio
    Participant

    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);
}
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.