3 column responsive header

  • Resolved soulkingzrecords

    (@soulkingzrecords)


    7 years, 7 months ago

    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.
    https://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

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

  • – 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="https://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

    (@soulkingzrecords)

    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.