How do we edit the top margin in the Heading text?

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Right now, the heading sits too low on the page. What is the code required to move it up?

Also, is there a "cheat sheet" on your website where we can access all of these codes?

Thanks!
Photo of Seb Petrescu

Seb Petrescu

  • 3 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Seb,

Can you post your site's URL so I can get the ID of the header of your template? Then I can give you the code to add the margin.

Regarding your other question, I don't think that there is a cheat sheet for the codes. You can check out Yola Codes, but I don't think it has all of the little snippets of code.

Nathan
Photo of Seb Petrescu

Seb Petrescu

  • 3 Posts
  • 0 Reply Likes
I have created a test page for now...
http://www.elevatedphotos.ca/test.php

Thanks for your help!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for creating that test page.

Do you want it like this:



If so, I have the code.

If you have Yola Silver, put this piece of CSS in your Site CSS (Style > Edit Custom CSS):


#sys_heading {
margin-top: -54px !important;
}



If you don't have Yola Silver, put this code on all of your pages in an HTML widget:


<style type="text/css">
#sys_heading {
margin-top: -54px !important;
}
</style>



I hope this helps.
Photo of Seb Petrescu

Seb Petrescu

  • 3 Posts
  • 0 Reply Likes
I have Silver but I only need it applied to certain pages. How do I do this?

Yes, I did want it like that, but where do I add it? Can I add it directly in the Heading box along with the "Move this up" copy? Can you please provide the code FOR THE HEADING BOX?

I'm assuming it would look something like this? - Move this up

Again, I only need it on certain pages, NOT site wide.

Thanks!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Just add that CSS above (the second code, not the first) to an HTML widget on the pages that you want the header's position to change. It will change the position of the header when you add that code in an HTML widget. (it can be at the top or bottom of the page, but I suggest the top of the page.) If you don't see it once you add the code, try saving and previewing the page.

Hope this helps.