• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Add Logo – Metro – Responsive?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Add Logo – Metro – Responsive?

This topic is: not resolved

Tagged: Logo, Metro, responsive

  • This topic has 13 replies, 5 voices, and was last updated 12 years, 10 months ago by Sasha Foust.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 9, 2013 at 1:38 pm #19270
    4WardMotion
    Member

    I would like to add a logo to my header instead of using the text.  How do I add a logo first off and secondly I would like it to be responsive so that it is centered when looking on a mobile phone or iPad.  Is there a tutorial out there on how to do this or can someone instruct me on how to do this?

    Thanks!

    Tyy

    February 9, 2013 at 9:20 pm #19312
    Derek
    Member

    In your admin dashboard go to  --->Appearance ----> Header and upload your logo.

    Now to make it mobile responsive, you will have to install Nick's plugin. It can be found on his blog:  http://designsbynickthegeek.com/plugins/genesis-responsive-header


    ~’;’~

    February 10, 2013 at 2:29 pm #19430
    4WardMotion
    Member

    Ok, I added the header image and now it just has a big red bar all the way across.  I am using the Metro theme with the red color.  Not sure why it is making it red.  The entire header is now red and is not showing my logo image.  Also, it is making the whole thing a clickable link.  Can I make it so just the logo is clickable?  Thanks for the help!

    Tyy

    February 10, 2013 at 4:05 pm #19457
    Derek
    Member

    When you upload your image in the header section, look at the bottom of that page and take the checkmark off  " Show header text with your image." since you don't want the text header no more and save settings. Your logo image ethat you uploaded and selected will be clickable.


    ~’;’~

    February 10, 2013 at 4:21 pm #19458
    4WardMotion
    Member

    I have done exactly as you said and it won't work.  It just makes the entire header red.  Not sure what is happening.  I have checked and unchecked the header text box and the only thing it does is reduces the size of the red area to the size of the header text.  Other than that it will not put my logo.  Seems like something in the theme's color template is overwriting it.  Any other ideas?  Thanks!

    Tyy

    February 10, 2013 at 4:27 pm #19459
    4WardMotion
    Member

    Ok, I just figured something out.  When choosing any of the color themes other than default is what is causing the problem.  When I chose the default color theme it works, except it makes the entire header clickable instead of just the logo.  This seems like it might be an error with the theme.  Any thoughts?

    Thanks!

    Tyy

    February 10, 2013 at 4:29 pm #19460
    Derek
    Member

    I'm going to upload my new logo image this week as I just hired a designer this morning. I still have the default text one showing but on the old genesis theme I had, I never ran into this issue.  I'll let a moderator or another member toss in some advice.


    ~’;’~

    February 10, 2013 at 7:31 pm #19491
    SmartEnergy
    Member

    I am having the same problem. I have this blue rectangle and I cannot put up the logo.

    February 11, 2013 at 6:09 am #19577
    craigdonnelly
    Member

    I am also having the same problem. If I use any color but the default color theme (I want to use green)... If I want to upload my own logo (no text in header)... I get a solid green bar in the header area.

    I am going to try to change the default color theme to green in the css.  Will come back and update.

    February 11, 2013 at 6:32 am #19582
    craigdonnelly
    Member

    Ok it worked. I changed the default metro theme color (#f96e5b) to the green color of my choice (#457E00). Just do a find and replace.

    If you want to upload your own header logo graphic file (jpg., png, etc...) and use a different color than the default metro theme color (which is currently set to pink (#f96e5b).... you need to modify the main css file... by changing the default color to the color you want to use.

    February 11, 2013 at 11:44 am #19641
    4WardMotion
    Member

    Thanks for sharing that fix.  I will go play with it and see what I can come up with.  One question I still have though is when I add the header image it makes the whole header as a link instead of just the logo.  Is there a way to change that.  Thanks!

    February 11, 2013 at 12:45 pm #19654
    Sasha Foust
    Member

    I am also having this problem with Metro. Can a moderator look into it and fix this problem? Even a quick CSS solution would be great.

    I feel something as fundamental as uploading a logo shouldn't be this hard.

    February 11, 2013 at 3:08 pm #19688
    4WardMotion
    Member

    Ok, I just got a reply directly from support regarding this problem and here is what they recommend.

    Look for:

    .header-image #title a {

    background: none;

    padding: 0;

    Change it to:

    .header-image #title a {

    background: none !important;

    padding: 0;

    I just tried this and it did fix the problem using one of the other themes color templates.

    I still need to find out how to only make the logo a link and not the whole header, but I guess one step at a time.  Hope this helps.

    February 12, 2013 at 2:28 pm #19899
    Sasha Foust
    Member

    Support wrote me this answer. Delete background color and add display block and text indent. Just need to fix the clickable area as well now...

     

    #title a {
    background: url(images/logo.png) no-repeat;
    display: block;
    line-height: 1;
    padding: 8px 16px;
    padding: 0.5rem 1rem;
    text-indent: -9999px;
    }

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble