wp_head covering my page

  • I’m creating a theme. When I add the wp_head() function it adds a top margin of 32 px. It appears that the margin isn’t pushing the page down, it’s just covering it with white space.

    When I add wp_footer() at the bottom of the page it covers the actual page.

    I’m not sure what to do here.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter burnedfaceless

    (@burnedfaceless)

    View post on imgur.com

    Here is a screenshot of the page. The admin bar is covering the actual page.

    Thread Starter burnedfaceless

    (@burnedfaceless)

    I added a top margin of 32 px to the navbar. It works, but I am not sure if this is the best way to do it.

    Moderator bcworkz

    (@bcworkz)

    32px margin is OK if you don’t mind the spacing even when the admin bar is not there. It’s difficult to make a suggestion without a live page to examine. If you are able to post a link to such a page, please do. The admin bar makes its space by adding a 32px top margin (with !important modifier) to the <html> entity, pushing the entire page down. The bar itself is a fixed position with top: 0;

    I’m assuming your navbar is the “sticky” variant that is always at the top of the window regardless of scroll position. Thus it has position fixed. If it has no positioning dimensions like top: 0;, it should move with the <html> entity despite the fixed position. Non-sticky navbars should not ever be a problem since they are positioned static or relative to the html and body entities.

    The only other situation I can imagine is if you have inline style on the page which overrules the admin bar’s <html> rule pushing the page down. To do so, your style would need to appear after the admin bar’s. The admin bar rules are normally just before the closing </head> tag, so it would be difficult for an overriding rule to exist if it was properly added with wp_enqueue_style().

    Thread Starter burnedfaceless

    (@burnedfaceless)

    The page is not being pushed down.

    The wp_header is above the navbar blocking it.

    The style that pushes the HTML down is there with important and it’s being applied (chrome dev tools).

    It is not actually pushing the page down, the admin bar is over the page.

    I will post the page tomorrow if I can’t get it working.

    Thread Starter burnedfaceless

    (@burnedfaceless)

    It is a sticky variant. I’m a poser with CSS but it seems like the menu css is posting it to the top so it won’t move it down.

    I’m using the standard Bootstrap menu and I should be able to figure it out.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘wp_head covering my page’ is closed to new replies.