How to change the height of the heading

  • 1
  • Question
  • Updated 7 years ago
Hi!

I'm going to switch to the "Wide Rounded Glass" style and I'd like to make a couple of changes. I don't know anything about CSS, so maybe you could help me.

These are the changes I would like to make:

1. - The first one is to reduce the banner height from 170px to 50px. I figured out how to make this change (just editing the 170px in the CSS editor).

2. - When reducing the banner's height, the heading is so low that actually disappears and you can't read it. Is there a way to move it up?

3. - The last one is not essential but would be nice. I'd like that the links in the menu bar looked like the "coffee" or "rock band" styles, where the words get highlighted when you pass the mouse over. If there's any code that I could add to the CSS editor to make the change, that'd be great. If not, it's ok.

My main issue is the one about the heading height. Can anyone help me?

Thanks!
Jose
Photo of russianforfree

russianforfree

  • 50 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi russianforfree,

I'll be referring your request to our HTML team who can assist you with this. Please share your domain with us so they can locate your account!
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Hello there!

I think I can help you out. So it seems you're familiar with the custom CSS tool. Great! Simply paste the following code to adjust your header position:

div.layout div#sys_banner h1 {
margin:60px 0 0 40px;
font-size:32px;
}

That code is the default. To move the heading up to make it visible again, simply change the 60px to a lower value. The lower it is, the higher it goes. You can also change the 40px to a higher/lower value to move the heading left/right respectively. Font size can also be adjusted!

As for your second query, I'm not too sure how to do this. However, I'm almost 100% sure it's possible, but would just require more CSS. Hopefully someone else of the forum could help you out! Sorry I couldn't be of further assistance.

You could simply change the colour of the text when you hover over, for example:

div.ys_nav ul li a:hover {
text-decoration:underline;
color:#333333;
}

The 'underline' obviously makes the text underline. You could change this to 'bold' to make it bold, or 'none' for no effect. Then, change the #333333 (grey) to a desired colour.

Kind regards,
Brandon
Photo of russianforfree

russianforfree

  • 50 Posts
  • 0 Reply Likes
Hi Brandon,

Thanks for your answer! This bit doesn't do the trick. no matter what I do, the text doesn't go up:

div.layout div#sys_banner h1 { margin:60px 0 0 40px;
font-size:32px;
}

As for the second one piece of code, it works when I write "none", but if I write "bold" it keeps the "underline" effect.
As for the colour, it does change the colour of the letters, but I was looking for an effect where it highlights not the letters but the area (the box where the letters are). I dont know if that's possible, but as I said, that wasn't the most important issue.

Do you know what could be happening with the heading? why is it not going up?

Thanks
Jose
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Ok I've taken another look. The code seems to work perfectly my side. Have you made 100% sure that 'Disable CSS Overrides' is not checked? That is the only thing I can think of that would be preventing it from working. Also, remember to change the 60px to a lower value! Leaving it at 60px wouldn't make any changes.

Regards.
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Hi there,

I'm sorry to hear that the code isn't working! Perhaps I've made an error somewhere. As for the 'bold' not working, I must be mistaken! Apologies. I am not home at the moment, but will be in a few hours time. Once I am, I'll recheck to code in Yola and get back to you.

I understand that would like the text highlighted, but as I said, I am unaware of any ways to do this. I would also be interested to know, as it's something that I wanted at one stage for my website.

Regards,
Brandon
Photo of russianforfree

russianforfree

  • 50 Posts
  • 0 Reply Likes
Hi there,

'Disable CSS Overrides' isn't checked, yet nothing happens at all, no matter what number I write (either higher or lower than 60px).

Jose
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Really? Wow, I'm stumped. It's working perfectly on my side! The only other thing you can do is wait for the HTML team to figure something out for you. I'm really sorry I couldn't help you!
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Just to show you that it's working for me:

Default (60px)



Edited (20px)



You can clearly see how the heading has moved upwards. There is one other thing I'd like to try. Could you insert an HTML widget, and paste the following code:

<style type="text/css">div.layout div#sys_banner h1 {
margin:60px 0 0 40px;
font-size:32px;
}</style>


You will need to change the 60px like before to a lower value to raise it higher.
Photo of russianforfree

russianforfree

  • 50 Posts
  • 0 Reply Likes
This was pretty strange. Look what happened.

I went to the CSS editor, as I've been doing this days, and tried again changing from this:
div.layout div#sys_banner h1 {
margin:60px 0 0 40px;
font-size:32px;
}

to this:
div.layout div#sys_banner h1 {
margin:20px 0 0 40px;
font-size:32px;
}

...and nothing happened as always.

I tried adding an HTML widget... and it worked!
But then I went to the CSS editor and found this message:

/*
WARNING
Yola had to strip some HTML it found the last time you saved your CSS.
This may have changed your formatting. To avoid unwanted formatting changes in the future please don't include any HTML in your CSS.
*/

I removed this message... and now I can change the values in the CSS editor and the heading moves up and and down.

Any idea about what could have happened?

Thanks for you help and patience!
Jose
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
That sounds very strange! Can't say I've encountered that before, but I'm glad it's finally working for you!

I was glad to help you out :)

Keep well,
Brandon
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Well done Brandon on assisting on this thread!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Jose,

The reason why that message is there is because you've attempted to add HTML codes to the Site CSS editor. Please ensure that you only add CSS codes.