Title: 3 column responsive header
Last modified: April 15, 2017

---

# 3 column responsive header

 *  Resolved [soulkingzrecords](https://wordpress.org/support/users/soulkingzrecords/)
 * (@soulkingzrecords)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/3-column-responsive-header/)
 * Hey everyone,
 * i am trying to create a custom theme for my website and want to make 3 custom
   sized colums in the header.
 * Column 1 (company logo) – left side
    column 2 (Main Menu) – centered Column 3(
   Social Media icons) – Right side
 * if you access it on a mobile it want them to be responsive and slide under each
   other so they are row 1 (company logo), row 2 (main menu), row 3 (social media
   icons).
 * Here is a link to the website.
    [http://www.soulkingzrecords.com](http://www.soulkingzrecords.com)
 * Do you know any tips you can give me how i can change my coding to make that 
   happen?
    I am just starting to learn html and starting to learn css. second attempt
   at this haha.
 * Thank you in advance for any help i can get.
    Greets Nic
    -  This topic was modified 8 years, 11 months ago by [soulkingzrecords](https://wordpress.org/support/users/soulkingzrecords/).

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

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/3-column-responsive-header/#post-9034508)
 * – double-check for typing mistakes …
 * – do not use inline styles, use a specific CSS class in each html tag …
 * – read the manuals; for example, there is no ‘`float: center;`‘ …
 * – add width values as percentages, which should sum up to 100% for all three 
   divs …
 * – float all three divs to the left;
 * – use `@media` query in the CSS to change the formatting at a certain browser
   width.
 * example html code:
 *     ```
       <div class="header-logo">
         <a href="http://soulkingzrecords.com/" title="" rel="home">
         <img src="/wp-content/themes/SoulKingzRecords2017/Logo-SoulKingzRecords2017_web_blue.png">
         </a>
       </div>
   
       <div class="header-menu">
         YOUR MENU CODE	
       </div>
   
       <div class="header-social">
         YOUR SOCIAL ITEM CODE
       </div>
       ```
   
 * example CSS code for style.css of your theme:
 *     ```
       .header-logo { 
         width: 98%; 
         margin-left: 2&; 
         padding: 20px 0 0; 
         float: left; 
       }
       .header-lgo img { 
         width: 100%;
         height: auto;
       }
       .header-menu { 
         width: 100%;
         padding: 40px 0 0; 
         float: left;
       }
       .header-social {
         width: 100%; 
         padding: 40px 0 0;
         float: left;
       }
       .cnss-social-icon { 
         text-align: center;
       }
       /*plus a lot of styles for the individual li social elements*/
   
       @media screen and (min-width: 720px) {
         .header-logo { 
           width: 23%;  
         }
         .header-menu { 
           width: 55%;
         }
         .header-social {
           width: 20%; 
         }
       }
       ```
   
 *  Thread Starter [soulkingzrecords](https://wordpress.org/support/users/soulkingzrecords/)
 * (@soulkingzrecords)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/3-column-responsive-header/#post-9037123)
 * Thank you soooo much for your advice and your help with this Michael.
 * I will have alot to learn but putting everything in its own class is a good way
   to start. Thank you and happy easter michael.

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

The topic ‘3 column responsive header’ is closed to new replies.

## Tags

 * [3-column](https://wordpress.org/support/topic-tag/3-column/)
 * [custom theme](https://wordpress.org/support/topic-tag/custom-theme/)
 * [header](https://wordpress.org/support/topic-tag/header/)

 * 2 replies
 * 2 participants
 * Last reply from: [soulkingzrecords](https://wordpress.org/support/users/soulkingzrecords/)
 * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/3-column-responsive-header/#post-9037123)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics