{"id":180,"date":"2016-05-12T21:27:38","date_gmt":"2016-05-12T21:27:38","guid":{"rendered":"https:\/\/www.annawerner.de\/?p=180"},"modified":"2018-07-15T12:07:45","modified_gmt":"2018-07-15T12:07:45","slug":"removing-the-storefront-header-padding","status":"publish","type":"post","link":"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/","title":{"rendered":"Removing the Storefront header padding"},"content":{"rendered":"

Storefront can be a great theme, but it comes with some hard-coded features, I personally don’t like. One of them is the huge padding around the header. I like headers to be rather slim and less “in your face”.<\/p>\n

The setup used in this post is the Storefront Theme and the\u00a0Storefront Designer\u00a0extension. The designer adds features to the header settings, which I used to align the menu right of the site title.\u00a0<\/span>
\n\"BildschirmfotoInspecting the element in my browser, I can see that the element has the id masthead and the class site-header. These will probably be the two CSS items I need to work on.<\/p>\n

So I take a closer look at the styles loaded for this particular element. What I find scrolling down, is the ‘padding-bottom’ and a bit further down the ‘padding-top’ of each 2.618em. Another interesting item is the “.sd-header-sticky.admin-bar .site-header” which has a ‘<\/span><\/span>top’ of<\/span>\u00a032px. Setting\u00a0either the ‘padding-top’ or the ‘top’ 32px to 0 both show me the desired results on my screen. So I will try adding custom CSS setting to change the menu.\u00a0<\/span><\/p>\n

I always use the Plugin\u00a0Simple Custom CSS and JS<\/a>. You can easily enter CSS as well as Javascript, sort it by giving each configuration different names and mostly you have different options to determine when it’s being loaded.<\/p>\n

In this case, I had to play with the different options and naming conventions for CSS. At first, my new settings were overwritten by the theme. So I had to load it in the footer and even set it as an external file. I then noticed that the padding-bottom was not loaded, so I had to name it with the ID and the class for it to work.<\/p>\n

This is my final code, that rewarded me with a slim menu:<\/p>\n

.site-header {
\npadding-top: 0;
\n}
\n#masthead.site-header {
\npadding-bottom: 0;
\n}<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Storefront can be a great theme, but it comes with some hard-coded features, I personally don’t like. One of them is the huge padding around the header. I like headers to be rather slim and less “in your face”. The setup used in this post is the Storefront Theme and the\u00a0Storefront Designer\u00a0extension. The designer adds […]<\/p>\n","protected":false},"author":1,"featured_media":299,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","jetpack_post_was_ever_published":false,"footnotes":""},"categories":[6,8],"tags":[],"yoast_head":"\nRemoving the Storefront header padding - Anna Schneider<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Removing the Storefront header padding - Anna Schneider\" \/>\n<meta property=\"og:description\" content=\"Storefront can be a great theme, but it comes with some hard-coded features, I personally don’t like. One of them is the huge padding around the header. I like headers to be rather slim and less “in your face”. The setup used in this post is the Storefront Theme and the\u00a0Storefront Designer\u00a0extension. The designer adds […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/\" \/>\n<meta property=\"og:site_name\" content=\"Anna Schneider\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-12T21:27:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-15T12:07:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/Removing-Storefront-Header-Padding-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"592\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"anna\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"anna\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/\",\"url\":\"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/\",\"name\":\"Removing the Storefront header padding - Anna Schneider\",\"isPartOf\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/#website\"},\"datePublished\":\"2016-05-12T21:27:38+00:00\",\"dateModified\":\"2018-07-15T12:07:45+00:00\",\"author\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844\"},\"breadcrumb\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/annaschneider.me\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Removing the Storefront header padding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#website\",\"url\":\"https:\/\/annaschneider.me\/blog\/\",\"name\":\"Anna Schneider\",\"description\":\"Front-End Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/annaschneider.me\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844\",\"name\":\"anna\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g\",\"caption\":\"anna\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Removing the Storefront header padding - Anna Schneider","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/","og_locale":"en_US","og_type":"article","og_title":"Removing the Storefront header padding - Anna Schneider","og_description":"Storefront can be a great theme, but it comes with some hard-coded features, I personally don’t like. One of them is the huge padding around the header. I like headers to be rather slim and less “in your face”. The setup used in this post is the Storefront Theme and the\u00a0Storefront Designer\u00a0extension. The designer adds […]","og_url":"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/","og_site_name":"Anna Schneider","article_published_time":"2016-05-12T21:27:38+00:00","article_modified_time":"2018-07-15T12:07:45+00:00","og_image":[{"width":1024,"height":592,"url":"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/Removing-Storefront-Header-Padding-1.png","type":"image\/png"}],"author":"anna","twitter_card":"summary_large_image","twitter_misc":{"Written by":"anna","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/","url":"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/","name":"Removing the Storefront header padding - Anna Schneider","isPartOf":{"@id":"https:\/\/annaschneider.me\/blog\/#website"},"datePublished":"2016-05-12T21:27:38+00:00","dateModified":"2018-07-15T12:07:45+00:00","author":{"@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844"},"breadcrumb":{"@id":"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/annaschneider.me\/blog\/removing-the-storefront-header-padding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/annaschneider.me\/blog\/"},{"@type":"ListItem","position":2,"name":"Removing the Storefront header padding"}]},{"@type":"WebSite","@id":"https:\/\/annaschneider.me\/blog\/#website","url":"https:\/\/annaschneider.me\/blog\/","name":"Anna Schneider","description":"Front-End Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/annaschneider.me\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844","name":"anna","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g","caption":"anna"}}]}},"jetpack_featured_media_url":"https:\/\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/Removing-Storefront-Header-Padding-1.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9x5Dx-2U","jetpack-related-posts":[{"id":191,"url":"https:\/\/annaschneider.me\/blog\/the-storefront-parallax-image-plugin\/","url_meta":{"origin":180,"position":0},"title":"The Storefront Parallax Image Plugin","author":"anna","date":"May 13, 2016","format":false,"excerpt":"The Prallax effect is a nice add-on for modern websites. While adding some interesting looks, it's not obtrusive and it makes scrolling down a page more fun - at least in my opinion. WooThemes has a nice extension that integrates with Storefront:\u00a0Storefront Parallax Hero. There are two different ways, to\u2026","rel":"","context":"In "Customization"","block_context":{"text":"Customization","link":"https:\/\/annaschneider.me\/blog\/customization\/"},"img":{"alt_text":"ParallaxEffect","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/05\/ParallaxEffect-300x154.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":166,"url":"https:\/\/annaschneider.me\/blog\/displaying-the-featured-image-on-facebook\/","url_meta":{"origin":180,"position":1},"title":"Displaying the featured image on facebook","author":"anna","date":"May 3, 2016","format":false,"excerpt":"Publishing\u00a0a blog post for most bloggers automatically include posting it on facebook, twitter, and all other networks to spread the content. Unfortunately, facebook does not always pick up on the featured image and instead shows a different image, the header image or no image at all. How facebook choses which\u2026","rel":"","context":"In "Technical Issues"","block_context":{"text":"Technical Issues","link":"https:\/\/annaschneider.me\/blog\/technicalissues\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":147,"url":"https:\/\/annaschneider.me\/blog\/why-i-love-working-with-woothemes-canvas\/","url_meta":{"origin":180,"position":2},"title":"Why I love working with WooThemes Canvas","author":"anna","date":"March 18, 2016","format":false,"excerpt":"The Canvas theme Canvas describes itself as: \"a\u00a0clean, minimalistic and beautiful WordPress theme framework or so called starter theme that you can use as-is or customize it via Theme Options. Canvas Theme Options provides with over 100 different values you can tweak to change font size, color, background, widget styling,\u2026","rel":"","context":"In "Customization"","block_context":{"text":"Customization","link":"https:\/\/annaschneider.me\/blog\/customization\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":48639,"url":"https:\/\/annaschneider.me\/blog\/adding-custom-content-with-javascript-to-wordpress-media-modals\/","url_meta":{"origin":180,"position":3},"title":"Adding custom content to WordPress media modals","author":"anna","date":"June 13, 2022","format":false,"excerpt":"This is a short tutorial on extending the WordPress media modal with your own content. Here we add a button in the media upload image details section. The wp.media class When adding, choosing and editing images in WordPress, most of the time you will see a modal opening up. This\u2026","rel":"","context":"In "WordPress Tips"","block_context":{"text":"WordPress Tips","link":"https:\/\/annaschneider.me\/blog\/wordpress-tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":356,"url":"https:\/\/annaschneider.me\/blog\/update-breaks-wordpress-site\/","url_meta":{"origin":180,"position":4},"title":"What to do if an update breaks your WordPress site","author":"anna","date":"April 28, 2017","format":false,"excerpt":"Updates are important, if not to say mandatory. They make your site more secure, more compatible, more functional and durable. Nevertheless, they can also cause sites to break, usually caused by numerous different kinds of conflicts between old and new code If things break in your live website or WooCommerce\u2026","rel":"","context":"In "Technical Issues"","block_context":{"text":"Technical Issues","link":"https:\/\/annaschneider.me\/blog\/technicalissues\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/04\/Update-breakes-site.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/04\/Update-breakes-site.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/04\/Update-breakes-site.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/04\/Update-breakes-site.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/04\/Update-breakes-site.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/04\/Update-breakes-site.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":52,"url":"https:\/\/annaschneider.me\/blog\/creating-a-second-floating-menu-on-specific-pages\/","url_meta":{"origin":180,"position":5},"title":"Creating a second floating menu on specific pages","author":"anna","date":"February 23, 2016","format":false,"excerpt":"Just now, I had a customer who with a rather rare wish: On her website, there are parts with many submenu items. To facilitate the user experience, these parts should always show a second menu giving constantly\u00a0all the submenu item. The site is running with the Pootlepress Canvas child theme.\u2026","rel":"","context":"In "Technical Issues"","block_context":{"text":"Technical Issues","link":"https:\/\/annaschneider.me\/blog\/technicalissues\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/Floating-Menu-CSS.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/Floating-Menu-CSS.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/Floating-Menu-CSS.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/Floating-Menu-CSS.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/Floating-Menu-CSS.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/Floating-Menu-CSS.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/180"}],"collection":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/comments?post=180"}],"version-history":[{"count":2,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":48311,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/180\/revisions\/48311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/media\/299"}],"wp:attachment":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/media?parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/categories?post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/tags?post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}