• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / Programming / WordPress / Child Themes / Change Logo Size in Genesis Themes

Change Logo Size in Genesis Themes

By Victor M. Font Jr.
August 29, 201519 Comments

Public domain image from pixabay.comA common modification made to Studio Press Genesis Framework powered themes is changing the size of the logo to fit a specifically sized image. The following example is based on the Streamline Pro theme, but the process can be applied to *any* Genesis theme by Studio Press.

The first step is to change the image size in functions.php. Find the following code block:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header_image'    => '',
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 60,
	'width'           => 300,
) );

Change it to:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header_image'    => '',
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 300,
	'width'           => 300,
) );

This change allows you to upload a 300×300 image through the theme customizer. Next you have to change the size of the image in the header in style.css. Find the following code:

.header-image .site-title a {
	float: left;
	min-height: 60px;
	width: 100%;
}

Change it to:

.header-image .site-title a {
	float: left;
	min-height: 300px;
	width: 100%;
}
  • 4shares
  • Facebook0
  • Twitter0
  • Pinterest4
  • LinkedIn0
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Claudio Barragán

    December 30, 2017 at 8:36 am

    Hello,

    The reason for this comment is to ask you for advice on a topic that is delaying the launch of my website. It turns out that in the mobile and responsive version of the web (that use the Streamline theme), when you open the pull-down menus the letters appear in a light grey on orange background, something very difficult to read. I’ve tried to find the CSS to modify it and nothing. I don’t know where the CSS of the mobile version is, apparently in the main block of code of the web is not. I have tried with more than ten plugins to modify the appearance of my web in mobile devices and tablets with a resounding failure (I would also like the logo of the mobile version to be another).

    In short, the topic is devouring my hours, delaying the launch of the site and bringing me frustration. Any advice you can give to me is welcome. Thank you so much for your time and attention.

    Greetings.

    Reply
    • Victor M. Font Jr.

      December 30, 2017 at 9:03 am

      Responsive CSS is contained in the style sheet’s media queries. The fastest way to solve your problems is to learn how to use your browser’s built-in inspection and mobile simulation tools. You will be able to see all of the CSS that is rendered for the various displays and experiment with changing things non-destructively. Perhaps this will help: How to Use Your Browser’s Inspect Tool

      Reply
  2. Helene Goldberg

    May 25, 2017 at 4:55 am

    Hi Victor,

    I’m trying to change my header image size to 720px x 140px on the Monochrome Pro theme, and I think I’ve done the right things, as you’ve said, but it’s still showing as a small image.
    I’d really appreciate it if you could take a peak at my site for me, and perhaps let me know where I’ve gone wrong.
    Thanks so much!

    Reply
    • Victor M. Font Jr.

      May 25, 2017 at 8:17 am

      You have the width of the title area fixed at 133px in the CSS for .header-image .title-area at line 1293 in style.css. The height of the area is also fixed at 50px.

      To fix this, change the CSS to this:

      .header-image .title-area {
      height: 140px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      padding: 0;
      width: 720px;
      }

      If you haven’t done so already, I suggest you read this article: Learn How to Use Your Browser’s Inspect Tool

      Reply
  3. Bruce McMinn

    May 16, 2017 at 4:29 am

    I’m using genesis sample and trying to get my friend’s website looking nice. He wants to use a B&W image with his business name as his header. This image at the site now is just a place holder.

    Another site with a image that appears to work the way I’m looking for that I think also uses genesis sample is the home page for the cuyamungueinstitute.com

    Additionally the image should run edge to edge or close to it. I can make the background color match if it doesn’t all sit perfect.

    Reply
  4. Christina

    April 21, 2017 at 11:03 am

    Hi Victor,

    I am using Daily Dish Pro and still having issues with my logo. It is still constrained as a small centered image. I have tried different resizes and photos and still having the same issue. These are my php and css codes that I currently have for my logo sized at 800 x 340:

    // Add support for custom header.
    add_theme_support( ‘custom-header’, array(
    ‘flex-height’ => true,
    ‘header_image’ => ”,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 340,
    ‘width’ => 800,
    ) );

    .header-image .site-title > a {
    background-position: center !important;
    background-size: contain !important;
    display: block;
    height: 340px;
    margin: 10 auto;
    max-width: 800px;
    }

    Reply
    • Victor M. Font Jr.

      April 21, 2017 at 11:50 am

      Please provide a link to the site so I can take a look. The code is not helpful in this case.

      Reply
    • Christina

      April 21, 2017 at 2:19 pm

      http://www.babemadeblog.com

      Reply
      • Victor M. Font Jr.

        April 21, 2017 at 2:25 pm

        I looked at your site and the image is displaying at 800×340. The image is very blurry and is not centered. You may want to add margin: 0 auto; to .header-image .site-title > a to center the image.

        Reply
  5. Maria Jose

    March 20, 2017 at 1:13 pm

    Hello! Thanks for the info! Im working on Foodie Pro, and though I change the dimensions of the header, my logo is still constrained to a small middle area of the header area! My site is http://www.micorazondearroz.com! Please help, I’m going crazy with this!

    Reply
    • Victor M. Font Jr.

      March 20, 2017 at 1:29 pm

      You have CSS that is forcing the width to be 1140px while reducing the height to 200px. You have to keep the height and width proportional. Change the CSS at line 1666 in style.css to the following and it will make your logo appear correct.

      .header-image .site-header {
      background-position: center !important;
      background-size: 472px 200px !important;
      }

      Reply
  6. ed rosenthal

    March 2, 2017 at 1:34 pm

    one thing to add – is that modifying the style sheet may not override what the theme is doing – so add the code directly into the css portion of the customizer. that takes care of the puzzling problem of the header not conforming to the min-height issue i was having. thanks, ed

    Reply
    • Victor M. Font Jr.

      March 2, 2017 at 1:39 pm

      I appreciate the comment, but the style sheet IS what the theme is doing. If you are having problems seeing changes in your style sheet it is likely due to caching or inserting code before the style sheet’s delivered CSS.

      Reply
  7. dawn

    February 5, 2017 at 12:56 pm

    Thanks for this victor. Really appreciate it.
    -dawn

    Reply
  8. Tom Murphy

    January 6, 2017 at 9:35 am

    Doing what you have shown how to do has always been a challenge with these, and other, themes. Thanks for the information. Got me pointed in the right direction and made it easy for me to make my client happy without spending hours trying to find the right CSS to change. By the way, I am using the Going Green theme. In that theme the parameters to change in style.css are in /* Title Area :

    .title-area {
    float: left;
    padding: 0;
    width: 360px;
    }

    .header-image .title-area {
    height: 187px;
    padding: 0;
    }

    Reply
  9. Kay

    November 17, 2016 at 9:58 am

    Thanks Victor for this guide. It truly works pretty easy and smooth.

    Reply
  10. rohit

    April 8, 2016 at 1:21 am

    Hello, great information you have given, i try but it didn’t work on genesis child theme. Can you tell me why?

    Reply
    • Victor M. Font Jr.

      April 9, 2016 at 8:22 am

      You must have changed the code in the wrong place. If you followed these directions, it does work on a Genesis child theme. This is the only way to change logo size in a custom header. Did you change the code to the child theme’s functions.php? Please post a link to your site.

      Reply
      • Patrick

        March 13, 2017 at 1:30 pm

        I’ve had the same issue on my genesis child theme. I’ll post a link if you’re able to respond.

        Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page