Hello,
Am building a site for my client using this theme. I would like to customize the look of the header like below…
date left – Center logo – social media links on right. Also i want to move the banner on top of the page.
Please check the wireframe at : http://izonedesigns.com/demo/header-layout.jpg
Can anyone help with this.
Thanks in advance.
Jacob
Hello Jocaob,
Half of your header you can get from the theme panel by choosing header style 10. Centered menu and logo on top. For the social icons and date you need a bit of custom work.
1) chose header style 10
2) copy this code: http://pastebin.com/tgK2Ebu1 in your header-style-10.php and replace the existing one.
3) add this custom css in the theme panel:
.xdate{
color:grey;
float:left;
font-size: 16px;
padding: 1px 1px 1px 1px;
}
.header-menu-social{
display:table;
}
.custom-container{
width:720px;
margin-left:auto;
margin-right:auto;
}
@media (max-width: 700px) {
.custom-container{
width:80%!important;
}
}
You should have this result now: http://screencast.com/t/dyf55VPTCU7M
It will need a bit of adjusting on responsiveness and the mobile version but i think you can manage from here.
Thank you!
Thanks Bogdan,
I have closely followed the steps explained and i got it right till inserting the social media icons. Once i inseart the social media icons scripts, its appearing at the right place but comes one below the other instead of single line horizontally.
Any idea ?
Thanks
Hi Jacob,
That is the problem with responsiveness. Your viewport is maybe smaller than mine so when you narrow down the screen, they will fall one under the other. That is why i said it requires further work so you control the div’s containing the social icon, logo and date for each viewport. If requires CSS coding and use of media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries. If you cannot manage it, you can hire a freelancer to do it for you as we cannot offer custom work at the moment. We try to help where we can and make small customizations to set people on the right path to reach their goals.
Thank you!
