0

This is a WordPress site and I'm using bootstrap.

Site is https://doodle.gatewaywebdesign.com/

Basically I'm just trying to get rid of the initial top margin. So instead of this:

enter image description here

It should look like this:

enter image description here

I've tried adding styles to the html element in my stylesheet, but nothing has worked. I.e.

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

So then I'm wondering if the issue is WordPress related?

There is not any top margin when I place relevant code in a Codepen.

Any ideas?

Improve this question

2 Answers 2

Reset to default
2

That looks like the margin added by the WP admin bar when you are logged into the site. WP adds an inline style tag which sets the margin on the html element with an !important flag. Since it typically comes after any of your own styles it overrides them even if you also use !important. Since it only displays when you are logged in it shouldn't matter much, but if you really want to remove the admin bar you can change that in the settings Users->Your Profile then uncheck "Show Toolbar when viewing site". Or add the following to your functions file.

add_filter(‘show_admin_bar’, ‘__return_false’);
Improve this answer
2
  • Hey you're right! Logging out of WP-Admin solved the problem. That's weird that they automatically add margin like that, but my admin bar doesn't show up when I'm logged in anyway? But anyway, thank you!
    – HappyHands31
    Commented May 3, 2019 at 1:21
  • 1
    There's some other reason that your admin bar isn't actually displaying, possibly hidden with a display: none; somewhere in your theme css or by a plugin. That doesn't remove the margin though as you saw, as it is applied to the html element in order to accommodate the fixed positioning of the admin bar and push the page body down below it.
    – KFish
    Commented May 3, 2019 at 2:12
0

Your best bet is to use the Inspector tool in your browser (F12, usually). Position the cursor at the top of the page, right-click, Inspect Element. Then click on the code lines until you find the right spot for that CSS element.

Then over on the right side, find the CSS element for margin or padding, and figure out the CSS class that affects that area. Use that class name to add to the theme's Additional CSS (in Theme, Customize) to add the CSS for top margin.

If you have never used the Inspector before, there are many googles (or bings or ducks) that will show you videos. The Inspector is a great way to find the proper CSS class to modify.

(And CSS questions aren't really part of what happens around here.....)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.