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 1 year, 6 months ago.

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

    stefaanoyen
    Participant
    Post count: 14

    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

    #14212

    SoZo
    Moderator
    Post count: 1573

    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

    #15053

    stefaanoyen
    Participant
    Post count: 14

    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!

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

You must be logged in to reply to this topic.