• 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

Changing Header Height in Infinity 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 › Changing Header Height in Infinity Pro

This topic is: not resolved

Tagged: front page 1, image height, Infinity Pro

  • This topic has 19 replies, 3 voices, and was last updated 5 years, 6 months ago by designerwriter.
Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • August 30, 2017 at 11:02 pm #210946
    designerwriter
    Member

    How do I change the Header height in Infinity Pro? I would like to make it perhaps 150 or 160 instead of 130. Do I change it on the functions page and in the CSS? If so, where? I am not sure why the menu is not lining up and is centered with the large title The Healing Art of Shiatsu. It went off center when I added the header image which was the correct size 400 x 130. But when I just use a font and not an image, the menu does line up with the main title The Healing Art of Shiatsu.

    If I change the height of the header, do I have to change the height of anything else in this top section? Thanks in advance.

    Here is my website in progress.

    http://shiatsu.eagleheartdynamic.com/
    August 31, 2017 at 3:02 am #210951
    Brad Dalton
    Participant

    Hello

    You can do this simply by modifying the CSS. Please inspect the element to find the CSS rule which controls the height of front-page-1 and modify it.


    Tutorials for StudioPress Themes.

    August 31, 2017 at 7:00 am #210960
    Erika
    Participant

    Hi designerwriter,

    Could you take the maintenance sign on your website down?

    August 31, 2017 at 7:52 am #210967
    designerwriter
    Member

    Ok I took the maintenance sign down.

    August 31, 2017 at 7:53 am #210968
    designerwriter
    Member

    But Brad don’t I also have to change it on the functions page?

    August 31, 2017 at 8:00 am #210969
    Brad Dalton
    Participant

    For the site header, yes.

    add_theme_support( 'custom-header', array(
    	'width'           => 400,
    	'height'          => 130,
    	'header-selector' => '.site-title a',
    	'header-text'     => false,
    	'flex-height'     => true,
    ) );
    

    Tutorials for StudioPress Themes.

    August 31, 2017 at 8:17 am #210971
    designerwriter
    Member

    Someone else I asked said not to change the size of the logo so that it appears properly on mobile devices. So ok I may not change the size of the header now but why is the menu not centred with the large heading like in the demo? https://my.studiopress.com/themes/infinity/#demo-full

    August 31, 2017 at 10:32 am #210974
    designerwriter
    Member

    For the benefit of others, here the response from StudioPress re the changing of the header and centering the menu:

    Adjusting header image size consists of two main steps:

    1. First, you'll need to change the default header image upload size, from theme's "functions.php" file:

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

    Feel free to adjust the width and height values, as needed. Once done, you'll be able to upload your header image in new size.

    2. Next, you'll also adjust width and height values in following code blocks in theme's style.css file, to match the new image size:

    line# 1215:

    .header-image .title-area {
    margin-bottom: 20px;
    margin-top: 20px;
    min-height: 65px;
    padding: 0;
    width: 200px;
    }

    line# 1240:

    .header-image .site-title > a {
    background-size: contain !important;
    float: left;
    min-height: 65px;
    width: 200px;
    }

    To control the placement of menu in header, you'll be able to control it by adjusting width value in code block at line # 1364:

    .nav-primary {
    float: left;
    margin-top: 2px;
    text-align: center;
    width: 60%;
    }

    Now, after reading this message, I changed only the width of the primary nav menu to 100% and it centered but then it dropped about 2 inches so now it’s too far from the logo and it’s not level. I haven’t even changed the header yet because I want to get this menu issue sorted out first because it’s bugging me the most.

    Anyone have any ideas on how I can fix this now? I suspect it has to do with affecting some other code number elsewhere but I have no idea where to look!

    Grace

    August 31, 2017 at 11:49 am #210980
    Erika
    Participant

    What we need to do is return to the original code and start over at this point. What I gather from your initial post is that you want the menu to be centered with the logo image after you upload it, correct?

    If this is so, I recommend you delete everything in your CSS file on the site and copy in the original code from the theme CSS file on your computer (hopefully you haven't made too many custom changes, but it doesn't look like it). Afterward, upload the logo image you have. I can then guide you on how to center the menu to it. Doing it this way will prevent you from having to change the image logo size itself and making it smaller.

    August 31, 2017 at 11:58 am #210981
    designerwriter
    Member

    What we need to do is return to the original code and start over at this point. What I gather from your initial post is that you want the menu to be centered with the logo image after you upload it, correct?

    Yes.

    I haven’t made too many changes but I cut and paste the code that I did change with the original and the changes in a table.

    Ok I will do it re uploading CSS and be right back. Thank you Erika. I have wasted all morning on this menu centering.

    August 31, 2017 at 12:10 pm #210982
    designerwriter
    Member

    Ok done Erika. I reuploaded the CSS.

    August 31, 2017 at 12:50 pm #210983
    Erika
    Participant

    Awesome! So I've taken a look at the site. I see you have uploaded the logo and the menu is centered. Do you want to make the logo bigger and keep the menu centered to it?

    August 31, 2017 at 12:54 pm #210984
    designerwriter
    Member

    The menu is not centered. It’s over to the left of the title. This is the problem and I want to increase the depth in the header and menu area. I can leave the logo as is if it’s going to cause problems.

    August 31, 2017 at 12:56 pm #210985
    Erika
    Participant

    Oh wait, I can see how the menu is not centered to the page, although it is in line with the logo. If you want to center the menu to the page, find the code below and make the change that's in bold:

    .genesis-nav-menu {
    clear: both;
    line-height: 1;
    width: 111%;
    }

    You can adjust the number to how you like it.

    August 31, 2017 at 12:58 pm #210987
    designerwriter
    Member

    Ok brb. A question...why 111%.I haven’t tried changing anything on this code before. This is what I thought...that there was another code number that I had to change.

    August 31, 2017 at 1:05 pm #210989
    Erika
    Participant

    111% made the menu look centered to me on the page. You may find it looks better with a different number. This is the only code I would recommend changing. No PHP if you like how the logo is now.

    August 31, 2017 at 1:08 pm #210990
    designerwriter
    Member

    The menu is centered in Chrome but it’s a bit off in Safari and I emptied the cache. Can you check it for me?

    August 31, 2017 at 1:14 pm #210992
    designerwriter
    Member

    Now if I decide to change the logo size, what size can it be? 400 x 150 or 160? This won’t mess anything else up will it? Also, I want to increase the depth of the area on top.

    In the previous CSS, I changed the values to get the depth in the header and menu area (see in bold). Is this correct?

    .header-image .title-area {
    margin-bottom: 20px;
    margin-top: 20px;

    min-height: 65px;
    padding:0;
    width: 200px;
    }

    .genesis-nav-menu a {
    color: #000;
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 47px 10px 10px;
    text-decoration: none;
    text-transform: uppercase;
    }

    August 31, 2017 at 1:36 pm #210994
    designerwriter
    Member

    I think it’s a bit tight up top. Can I change a number that would give it more room?

    August 31, 2017 at 2:10 pm #210995
    designerwriter
    Member

    I also want to change the size of the menu words. They are too small. That’s doable without shifting anything right?

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 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