Header width

Resolved sripujastore
(@sripujastore)

5 years, 2 months ago

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 to see the link]

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

Senff – a11n
(@senff)

5 years, 2 months ago

Hey @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

Can you explain a bit more what you mean, perhaps with a screenshot to illustrate/highlight the issue?
Thread Starter sripujastore
(@sripujastore)

5 years, 2 months ago
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

Thanks
- This reply was modified 5 years, 2 months ago by sripujastore.
Senff – a11n
(@senff)

5 years, 2 months ago
Hey @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
(@sripujastore)

5 years, 2 months ago

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
(@sripujastore)

5 years, 2 months ago
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.
Niall a11n
(@wpniall)

5 years, 1 month ago
Hi @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. If you want to add custom code, you can find our hooks and filters here: https://docs.woocommerce.com/document/storefront-hooks-actions-filters/. Or, you could try customizing this code: https://gist.github.com/rynaldos/a9d357b1e3791afd9bea48833ff95994

Alternatively, you could do the following if you’re prefer not to use code or purchase Storefront Powerpack:
If you have further questions, please let us know.
Niall a11n
(@wpniall)

5 years, 1 month ago

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.

Tags