I want to center elements in the Parallax Pro Header

[pcgs51]

I want to center elements in the Parallax Pro Header. Specifically the logo and the .site-header .widget-area that normally appear on the left (logo) and the right (widget area).

I managed to get the .site-header .widget-area to go full width and center the menu in the header but I also need to make the logo in the header appear centered above the menu. I cannot get that logo to budge. What am I missing here?

http://tfdemo2.wpengine.com/

---

Thanks,
pcgs51

http://tfdemo2.wpengine.com/

[nutsandbolts]

Try this -

(1) Add a margin: 0 auto; to this rule:

.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 143px;
text-indent: -9999px;
width: 400px;
margin: 0 auto;
}

(2) Change the width of .title-area from 400px to 100%, remove the float: left, and add margin: 0 auto; to it as well.

.title-area {
padding: 20px 0;
width: 100%;
margin: 0 auto;
}

If that doesn't work, leave it in place and let me know; I'll be glad to take another look.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[pcgs51]

Hi Andrea!

That works almost 100%. The only flaw is that the image doesn't scale for devices like the rest of the site does when you view in a less than 480px width device. It pushes off to the right by about 40-60px when viewing on a 320px wide iPhone. Looks fine at the 480px width and up.

But this is way better than it was.
Thanks again!

---

Thanks,
pcgs51

[nutsandbolts]

Okay, try this. At the very bottom of the stylesheet, add this:

@media only screen and (max-width: 399px) {
.header-image .site-title > a {
width: 100%;
}
}

Let me know if that fixes it - it does for me in Inspector but that doesn't necessarily mean it will work in real life.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[sdbroker]

Under .header-image .site-title > a change width: 400px; that you currently have to max-width: 400px;.

It works for me without having to change or add anything else to the @media code.

[pcgs51]

Many thanks to you both Andrea and sdbroker! They both work. I'm currently using sdbroker's solution but both are helpful for the sake of learning.

Thanks so much for the generosity of your time and talents!

---

Thanks,
pcgs51

[jhs]

This reply has been marked as private.

[jbendiner]

Hi pcg51,
I am trying to implement my new site using Parallax and I would like to do exactly what you did with yours: move the logo above the nav menu at the top, and center both. Would you be willing to share with me the code changes you made to make yours work? I tried to follow the replies but I am not certain of what/where has to be changed.

Many thanks.
Jerry

[Author]

Posts