How to re-size header to fit logo.

  • 2
  • Question
  • Updated 8 years ago
  • Answered
Hi all,

How do I re-size the header area?

Can someone tell me how to put the website menu next to my logo. Take a look at my website and see what I mean.

I want the logo and menu to be next to each other as I have a huge gap where the logo is.

Many thanks
Tanya

http://www.simplytealightful.co.uk
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 2
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hello Tanya,

I am not sure if this is really possible to set up. It is possible to make your logo smaller but to put this beside your menu is most likely not possible. I'm sorry. I wish I had better news for you.

If you wish to make your logo smaller, please let me know and I can assist further.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Tanya,

If you have Yola Silver, add this code to your Site CSS:

div.sys_navigation {
margin:0 auto;
position: relative; top: -100px; left: 155px;
width:75%;
line-height:2.0;
padding:6px 13px;
voice-family: "\"

}

If you don't have Silver, add the following to an HTML widget on your page:

<style type="text/css">
div.sys_navigation {
margin:0 auto;
position: relative; top: -100px; left: 155px;
width:75%;
line-height:2.0;
padding:6px 13px;
voice-family: "\"

}
</style>

You may have to adjust the numbers for the top and left. Let me know how this goes.
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Thanks Diane for coming to the rescue!
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Thanks Diane. It worked lovely. But I now have a blank bar underneath. How do I remove it?

Thanks again.

Tanya
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Tanya,

I am not sure when Diane will be on next. So, I am currently looking into this to see how this can be done. Thanks for your patience!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
That bar is due to the header image repeating itself to adjust for the changes and effectively took the place of the banner image when you pulled the menu up.

Original header image:
http://www.simplytealightful.co.uk/te...

Banner image:
http://www.simplytealightful.co.uk/re...

Give this a try:

1) Right click and open the following edited and taller header image then save the larger sized image to your computer.



2) Upload that image to your file manager.
3) Use the following in your CSS overrides:

#header {
background: url(templates/Music/resources/header2.jpg);
position: relative;
}

OR If you don't have Silver, add the following to an HTML widget on your page:

<style type="text/css">
#header {
background: url(templates/Music/resources/header2.jpg);
position: relative;
}
</style>

It may need a few tweaks but I will not know that until you follow above and publish your site to see what needs to be done.

Happy site building
Ed

If the lady bears don’t find you handsome they should at least find you handy...Don't forget to share the bear....

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Thanks Ed,

Thanks for your help.
I'm a little stuck. Take a look please at my site and see that it is all one size but has no image. www.simplytealightful.co.uk

I uploaded the edited and taller header to my file manager and changed the css overrides but I don't know how to put the image in

All help is much appreciated.
Tanya
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
My bad.... Soooo bad...

It was supposed to be:

#header {
background: url(resources/header2.jpg);
position: relative;
}

and NOT

#header {
background: url(templates/Music/resources/header2.jpg);
position: relative;
}

I kinda was busy with a project and failed to catch the removal of "templates/Music/" to make the change find the new and taller image.

Just add the first one from above to your CSS overrides and I think it should work.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
PS. You didn't follow step 1 from above and right click to view and save the larger image. You saved the smaller one that the forum uses to show the picture. (maybe I should have made it clearer to open the image in a new tab/window and then save) ;)

Save the following image here as it is the direct link to the larger image that you should use: http://s3.amazonaws.com/satisfaction-...

Upload that larger image to your file manager and then and then use:

#header {
background: url(resources/header2.jpg);
position: relative;
}

Wiping sweat from brow...
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Hey Ed,

I think I'm a super numpty... I've saved the larger image to my file manager and used the new css override, but the image background isn't showing.

What am I doing wrong?!!!

Wipes tear from cheek...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Don't worry be happy now... ;)

It could be either that you have a tick in the "Disable Site CSS overrides" in your CSS overrides editor

OR

That you didn't republish your website as I still see

#header {
background: url(templates/Music/resources/header2.jpg);
position: relative;
}

in your source code which tells me that you either didn't republish or that you didn't paste

#header {
background: url(resources/header2.jpg);
position: relative;
}

into your CSS overide editor yet.

As I cannot find the larger image in your file manager http://www.simplytealightful.co.uk/re... I can only assume that you didn't republish yet.

Passes tissues saying... "It'll be okay"
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
I am heading for despair. Here is what I've done;

1) I opened the taller header image in a new tab.
2) I then saved it to my computer and uploaded it into my file manager
3) I then copied and pasted this code

#header {
background: url(resources/header2.jpg);
position: relative;
}

into the edit custom CSS making sure the override wasn't ticked. The preview then showed a blank header background with my logo and menu.

4) I then published it and this is the result www.simplytealightful.co.uk (no
taller header image).

Please, please tell me why is it not working?? What AM I doing wrong??
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Tanya

I just checked your source and still see the wrong image filename and when I check the correct image URL it shows as not there.

I can only assume that maybe the site wasn't republished. Could you be a dear and do that one more time. ;)

Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Hiya Ed,

I've republished the site but it's still not changed. I've also tried changing the CSS manually but I can't seem to do that either. I bet it's probably something really simple and with your help I'm learning lots. I won't be giving up.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Tanya,

Another way to do it is to add this code:

For Silver:

#header { background: url(http://s1.yolacdn.net/V0021812/templa...;
background-repeat:no-repeat;
position: relative;

}

#content { border: 1px solid #f0d6c1;
background: #fff;
margin: -100px 10px 10px 10px;
padding: 10px 25px;

}

For Non-Silver:

<style type="text/css">
#header {
background: url(http://s1.yolacdn.net/V0021812/templa...;
background-repeat:no-repeat;
position: relative;

}

#content {
border: 1px solid #f0d6c1;
background: #fff;
margin: -100px 10px 10px 10px;
padding: 10px 25px;

}
</style>
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Diane

background-repeat:no-repeat; using the original image will set the bottom of the (original) image between her logo and the menu because the image is 135 pixels tall

That is why I vertically stretched the image to be 207 pixels tall and with the:

#header {
background: url(resources/header2.jpg);
position: relative;
}

referencing the new (File manager) location of the taller image will hopefully place the bottom of the new image at just under the menu and not between the logo and the menu. This would be done without the need to use a background-repeat:no-repeat;
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Not if she moved her menu using the code I gave her above. Yes, if she keeps her menu as originally positioned.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Do you have any idea what style that is?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Radiant Music
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Thanks for that... My head hurt and I couldn't think straight. Not a good sign I would imagine. ;) You alleviated my headache by telling me which style... A little...

http://honeybearplayhomes.yolasite.com/



That stretched image turned out pretty spot on in height.

Tanya if I were you I would take a breath and try that one more time.

Maybe it is as simple as republishing your site to let the CSS overrides take effect.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Diane The menu placement does nothing to change the background images height as that is only controlled by the #header CSS. Even if you were to change the top variable to move the menu above what was the original shorter images bottom edge the repeat still takes effect. The "div.sys_navigation" padding does not like a negative variable and we are still left with the same outcome.

In my opinion the easiest way to make it all work like she wanted was to make the header image taller.

Sadly, background-repeat:no-repeat; did nothing in this instance.

Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
OK guys, so I'm getting the hang of CSS and have managed to tweak my website a bit. www.simplytealightful.co.uk I am now stuck on the pink space under the header and I don't know how to move menu2 over. What code would that be so I can change it?

Thanks all!
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Hey Ed,

I wanted to give you a star for all your good answers, but there doesn't seem to be an option for you so here's my alternative *
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
My code worked for me.

Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Diane,

How did you do that?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Wow Diane, that looks amazing!

Tanya, once this is working on your website we'd love for you to submit it to: support@yola.com if you'd like to see your website featured on our blog.
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Hey Laura,

I would love to do that, as soon as my website is working.
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Hi Laura,

How do I submit my website to feature on your blog?
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Tanya,

Please send us an email to support@yola.com and we have this directed to the relevant person in the company.

We look forward to your submission!
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
You guys are totally awesome. But I'm still none the wiser. :(
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
You said before that the first code I gave you for moving the menu worked? If so, then add the following the same way.

For Silver add:
#header { background: http://s1.yolacdn.net/V0021812/templa...;
background-repeat:no-repeat;
position: relative;

}

#content { border: 1px solid #f0d6c1;
background: #fff;
margin: -100px 10px 10px 10px;
padding: 10px 25px;

}

For Non-Silver add:

<style type="text/css">
#header { background: http://s1.yolacdn.net/V0021812/templa...;
background-repeat:no-repeat;
position: relative;

}

#content { border: 1px solid #f0d6c1;
background: #fff;
margin: -100px 10px 10px 10px;
padding: 10px 25px;

}
</style>

Let us know how this goes.
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Thanks Diane,

It's worked, although I still need to adjust the pink space underneath. I want to move it up. Check it out and see what I mean. www.simplytealightful.co.uk

I know it's probably just a little bit of tweaking, but I don't know how.
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Hey Diane,

Yes it has worked except for the pink space under the logo and menu.

Also, something has happened to the header areas on all the other pages?? Please take a look www.simplytealightful.co.uk
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Tanya,

If you're still having troubles with this, please let us know and we can manually add it for you if you wish.
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Sanja,

I think I've had enough with it. I can't seem to figure out how to modify it without it changing something else on the website. Have a look and see what's happened and check out the other pages. The header menu has most and almost disappeared.

Also, there is a large pink space underneath the logo on the first page. How do I move the text up?

What can you do manually for me?

Regards
Tanya
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Ok, I've manage to move the menu down on all the pages, except for the 'tea parties' page. This has sub pages, how do I move the menu over?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Tanya,
Sanja is currently offline, however, she will be happy to assist you further when she arrives online again. Thanks for your patience!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Hi Tanya,

Thanks for your patience. I have pushed your submenu over for you in your Sitebuilder. Please take a look and let me know if further assistance is needed.
Photo of Simply Tealightful

Simply Tealightful

  • 38 Posts
  • 0 Reply Likes
Hey Sanja,

Thanks for your help but I moved it to the left myself and now you've moved it back to the right. Doh!
Photo of Sanja

Sanja

  • 10698 Posts
  • 495 Reply Likes
Oops! Sorry! Please let me know if there are still outstanding issues that need to be addressed.
Photo of Mary-Anne Fabok

Mary-Anne Fabok

  • 4 Posts
  • 0 Reply Likes
you all may as well be speaking a different language, I have no idea what you're talking about or how this relates to fixing my problem. thanks anyway
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Mary,
I am not seeing any earlier correspondence from you on this thread. Please share what your problem is, we'll be happy to assist you!