Adding a Logo in a Header

  • Author
  • #1344268


    Hi IT Team!

    I wanted to know, is it possible to add a Logo to my current header? The picture I would like to add is the Logo for the “Academic Council of the United Nations System”:

    And I would like to place it on the right hand side just below the Tabs.
    Also, is it possible to place this same logo as a “Widget” on the side?

    Many thanks,

    The blog I need help with is


    Hi there, take a look at this. You will see that the logo interferes with the menu above it. You can make the image smaller so that it doesn’t, but with the responsive design of your theme, you need to check and see what happens when you narrow and widen the browser window, and also look at it in a smart phone. The image shifts over and under the title of the site rendering it virtually invisible.

    #masthead {
    background: url("") no-repeat scroll right bottom transparent;

    One alternate suggestion would be to put the logo in an image widget at the top of the sidebar.

    Let me know what you think and if you have any further questions.



    Hi thesacredpath :)

    Yes you are right, it slightly overlaps with the tabs when I try the first option. I like the image widget option.

    Would it be possible however to place all the menu’s on the right hand side just underneath the header in a straight line, and then the logo wouldn’t interfere with anything.. if you get what I mean.

    Many thanks.


    Hi, give the following a try and see what you think. I’ve tightened up the spacing between the menu items a little so it should display as a single line when the theme is at maximum width, and it seems to flow nicely when you narrow the browser window without causing any overlap. If you use this, in the background declaration for the logo image on right, change “right bottom” to “right top”. If you add more items to the top level of the menu, they will break and go to additional lines like they were doing before.

    #masthead {
        max-height: 200px;
        position: relative;
    .main-navigation {
        position: absolute;
        bottom: 0;
        right: 0;
    .main-navigation a {
        padding-right: 5px;
        padding-left: 5px;

    Let me know what you think.



    Is there a way to search for themes that allow a logo? I’ve been scrolling through the premium ones and only a few have a LOGO tab.

    When I search for logo – nothing happens.




    Please do not hijack thread and post off-topic stuff into them. Click this link and start your own thread >



    How I am off-topic and hijacking is beyond me @timethief. I’m new to using this and this topic was about getting a logo onto a header, which is what I’m trying to do. Didn’t mean to ruffle feathers. Tough crowd.



    All CSS editing is theme specific.
    This thread is a CSS Forum thread.
    The theme being CSS edited in this thread is SuperHero
    Your theme is Ideation and Intent.
    You have not purchased a custom design upgrade and are not editing CSS.
    I gave you the link above to create a Support Forum thread for your unrelated to CSS editing issue.
    Please use it now.


    @garnertree, the themes aren’t really tagged with “logo” as a keyword if they have a space for one, probably partly because an image area doesn’t necessarily have to be a logo. Also, you can add a logo to any header using CSS if you purchase the Custom Design upgrade.

    This page has several examples from the forums showing how to add a logo to any header with CSS:

    If you wanted free options, one possible way to add in a logo would be to just incorporate it into the header image itself. Many of the themes have support for custom header images. Here is a list:

    As you can see, Grid Focus is the only one with a pretty small predefined square space that you might consider a logo upload area. Other themes that have flexible listed for both width and height might have a nice pre-setup space for a logo. Here are a couple examples:



    Wow! Lot of comments :)

    @Thescaredpath, thank you very much! It works perfectly. I appreciate it. I am just wondering however, now that you have squeezed the menus together more tightly, does this mean it wouldn’t be possible to create another menu? Because our Femicide Project was thinking of including another Menu with “Research/Get Involved” (not sure yet.)



    TSP meant he decreased the space between the menu items. This has nothing to do with how many menu items you can add. If you add more, they will show in a second line, because at the moment the menu takes up the right half of the header area. And actually your menu items already show in two lines if one views your blog in a lower resolution screen or mobile device: drag the browser window to make it narrower and see for yourself.

    In another thread you had asked how to make the menu items white and reposition them. I have replied to this but it seems you ignored it:

The topic ‘Adding a Logo in a Header’ is closed to new replies.