Title: Customizing Header/Menu
Last modified: February 19, 2019

---

# Customizing Header/Menu

 *  Resolved [toddpinil](https://wordpress.org/support/users/toddpinil/)
 * (@toddpinil)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/customizing-header-menu/)
 * Please forgive the lengthy post. I’ve spent over a week trying to address this,
   and haven’t had much luck.
 * I’m using WooCommerce with the Storefront theme
    Currently in “catalog mode” (
   FYI) so don’t worry about the checkout and cart stuff.
 * What I am looking to do:
    Make my menu bar more like the twenty fourteen menu
   bar (much slimmer)
 * I already am using:
    WooCommerce PowerPack
 * For its price, I’m kind of disappointed in the powerpack. By “customize” (the
   header) it really only means “rearrange.” I can’t even add a generic custom text
   field (as far as I can tell.) The sticky menu is nice, though it seems to remove
   all padding below the header when it’s turned on.
 * My comfort level:
    I haven’t coded since the 90’s. I could knock out some static
   HTML to do what I want (bully for me.) I used to be pretty well-versed in PHP,
   but not so much anymore. Never was overly familiar with CSS. Getting used to -
   everything- being object-oriented.
 * Not looking for a full-on “you do the coding for me” answer. Just point me in
   the right direction. I’m already pretty sure I need to create a child theme and
   muck about in the header.php file and probably some CSS too. I’d like to either
   change the search bar to a slimmer one, or just the magnifying glass icon. I’m
   fairly sure this has to do with changing the search widget (?) but I don’t know
   how to do this either.
 * Thanks!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcustomizing-header-menu%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Phillip C. a11n](https://wordpress.org/support/users/phillipwoo/)
 * (@phillipwoo)
 * [7 years, 2 months ago](https://wordpress.org/support/topic/customizing-header-menu/#post-11300657)
 * 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!
 *  Thread Starter [toddpinil](https://wordpress.org/support/users/toddpinil/)
 * (@toddpinil)
 * [7 years, 2 months ago](https://wordpress.org/support/topic/customizing-header-menu/#post-11315042)
 * 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
 *  [Phillip C. a11n](https://wordpress.org/support/users/phillipwoo/)
 * (@phillipwoo)
 * [7 years, 2 months ago](https://wordpress.org/support/topic/customizing-header-menu/#post-11331030)
 * 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](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/](https://docs.woocommerce.com/document/storefront-powerpack/)
 * Specifically, the designer:
 * [https://docs.woocommerce.com/document/storefront-powerpack/#section-3](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!

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

The topic ‘Customizing Header/Menu’ 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

 * [additional css](https://wordpress.org/support/topic-tag/additional-css/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [custom](https://wordpress.org/support/topic-tag/custom/)
 * [designer](https://wordpress.org/support/topic-tag/designer/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [powerpack](https://wordpress.org/support/topic-tag/powerpack/)

 * 3 replies
 * 2 participants
 * Last reply from: [Phillip C. a11n](https://wordpress.org/support/users/phillipwoo/)
 * Last activity: [7 years, 2 months ago](https://wordpress.org/support/topic/customizing-header-menu/#post-11331030)
 * Status: resolved