Title: Header width
Last modified: February 15, 2021

---

# Header width

 *  Resolved [sripujastore](https://wordpress.org/support/users/sripujastore/)
 * (@sripujastore)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/header-width-10/)
 * Hi,
 * We recently launched our online store using woocommerce storefront theme. I found
   the theme very useful. I have a question related to header portion. As you can
   see the header is taking lot of space and it’s too wide pushing the categories
   down. Can you please advise how can I reduce the header width.?
 * Thanks
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fheader-width-10%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/header-width-10/#post-14057639)
 * Hey [@sripujastore](https://wordpress.org/support/users/sripujastore/)
 * It’s not entirely clear what you mean exactly. From what I can see, the header
   doesn’t push any categories down and it actually looks great. Here’s what I see
   on my end:
 * [[
    Image link: [https://d.pr/i/d0mIZn](https://d.pr/i/d0mIZn)
 * Can you explain a bit more what you mean, perhaps with a screenshot to illustrate/
   highlight the issue?
 *  Thread Starter [sripujastore](https://wordpress.org/support/users/sripujastore/)
 * (@sripujastore)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/header-width-10/#post-14059536)
 * Thanks for your response. As you can see the header is too wide causing the page
   to scroll. I updated the image with a note. [https://d.pr/free/i/D05jGP](https://d.pr/free/i/D05jGP)
 * Thanks
    -  This reply was modified 5 years, 2 months ago by [sripujastore](https://wordpress.org/support/users/sripujastore/).
 *  [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/header-width-10/#post-14059867)
 * Hey [@sripujastore](https://wordpress.org/support/users/sripujastore/)
 * This space is determined by the logo you’ve uploaded and that’s showing in the
   top left.
 * If you’d like to reduce that, you will need to use a smaller logo image. You 
   can also reduce some of the spacing by adding some CSS code:
 *     ```
       .site-header, #page {
         padding-top: 0;
       }
   
       .site-header .site-branding {
         margin-bottom: 0;
       }
       ```
   
 *  Thread Starter [sripujastore](https://wordpress.org/support/users/sripujastore/)
 * (@sripujastore)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/header-width-10/#post-14064395)
 * Thanks this worked.! I have related questions. If I have to modify the storefront
   theme like modify homepage to show only desired categories (not dynamically like
   it is now) and nothing else. How should I go about it.? Can you please point 
   me to the guide? Thanks
 *  Thread Starter [sripujastore](https://wordpress.org/support/users/sripujastore/)
 * (@sripujastore)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/header-width-10/#post-14064442)
 * for example if I want to show 4 or 5 categories then change the code here
 *     ```
       if ( ! function_exists( 'storefront_product_categories' ) ) {
       	/**
       	 * Display Product Categories
       	 * Hooked into the <code>homepage</code> action in the homepage template
       	 *
       	 * @since  1.0.0
       	 * @param array $args the product section args.
       	 * @return void
       	 */
       	function storefront_product_categories( $args ) {
       		$args = apply_filters(
       			'storefront_product_categories_args',
       			array(
       				'limit'            => 3,
       				'columns'          => 3,
       				'child_categories' => 0,
       				'orderby'          => 'menu_order',
       				'title'            => __( 'Shop by Category', 'storefront' ),
       			)
       		);
       ```
   
    -  This reply was modified 5 years, 2 months ago by [sripujastore](https://wordpress.org/support/users/sripujastore/).
 *  [Niall a11n](https://wordpress.org/support/users/wpniall/)
 * (@wpniall)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/header-width-10/#post-14193799)
 * Hi [@sripujastore](https://wordpress.org/support/users/sripujastore/),
 * I’m happy that Senff was able to help you with the spacing.
 * > If I have to modify the storefront theme like modify homepage to show only 
   > desired categories (not dynamically like it is now) and nothing else.
 * Hmm, that would require either some custom code or the use of [Storefront Powerpack](https://woocommerce.com/products/storefront-powerpack/).
   If you want to add custom code, you can find our hooks and filters here: [https://docs.woocommerce.com/document/storefront-hooks-actions-filters/](https://docs.woocommerce.com/document/storefront-hooks-actions-filters/).
   Or, you could try customizing this code: [https://gist.github.com/rynaldos/a9d357b1e3791afd9bea48833ff95994](https://gist.github.com/rynaldos/a9d357b1e3791afd9bea48833ff95994)
 * Alternatively, you could do the following if you’re prefer not to use code or
   purchase Storefront Powerpack:
       1. Create a new page under **Pages > Add New** inside your dashboard
    -  1. [Set this new page as your homepage](https://kinsta.com/blog/wordpress-change-homepage/)
    -  1. Use one of the built-in WooCommerce shortcodes to add the specific categories
          to the homepage, as explained here: [https://docs.woocommerce.com/document/woocommerce-shortcodes/#scenario-5-specific-categories](https://docs.woocommerce.com/document/woocommerce-shortcodes/#scenario-5-specific-categories)
 * If you have further questions, please let us know.
 *  [Niall a11n](https://wordpress.org/support/users/wpniall/)
 * (@wpniall)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/header-width-10/#post-14227984)
 * We haven’t heard back from you for a while, so I’m going to mark this post as
   resolved. If you have any further questions or need additional help with the 
   Storefront theme, please start a new thread and we’ll be able to help you out
   there. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Header width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/storefront/4.6.2/screenshot.png)
 * Storefront
 * [Support Threads](https://wordpress.org/support/theme/storefront/)
 * [Active Topics](https://wordpress.org/support/theme/storefront/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/storefront/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/storefront/reviews/)

## Tags

 * [product categories](https://wordpress.org/support/topic-tag/product-categories/)

 * 7 replies
 * 3 participants
 * Last reply from: [Niall a11n](https://wordpress.org/support/users/wpniall/)
 * Last activity: [5 years, 1 month ago](https://wordpress.org/support/topic/header-width-10/#post-14227984)
 * Status: resolved