Horizontally center logo in responsive design

[stefaanoyen]

Hi there,

I'm building a new site with the responsive Executive theme: http://www.jandeboeck.be

Everything looks great when I reduce the width, except the logo. It collides with the navigation and is aligned left. How do I center it horizontally when it's above the navigation and how do I prevent it from colliding with my navigation?

Any help is much appreciated!

Stefaan

[SoZo]

You'd need to add a new #header rule for the responsive sections with a different background image.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[stefaanoyen]

Hi there SoZo,

I'm not that good at CSS, I guess... I tried, but it didn't work that well.

Essentially I just need the logo to be horizontally centered and positioned above the navigation as soon as the screen is too small to have them both next to each other. That's when the screen is smaller than 1.200 pixels.

Could you indicate what the CSS should be? I know I have to put it under the '@media only screen and (max-width: 1200px)', but I don't know what to put there. Thanks for helping a newbie out!

Stefaan

PS I just visited your site and I'm impressed with your work. Congrats!

[Author]

Posts