How to re-size header to fit logo.

  • 2
  • Question
  • Updated 7 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 7 years ago

  • 2
Photo of Sanja

Sanja, Official Rep

  • 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 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 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, Official Rep

  • 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, Official Rep

  • 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
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, Official Rep

  • 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, Official Rep

  • 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!