Customizing Header/Menu

Hi, what you’re looking to do is actually pretty simple to do once you know where to look. And that’s the trick with this theme and the Powerpack, knowing where to look. I tried what you are looking to do in my test site and found that you can adjust the height of the header by going to:

Appearance → Customize → Powerpack → Designer

Then click the “+ Add a Style” button.

Hover over the part of the screen you want to edit and ensure that the highlighted portion selects everything you intend to edit. You will then be given a bunch of settings on the left that you can adjust. You will want to change Line Height, the Margins for Top and Bottom, and the Padding for Top until you have your header adjusted the way you prefer.

As for making the Search bar slimmer, that will likely require some Custom CSS but you shouldn’t need a child theme for that. You can add custom CSS rules that won’t be overwritten by navigating to:

Appearance → Edit CSS

This will give you a small window to add custom CSS rules to that won’t be lost when your theme upgrades. If you have plans to make more robust changes then, by all means, use a child theme, that’s what they are intended for. But if all you want to do is make small changes then I don’t know that you’ll need to implement a one.

In the Additional CSS area, create a rule for:


input#woocommerce-product-search-field-0 {
height: [your choice in px/em/%/etc];
}


Testing shows this is same CSS rule will work for your site. You’ll need to adjust or hide the magnifying glass as well but you should be able to adjust this with the following rule:


.site-search .widget_product_search form::before {
top: [setting of your choice];


My tests show that a form height of 10px and a top setting at 0.55em for the magnifying glass works very well for your header search form. Please let me know how this works out for you.

Thanks!

Thanks yes this is (basically) what I was looking for. Is there a tutorial/doco for “what exactly am I editing here?” That is, “what exactly is line height?” I seem to be able to change the size of my search bar using font size, but I’m still having trouble eliminating some of the padding and getting my menu exactly how I want it. What is the difference between margin and padding, etc?

Thanks for your help. I was able to reduce some of the padding on the top of the header, make the search bar smaller, and (after toying around a bit) center everything where I wanted it.

Regards,
Todd

Hi again,

Thanks for letting me know this was what you needed. If you would like to know more about CSS you can learn more here:

https://www.w3schools.com/css/default.asp

This should answer your questions about what your editing, what line height it, padding, margins, etc.

If you would like to know more how to manage all of this with the Storefront Powerpack, I’d recommend reviewing the documentation here:

https://docs.woocommerce.com/document/storefront-powerpack/

Specifically, the designer:

https://docs.woocommerce.com/document/storefront-powerpack/#section-3

If you have an answer on this, would you mind marking the topic as resolved?

Thanks!