Changing Header Height in Infinity Pro

[designerwriter]

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/

[Brad Dalton]

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 & WooCommerce.

[Erika]

Hi designerwriter,

Could you take the maintenance sign on your website down?

[designerwriter]

Ok I took the maintenance sign down.

[designerwriter]

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

[Brad Dalton]

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 & WooCommerce.

[designerwriter]

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

[designerwriter]

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

[Erika]

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.

[designerwriter]

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.

[designerwriter]

Ok done Erika. I reuploaded the CSS.

[Erika]

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?

[designerwriter]

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.

[Erika]

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.

[designerwriter]

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.

[Erika]

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.

[designerwriter]

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?

[designerwriter]

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;
}

[designerwriter]

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

[designerwriter]

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

[Author]

Posts