Horizontally center logo in responsive design

Community Forums Forums Design Tips and Tricks Horizontally center logo in responsive design

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  stefaanoyen 2 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #14103


    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!




    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



    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!


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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.