Company Logo

  • urbanela · Member ·

    Is there a way that I can put my company logo in the upper left hand corner without it exploding giant on the middle of the home page? I would like the logo to automatically appear on every page that I create in the same area. Is this possible with a CSS perhaps?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • madeincosmos · Member ·

    Hi there,

    Try the following CSS to move your logo to top left corner and decrease the font size a bit. Feel free to manipulate the font-size value to achieve the perfect result:

    @media screen and (min-width: 768px) {
}    .site-branding {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        margin: 1.538em;
        font-size: 0.7em;

    }

    .site-description {
        font-size: 1em;
    }
}

    Note that this code will change the logo on all pages, including the home page. If you’d prefer to keep the original home page and change the logo on subpages only, add the following:

    @media screen and (min-width: 768px) {
    .home .site-branding {
        position: relative;
        font-size: 1em;
    }

    .home .site-description {
        font-size: 1.6rem;
    }
}
  • urbanela · Member ·

    So add both CSS codes if I want it on the sub pages only or just add the second one?

  • madeincosmos · Member ·

    Sorry for not making it clear, you will need both codes for that.

  • urbanela · Member ·

    1) It’s way too big, even when I adjust the font size…
    2) It still keeps it on the home page with both codes…
    3) It takes my company name and tagline in addition with the logo to the top left corner…

    Help… =)

  • madeincosmos · Member ·

    Sorry, but I am not sure if I understand you correctly. Can you please help me and confirm whether:

    1. The title ‘Urbanella’ should be visible on the home page? Should it be in the middle or in the top left corner?
    2. The subtitle ‘Portugese Modern Design’ should be visible on the home page?
    3. The title ‘Urbanella’ should be visible on subpages (as I understand, the answer is yes and it should be placed in top left corner, is that right)?
    4. The subtitle ‘Portugese Modern Design’ should be visible on the subpages?
    5. Are there any other modifications you would like to apply?

    With the answers to all of those, it will be easier to send you the final source code version working exactly as intended :)

  • urbanela · Member ·

    1 & 2: Urbanela and the tagline should both be visible in the middle of the homepage, exactly as it is now.

    3 & 4: No

    5: I have a company logo image that I would like in the upper left hand corner of all sub pages without the homepage name and tagline. I don’t want my company name and tagline to be listed twice on the sub pages, does that make sense?

  • madeincosmos · Member ·

    Thanks for your explanation, everything is clear now :) The logo image was not visible on your template, so that’s why I thought you could be talking about the title instead.

    Here is the code that will:
    – Hide the title and tagline on all subpages (and leave it on the main page only),
    – Hide the logo on main page,
    – Show the logo on all subpages in top left corner,
    – resize it to 150px.

    @media screen and (min-width: 768px) {
    .site-branding {
        display: none;
    }

    .home .site-branding {
        display: block;
    }

    .home .site-header img {
        display: none;
    }

    .site-header img {
        position: absolute;
        top: 0;
        left: 0;
        margin: 1.538em;
        width: 150px;
        height: auto;
    }
}

    You can adjust the logo size by changing the width value.

    I hope I understood everything right this time, let me know in case I didn’t ;-)

  • urbanela · Member ·

    We are almost there…

    1) It shows it on my preview but not when I go on the actual website
    2) On my preview it shows it on the home screen still

  • urbanela · Member ·

    Also, I have one more thing that I need help on if you’re available?

  • madeincosmos · Member ·

    Can you please make sure that you saved all the changes on your page template? If the logo shows on the preview and not on the actual site, perhaps all you need is to click ‘Save & Publish’ again.

    Also, I have one more thing that I need help on if you’re available?

    Sure, go on :) I’ll see what I can do.

  • urbanela · Member ·

    Yes, it’s saved… it won’t let me save and publish again because it’s already saved…

  • urbanela · Member ·

    Maybe I should delete and repaste, let me try that

  • urbanela · Member ·

    Hmmm, still not showing up on the webpage…

  • madeincosmos · Member ·

    OK, now I see what the problem is. Just wait a minute and I will paste updated source code.

  • madeincosmos · Member ·

    Try using this one instead:

    @media screen and (min-width: 768px) {
    .site-title, .site-description {
        display: none;
    }

    .home .site-title, .home .site-description {
        display: block;
    }

    .home .site-header img {
        display: none;
    }

    .site-header img {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        margin: 1.538em;
        width: 150px;
        height: auto;
    }
}
  • urbanela · Member ·

    Perfect, thank you so much! I posted my other question in a forum and Kathryn is already helping me.

    Thanks again!

  • madeincosmos · Member ·

    I’m glad it finally works. Have a good weekend!

  • urbanela · Member ·

    Hi Made,

    Wondering if you could help me with some further trouble shooting when you have a chance? I posted 3 days ago but have not heard from anyone. Let me know if you can help. Below is the link to the forum topic.

    https://en.forums.wordpress.com/topic/background-sub-page-color-font-color?replies=1

    Thanks!

    Mel

  • urbanela · Member ·

    Hi Made in Cosmos,

    I just realized that my logo is showing up on the cell phone version, it looks good on the computer and ipad versions but not the cell phone. How can we fix this so that the logo is also hidden on the homepage for the cell phone version?

1 2
  • The topic ‘Company Logo’ is closed to new replies.