Centering Header Image

  • Resolved George Bright

    (@george-bright)


    10 years, 6 months ago

    Hi. I’m pretty new to the whole wordpress/css thing so apologies if I may any dumb mistakes.

    I’m currently running my website (www.platinumict.org.uk) using a very slightly modified Advertica Lite theme.

    One problem I have run into that I haven’t managed to stumble to a working solution for is centering the header image. I have managed to make small changes to the CSS to change some facets of the theme but can’t work out exactly where the the style sheet I’d edit the position of the header or how.

    Please let me know if there’s any info I need to provide and I’ll do my best. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter George Bright

    (@george-bright)

    10 years, 6 months ago

    Just to clarify: I have googled the issue and found a million results explaining various things I could add to CSS to centre the image, but none of them seem to explain where/in what file to add the code unless I’m missing something.

    Ciprian Ionita

    (@ciprian-ionita)

    10 years, 6 months ago

    Just to center the logo you could use this CSS code:
    #logo {
    width: 100%;
    text-align: center;
    }
    I’m not very familiar with the theme, but if it has an option for custom CSS you could add the code there. Or if not you could use a plugin like WP Add Custom CSS or even the Jetpack plugin has a CSS option.

    Thread Starter George Bright

    (@george-bright)

    10 years, 6 months ago

    Hi Ciprian

    Thanks for the help.

    I have installed the Simple Custom CSS plugin so I used that to input the code.

    The code you have given me centres the logo in the top left of the page – the one I am actually trying to centre is the main header image below this and the page links (sorry, should have clarified this).

    I tried using your code but replacing #logo with #header, #header-image and #front-header-image but none of these seemed to make a difference.

    Not sure if it will help but here’s a link to my stylesheet.css.

    Ciprian Ionita

    (@ciprian-ionita)

    10 years, 6 months ago

    Hi,

    You can use this code to center the header image:

    .advertica-image-post {
    text-align: center;
}

    And this one to center the navigation links:

    #logo {
    position: absolute;
}

.top-nav-menu.span8 {
    margin: 0;
    width: 100%;
    text-align: center;
}

#skenav .ske-menu, ul.menu {
    float: none;
}

#skenav .ske-menu .menu li, ul.menu li {
    float: none;
    display: inline-block;
}

    Thread Starter George Bright

    (@george-bright)

    10 years, 6 months ago

    Top one worked a treat – thanks very much Ciprian. Will make a note for the future.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Centering Header Image’ is closed to new replies.