0

I am in the process of creating my first wordpress template. I have a top nav that is however pushed down by 

html {
margin-top: 32px !important;
}

I found that this particular style is in the admin-bar.php file that came when I downloaded wordpress on my local machine. I could just take the lines out of that file but that doesn't do the job because I want to create a template that can be bundled and uploaded to anyones wordpress.

Is there a way I can overwrite the above styling through my own template?

I hope this makes sense

Thank you so much

Rika
  • 171
  • 2
  • 14
  • 1
    you can [hide the admin bar](http://wpsites.org/wp-content/uploads/2015/01/hide-admin-bar-via-user-settings.png) on your user profile settings – d79 Apr 16 '15 at 00:05
  • yeah but I try to find a solution where others who use my template won't need to do anything – Rika Apr 16 '15 at 00:16
  • so there's an empty space instead of the toolbar? you should resolve the issue to get the toolbar visible and not hide it by default with some css – d79 Apr 16 '15 at 00:21
  • do you have any idea what could be the issue? – Rika Apr 16 '15 at 00:28
  • I think you're missing the [`wp_footer()` function](https://codex.wordpress.org/Function_Reference/wp_footer) – d79 Apr 16 '15 at 00:34

3 Answers3

1

You could enqueue a css file to the bottom of the page and overwrite the above with:

html{
    margin-top: 0px !important;
}

It has to be the last CSS file to be linked.

jonny2k9
  • 166
  • 9
  • so I put it below the footer. My css file is in the same place as the html. wp_enqueue_style($src=overwrite.css); Is that correct? – Rika Apr 16 '15 at 00:14
1

With css you can just do the following

html {
    margin-top: 0px !important;
}

and it'll automatically override it. But I can't tell exactly what you are trying to do.

Xander Luciano
  • 3,753
  • 7
  • 32
  • 53
  • I am trying to remove white space over my top-nav. The 0px !important is ignored since the other one is already important – Rika Apr 16 '15 at 00:16
  • Try adding display: none; instead of changing the margin then. I'll edit the code. – Xander Luciano Apr 16 '15 at 00:18
  • that'll remove the whole page – Rika Apr 16 '15 at 00:21
  • Right, Didn't even think that answer through. Can you edit the original CSS file and just change that line? – Xander Luciano Apr 16 '15 at 00:23
  • According to this question: http://stackoverflow.com/questions/11178673/how-to-override-important adding the !important will override the original important and set it to 0px as long as your CSS template is loaded after the original one. – Xander Luciano Apr 16 '15 at 00:25
  • I think that might be the problem: The order it is loaded. Is there a way to change the order css templates are loaded? – Rika Apr 16 '15 at 00:27
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/75340/discussion-between-vipercode-and-rika). – Xander Luciano Apr 16 '15 at 00:48
1

I'm adding this for future reference because previous answers respond to the CSS question, but the issue here is not the CSS part, in fact html { margin-top: 32px !important; } is added by Wordpress for the toolbar.

As the reference says:

Note: If you have turned the Toolbar on in your profile settings, but still don't see it on the front end of your site, it may be that your theme does not call wp_footer() in its footer.php file, or the Toolbar may be disabled by a plugin.

d79
  • 3,699
  • 1
  • 22
  • 36
  • It seemed he wants to get rid of the margin for the toolbar. So the issue isn't him not seeing the toolbar, it's the gap it leaves for the toolbar. – Xander Luciano Apr 16 '15 at 01:19
  • he shouldn't hide the toolbar or remove the margin.. he wants to distribute the theme so why remove such functionality when the single user can choose to hide it from the profile settings? and if he's missing the `wp_footer()` is not only facing the problem with toolbar but also with the enqueued javascript files (from plugins too) not being loaded – d79 Apr 16 '15 at 01:54