• 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

increase header size wellness pro

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 › Design Tips and Tricks › increase header size wellness pro

This topic is: not resolved
  • This topic has 7 replies, 3 voices, and was last updated 3 years, 8 months ago by mat3d.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 24, 2019 at 5:49 am #489697
    chris_phdfr
    Participant

    Hi,

    I would like to increase the size of the header logo. I uploaded an image and the logo is displayed at 300 X 80 pixels.

    this is what i read in the set up docs Images of exactly 600?—160 pixels will give the best results. Other sizes will be cropped in the upload process to create an image of the correct size. Also, the header image is double the display size so it will appear crisp on a retina screen. Though the upload size is 600?—160 pixels, the image will be displayed at 300?—80 pixels.

    I read one post on the forum about it but it does not really work.

    I tried to check the PHP file to see if i could simply change the values. ( i admit i only looked for the value 300 or 80 as i don't really know how to code in PHP)

    I only found the value 600 and 160, I changed it to see if it would change the display size, it did not and it was still at 300X 80 px.

    i just want to increase the header logo size from 300 X 80 px to like 400 X 90 px for instance...

    any ideas how i could do it easily?

    thanks a lot in advance,

    regards,

    chris

    February 24, 2019 at 6:13 am #489699
    chris_phdfr
    Participant

    hi,

    ok, I was so focused on PHP that I did not think of tweaking the sizes with CSS. I managed to do it by customizing the css stylesheet. ( I added the code in the wordpress css customizer)

    This is what I did in case someone has the same question.

    .header-image .site-title > a {
    min-height: 90px;
    }

    .header-image .title-area {
    max-width: 400px;
    }

    hope that helps

    regards,

    chris

    September 10, 2019 at 4:38 am #493482
    mat3d
    Member

    Hi and thanks for the tip.

    It works, however the logo appears blurry. It looks like the code increases the size from 300x80 rather than using the full size of image (600x160).

    Anybody has any idea how to solve this? I had a look at the function.php and style.css but it's a bit different than what I remember.

    I'm using Wellness Pro version 4.0.0

    Many thanks.

    Mat

    September 11, 2019 at 6:10 am #493498
    mat3d
    Member

    Sorry meant version 1.1.4

    September 11, 2019 at 7:02 am #493499
    mat3d
    Member

    Right so it looks like I found a solution:

    The default size for the header image is 600x160. I've changed these values in the function.php file to 900x240:

    // Add support for custom header.
    add_theme_support( 'custom-header', array(
    'width' => 900,
    'height' => 240,
    'header-selector' => '.site-title a',
    'header-text' => false,
    'flex-height' => true,
    ) );

    Then I changed the values in style.css to 450x120:

    .header-image .title-area {
    margin: 0 auto;
    max-width: 450px;
    padding: 0;
    }

    .header-image .site-title > a {
    background-position: center !important;
    background-size: contain !important;
    float: left;
    min-height: 120px;
    width: 100%;
    }

    This way the logo appears sharp on both my iPhone 7 plus and my MacBook retina display.

    I'm not sure if this is the best workaround but I'll leave it here in case somebody else stumble upon the same problem.

    September 13, 2019 at 5:07 pm #493553
    snatal8
    Member

    Thanks for posting this! I just had the same question!

    September 18, 2019 at 8:50 am #493612
    snatal8
    Member

    I'm wondering if you noticed when you increased the logo that it didn't work on all browsers. I'm having this issue. I increased the size of the logo and it looks great in Firefox but it didn't enlarge in Chrome or Safari.

    Any suggestions?

    September 28, 2019 at 2:10 am #493757
    mat3d
    Member

    Hmm I'm not sure what the problem could be, mine looks fine on the three browsers.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘Design Tips and Tricks’ 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

© 2023 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