Enlarge header image

[Julie Milliken]

My client would like the header twice its current size – they want it to look similar to this site found on your site – http://www.thejuicejoint.com Thank you!

[Bill Robbins]

Hello Julie,

There are a few different ways you could go about changing the header height. Here’s one I would probably try first:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header {
   	height: auto;
   	padding-top: 20px;
   	padding-bottom: 20px;
   }
   
   #logo {
   	position: relative;
   	float: left;
   }
   

3. Update your settings.

You can change the padding-top and padding-bottom in the snippet above to make the header taller or shorter to fit your needs.

Let me know if you have any questions,
Bill

[Julie Milliken]

This reply has been marked as private.

[Bill Robbins]

Hello Julie,

I took a look at your Custom CSS. It looks like these two styles are running together:

#header {
	border-bottom: 3px solid #fff;
#header {
	height: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

Try changing them to be like this:

#header {
	border-bottom: 3px solid #fff;
}
#header {
	height: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

Let me know if you run into any trouble there.

Bill

[Julie Milliken]

Thank you! Now I see where it was just missing a little bit. How do I get the header to look just like http://www.thejuicejoint.com? I see that now I’ve put in the correct css, the menu and phone number have all moved up too.

Second question – maybe it’s on the forum, but there is a lot of space below the slider above the buttons – how do I lessen the amount of space there?
Thank you SO much!

[Bill Robbins]

Hello Julie,

You can move the phone number and navigation menu around if you’d like to. In the theme options page on the header tab there are two fields for the phone number’s position. You can use them to position it from the top and right edges of the header.

You can also move the navigation menu around this way:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (min-width: 1024px) {
   
   	#navigation {
   		margin-top: 57px;
   	}
   
   }
   

3. Update your settings.

Just adjust the 57px in the snippet above to change the vertical position of your navigation menu.

The Juice Joint actually uses an image in the header to create what you see there. Everything except for the navigation menu is part of the “logo” image. You can click on it and drag it to your desktop to see what it looks like in more detail.

Let me know how it goes,
Bill

[Julie Milliken]

Thank you so much! This makes a lot of sense-duh!
So now that I’ve got my custom header in – I possibly have some CSS that has moved my top navigation menu up too high. I can’t figure out how to put it back where it was just above the slider.

And I can’t seem to remove the words “Back on the Rack” on top of the image I uploaded. Thanks for your help again Bill.

[Bill Robbins]

To move the navigation menu further down, adjust this in your Custom CSS:

@media only screen and (min-width: 1024px) {

	#navigation {
		margin-top: 27px;
	}

}

You’ll need a larger top margin to move it down further. Experiment with that value just a bit and see if you can get into place there.

The text over the header background image is from a missing image file. Switch to the text logo option and then add this to your custom CSS:

#text-logo {
	display: none;
}

That should take care of that too. Let me know if you have trouble.

Bill

[Julie Milliken]

That did the trick! Thank you so much Bill.

[Bill Robbins]

Fantastic ?

[Author]

Posts