{"id":18227,"date":"2019-11-14T08:54:59","date_gmt":"2019-11-14T13:54:59","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=18227"},"modified":"2021-07-13T11:19:17","modified_gmt":"2021-07-13T15:19:17","slug":"how-to-remove-the-space-between-the-header-and-page-content","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-themes\/how-to-remove-the-space-between-the-header-and-page-content\/","title":{"rendered":"How to Remove the Space Between the Header and Page Content"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p>Some BoldGrid themes are designed to have some additional separation between the Header and your website content, usually meant to display your website background.&nbsp; The spacing is controlled by your theme&rsquo;s stylesheet and unfortunately is not controlled by any settings within your theme options.<\/p>\n<p>However, you can make the necessary customizations you need by adding some CSS rules to your Customizer.&nbsp; The spacing between those elements is controlled by two CSS properties, <a href=\"https:\/\/www.boldgrid.com\/support\/page-builder\/difference-padding-margin\/\">Margins and Padding<\/a>.<\/p>\n<p>The margins and padding are added to a wrapper element that surrounds all of your page content using the <b>site-content<\/b> class.&nbsp; The following CSS targets that class and removes the margins and padding on the top of it to close the gap between you page content and your header.<\/p>\n<pre>.site-content {\r\n&nbsp; &nbsp; margin-top: 0;\r\n&nbsp; &nbsp; padding-top: 0;\r\n}\r\n<\/pre>\n<p>You can easily modify the code as well if you want to increase\/decrease the spacing by changing the zero values in the code to any valid <a href=\"https:\/\/www.w3schools.com\/cssref\/css_units.asp\">CSS Unit<\/a>.<\/p>\n<h3 id=\"working-with-custom-css\">Working with Custom CSS<\/h3>\n<p>Generally speaking, you&rsquo;ll want to add custom CSS to the Customizer in the <strong>CSS\/JS Editor<\/strong> panel. Depending on your theme, this section could be under <strong>Advanced<\/strong> or have a different title like <strong>Additional CSS<\/strong>. We don&rsquo;t recommend making changes to core theme files. Your modifications can be overwritten when the theme updates.<\/p>\n<p>If the code given in this article does not work for your website, there is another thing you can try. Using your browser&rsquo;s developer tools you can try and locate the source of the gap. This isn&rsquo;t as scary as it sounds! We have two videos below demonstrating how to find code to change and how to find margin and padding.<\/p>\n<p>Start by right clicking on the part of your website you want to update. If you are using Firefox click Inspect Element, if you are Chrome it&rsquo;s called Inspector. A popup will appear with your website&rsquo;s code. The element you&rsquo;ve selected in the code will appear highlighted on your screen. Use the element&rsquo;s ID or class to localize your changes only where you want them.<\/p>\n<p><iframe loading=\"lazy\" title=\"Using the Browser Inspector to add Custom CSS in BoldGrid\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/z7odYi68wZA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><iframe loading=\"lazy\" title=\"How to find Margins and Paddings in WordPress\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/xmjJjCX7v2U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Some BoldGrid themes are designed to have some additional separation between the Header and your website content, usually meant to display your website background.&nbsp; The spacing is controlled by your theme&rsquo;s stylesheet and unfortunately is not controlled by any settings within your theme options. However, you can make the necessary customizations you need by adding [&hellip;]<\/p>\n","protected":false},"author":880,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"Learn how to remove extra space between the WordPress header and body content.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[764],"tags":[],"class_list":["post-18227","post","type-post","status-publish","format-standard","hentry","category-boldgrid-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/880"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=18227"}],"version-history":[{"count":4,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18227\/revisions"}],"predecessor-version":[{"id":39769,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/18227\/revisions\/39769"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=18227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=18227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=18227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}