Modern Portfolio: 2 custom header widget areas and CSS

[diegocerezo]

Hello People from StudioPress, first I would like to thank you in advance for all the help! I really appreciate it!

I have added 2 custom header widget areas a right one and a left one, the reason for this is that I need social icons on the left and a search bar on the right and I need them to show at the same level (currently they are showing at different heights).

here is the gist

With CSS I´ve made them half the size of the site wich is 520px, I also used float to make the right header show on the right:

.header_left {
 width: 515px;
}

.header-right-extra {
 width: 515px;
 float: right;
}

I also need the logo to show under the two widgets and in the middle

Again thanks a lot!

 

http://equilibre.gt

[psahalot]

Here is the CSS that you need to use :

`header-right-extra {
width: 515px;
float: right;
margin-top: 10px;
}

.header_left {
width: 515px;
float: left;
margin-top: 10px;
}
`

[diegocerezo]

Thanks a lot, i have very little experience but seeing your css code with the margin mods led me to the solution.

Your code works like a charm, the only thing is that the do not end next to each other, don´t know why, beats me.

But taking your code I started playing around with some other atributes and the end up working pretty nice, exactly what i need

here is the CSS code

[CSS]

.header_left {
width: 515px;
 margin-top: 20px;
}

.header-right-extra {
 position: fixed;
 top: -40px;
 right: 200px;
 width: 300px;
 float: right;
}

[/CSS]

 

[Author]

Posts