Enlarge header image
Support Area › Forums › Bottega › Enlarge header image
- This topic has 9 replies, 2 voices, and was last updated 8 years, 12 months ago by Bill Robbins.
-
AuthorPosts
-
April 23, 2015 at 14:28 #29140Julie MillikenParticipant
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!
April 23, 2015 at 14:38 #29141Bill RobbinsModeratorHello Julie,
There are a few different ways you could go about changing the header height. Here’s one I would probably try first:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
#header { height: auto; padding-top: 20px; padding-bottom: 20px; } #logo { position: relative; float: left; }
- 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,
BillApril 27, 2015 at 13:28 #29204Julie MillikenParticipantThis reply has been marked as private.April 27, 2015 at 13:52 #29207Bill RobbinsModeratorHello 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
April 28, 2015 at 11:16 #29247Julie MillikenParticipantThank 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!April 28, 2015 at 11:29 #29250Bill RobbinsModeratorHello 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:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
@media only screen and (min-width: 1024px) { #navigation { margin-top: 57px; } }
- 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,
BillApril 30, 2015 at 12:19 #29314Julie MillikenParticipantThank 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.
April 30, 2015 at 13:59 #29320Bill RobbinsModeratorTo 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
April 30, 2015 at 18:47 #29332Julie MillikenParticipantThat did the trick! Thank you so much Bill.
April 30, 2015 at 19:11 #29333Bill RobbinsModeratorFantastic ?
-
AuthorPosts
- The topic ‘Enlarge header image’ is closed to new replies.