Title: header and Navigation height
Last modified: August 31, 2016

---

# header and Navigation height

 *  [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * (@carlos-jaramillo)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/header-and-navigation-height/)
 * Hi,
 * I have this web that every thing is going smooth, but I have this problem, I 
   need to reduce the header height
 * Also the navigation height is a little too much since it takes up too much space.
 * I have change padding and all, but are heights that I defeneetly need to make
   shorter.
 * I have targeted stuff with developer tools but it is not working when added to
   my child-
 * Please help.
    right now is on a temporary domain:
 * [the site is this](http://looseloops.com)

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

 *  [James Koster](https://wordpress.org/support/users/jameskoster/)
 * (@jameskoster)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/header-and-navigation-height/#post-7404582)
 * Hey,
 * You need to change the `padding-top` and `padding-bottom` values on `.main-navigation
   ul.menu>li>a, .main-navigation ul.nav-menu>li>a` to shrink the nav.
 * Cheers
 *  Thread Starter [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * (@carlos-jaramillo)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/header-and-navigation-height/#post-7404620)
 * Hi,
 * I have tried this on my child css, but it doesn’t work;
 *     ```
       .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li a {
       padding-top: 1em !important;
       padding-bottom: 1em !important;
       }
       ```
   
 * Sure I am doing some thing wrong here
 *  Thread Starter [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * (@carlos-jaramillo)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/header-and-navigation-height/#post-7404629)
 * I have had some success with this…
 *     ```
       .site-header {
       background-color: #fff;
       padding-top: 5px !important;
       padding-bottom: 5px !important;
       margin: 0 !important;
       }
       ```
   
 * But I really would like to have more control over the navigation elements, as
   text size and separation between each of the elements. Also the padding for the
   navigation, as every time I change the top padding of the header, the navigation
   is affected also, I would like to have them aligned.. the logo and the nav elements.
 * The owner f the site doesn’t want that many sub elements on the navigation, that
   is why I need to reduce the size of all, so they may appear as main elements 
   as possible.
 * The thing is that the size of the header is small when there is no logo, but 
   no matter how small the image of the logo is, then the height of the header goes
   big, there is has to be a padding for the logo.
 * cheers…
 *  Thread Starter [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * (@carlos-jaramillo)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/header-and-navigation-height/#post-7404675)
 * Any other ideas .. What am I doing wrong?
 * Thanks
 *  [dfoley75](https://wordpress.org/support/users/dfoley75/)
 * (@dfoley75)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/header-and-navigation-height/#post-7404742)
 * I am curious about this. I am having the same issue. The code above helped me
   reduce the space between my logo and the top of the header, and also the space
   between the bottom of my header and my content. However, I cannot reduce the 
   space between the bottom of my logo and the bottom of the header. It’s like always
   about 50 pixels no matter what I do.
 *  Thread Starter [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * (@carlos-jaramillo)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/header-and-navigation-height/#post-7404748)
 * Here it’s the whole tweak I did,
 *     ```
       /*Site header padding + BG color*/
   
       @media screen and (min-width: 767px) {
       .site-header {
       background-color: #f5f5f5;
       padding-top: 20px !important;
       padding-bottom: 0px !important;
       margin: 0 !important;
       }
       }
   
       /* custom header padding */
       @media screen and (min-width: 767px) {
       .site-header .custom-logo-link, .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link
       {
           display: block;
           width: 14%;
           float: left;1%;
           margin-right: 1%;
           clear: left;
           margin-bottom: 0 !important;
        }
        }
   
       /*align menu nav and logo */
       @media screen and (min-width: 767px) {
       .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
       padding-top: 0;
       }
       }
       ```
   
 * Hope it helps you, you can try different setting until it fits your needs, as
   you can see it has some media queries to not affect the mobile view … good luck
 * Cheers

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

The topic ‘header and Navigation height’ 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

 * [header](https://wordpress.org/support/topic-tag/header/)
 * [height](https://wordpress.org/support/topic-tag/height/)

 * 6 replies
 * 3 participants
 * Last reply from: [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/header-and-navigation-height/#post-7404748)
 * Status: not resolved