Title: Spacing Header
Last modified: August 31, 2016

---

# Spacing Header

 *  [anton17](https://wordpress.org/support/users/anton17/)
 * (@anton17)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/)
 * Hey guys,
 * how do I manage to space out my header content like for example on:
    [http://www.apple.com](http://www.apple.com)
 * I can make it full width in the customizer but I have no idea how to make it 
   central
    and not left aligned.
 * Any help is much appreciated !
 * PS: Also would like to have a search icon like the one on apple.com such that
   the search bar only pops up once you click the icon but as a beginner I assume
   that could be difficult to do.. Thanks!

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

 *  [innuvo](https://wordpress.org/support/users/innuvo/)
 * (@innuvo)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074011)
 * If you could send us a link to your page that would help us see what you want
   to do
 *  Thread Starter [anton17](https://wordpress.org/support/users/anton17/)
 * (@anton17)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074020)
 * [antonsteinbeck.com](http://www.antonsteinbeck.com)
 *  [innuvo](https://wordpress.org/support/users/innuvo/)
 * (@innuvo)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074035)
 * There is quite a bit of custom CSS involved here, are you happy to take this 
   away to put it on your site? If so, it needs to go into an area called “custom
   CSS” or within your style.css file if using a child theme? Note: this is only
   for the menu, you would need custom Javascript to get the search effect:
 *     ```
       #site-banner {
         max-width: 100%;
         width: 1050px;
       }
   
       #site-banner-left {
         width: 75%;
       }
   
       #site-banner-right {
         width: 25%;
       }
   
       ul#menu-main li {
         text-align: center;
         width: 19%;
       }
   
       nav#header-right-menu {
         width: 100%;
       }
   
       ul#menu-shop {
         width: 100%;
       }
   
       ul#menu-shop li {
         display: inline-block;
         margin-bottom: 3px;
         text-align: center;
         width: 48%;
       }
       ```
   
 * What i’ve done is made the container for your menu smaller so that it looks like
   the apple site, but also spread the menu items out equally.
 * Please note: if you decide to add or remove menu items, then this will be affected
   in terms of styling!
 *  Thread Starter [anton17](https://wordpress.org/support/users/anton17/)
 * (@anton17)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074050)
 * First of all, thanks a lot for your help!
    I’d really like to adopt it to my 
   page but I can’t seem to find the right place to put the code in that you’ve 
   given me. I found the style.css file and the theme package that I’m using but
   there is no area called Custom CSS. Can I just add the code under ?
 *  Thread Starter [anton17](https://wordpress.org/support/users/anton17/)
 * (@anton17)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074052)
 * I assume this is where I have to insert it somwhere?
 *     ```
       /* =11. Header area
       -------------------------------------------------------------- */
   
       .site-header {
           width: 100%;
           }
   
       .site-branding.hide-header-text .site-title {
         display: none !important;
       }
   
       /* =12. Layout
       -------------------------------------------------------------- */
   
       .site-main {
           margin-left: auto;
           margin-right: auto;
           width: 100%;
       }
   
       .site-info,
       .site-content,
       #colophon > .menu,
       #footer-banner {
           max-width: 980px;
       }
   
       .fl-builder .site-content {
           max-width: 100%;
           padding: 0;
           margin: 0;
           }
   
       .site-info,
       .site-content,
       #colophon > .menu,
       #footer-banner {
           margin-left: auto;
           margin-right: auto;
       }
   
       @viewport{
           width: device-width;
       }
   
       /* =13. Menus
       -------------------------------------------------------------- */
   
       /* Small menu */
       .menu-toggle,
       .menu-toggle.dashicons {
           display: none;
       }
   
       /* Social menu */
   
       .social-menu {
           background-color: #e8e8e8;
           text-align: center;
       }
   
       .social-menu ul {
           list-style: none;
           margin: 0;
           padding: 0;
       }
   
       .social-menu ul a:before {
           display: block;
           font-family: "typicons";
           font-size: 36px;
           font-smoothing: antialiased;
           font-weight: 400;
           position: relative;
           text-align: center;
           text-decoration: none;
           text-rendering: optimizeLegibility;
           vertical-align: text-bottom;
       }
   
       .social-menu ul li {
           display: inline-block;
           list-style: none;
           margin: 0;
       }
   
       .social-menu ul a {
           display: inline-block;
           margin: 0 3px;
           text-decoration: none;
       }
   
       .social-menu ul a:hover {
           color: #7b7b7b;
           text-decoration: none;
       }
   
       .social-menu ul:last-of-type {
           margin-right: 0;
       }
   
       .social-menu ul a[href*="facebook.com"]:before {
           content: "\e0e4";
       }
   
       .social-menu ul a[href*="twitter.com"]:before {
           content: "\e0f8";
       }
   
       .social-menu ul a[href*="dribbble.com"]:before {
           content: "\e0e2";
       }
   
       .social-menu ul a[href*="plus.google.com"]:before {
           content: "\e0ea";
       }
   
       .social-menu ul a[href*="pinterest.com"]:before {
           content: "\e0f2";
       }
   
       .social-menu ul a[href*="github.com"]:before {
           content: "\e0e8";
       }
   
       .social-menu ul a[href*="tumblr.com"]:before {
           content: "\e0f6";
       }
   
       .social-menu ul a[href*="youtube.com"]:before {
           content: "\e0fc";
       }
   
       .social-menu ul a[href*="flickr.com"]:before {
           content: "\e0e6";
       }
   
       .social-menu ul a[href*="vimeo.com"]:before {
           content: "\e0fa";
       }
   
       .social-menu ul a[href*="instagram.com"]:before {
           content: "\e0ec";
       }
   
       .social-menu ul a[href*="linkedin.com"]:before {
           content: "\e0f0";
       }
   
       .social-menu ul a[href*="/feed"]:before {
           content: "\e0db";
       }
       ```
   
 *  Thread Starter [anton17](https://wordpress.org/support/users/anton17/)
 * (@anton17)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074054)
 * Okay, I think I have figured it out. Will I have to update my theme by uploading
   the modified version and will this have an effect on my progress on the website?
 *  [innuvo](https://wordpress.org/support/users/innuvo/)
 * (@innuvo)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074119)
 * Dont add the code directly to the style.css file that came with your theme, you
   need to use custom CSS here. What I suggest, is install this plugin:
    [https://en-gb.wordpress.org/plugins/simple-custom-css/](https://en-gb.wordpress.org/plugins/simple-custom-css/)
 * Then to go the settings page for the plugin, and paste the code that I gave you
   into the area available.
 * Do not directly amend your theme files as, when the theme updates, you will lose
   your changes
 *  Thread Starter [anton17](https://wordpress.org/support/users/anton17/)
 * (@anton17)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074120)
 * Okay, I’ll try that. Is this plug-in a good alternative to creating a child theme
   because I read up on that and it seems rather difficult for a beginner?
    Greetings
 *  [innuvo](https://wordpress.org/support/users/innuvo/)
 * (@innuvo)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074122)
 * Child themes are pretty easy to be honest, there is even a plugin to create them
   for you. Its called “Child Theme Configurator” and helps you create the child
   theme. It even copies over all of your settings for you.
 * I definitely recommend using a child theme however, but if you just want to make
   styling changes, then the plugin i linked to will work fine also.

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

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 2 participants
 * Last reply from: [innuvo](https://wordpress.org/support/users/innuvo/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/spacing-header/#post-7074122)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics