Freeze Banner

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Is there a way to freeze my banner so that no matter where you scroll on my site the banner is still in the screen?
Photo of CJ

CJ

  • 13 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi CJ,

You might be able to do that, but it will require positioning. If you have Yola Silver, try adding this to your custom CSS: (Style>Edit Custom CSS)


#sys_banner {

position:fixed;

top:30px; /* you will need to adjust this to fit your needs */

left:50%; /* you might need to change this also */

right:50%; /* you might need to change this also */

}



If you don't have Yola Silver, then you'll have to add this to every page on your site into a HTML Widget:


<style type="text/css">
#sys_banner {

position:fixed;

top:30px; /* you will need to adjust this to fit your needs */

left:50%; /* you might need to change this also */

right:50%; /* you might need to change this also */

}
</style>



I hope this helps! Please let me know how this goes.
Photo of CJ

CJ

  • 13 Posts
  • 0 Reply Likes
The code works, however it doesn't exactly do what I want it to do. With that code, the banner goes underneath my webpage as i scroll. I would like it to stay at the top of the page...I'm not quite sure how to explain it. yikes...
Photo of CJ

CJ

  • 13 Posts
  • 0 Reply Likes
This might be clearer: I would like to fix (freeze pane like in MS Excel) the page header (banner) section of a page.

Anything in the body/content simply scrolls under the banner.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi CJ,

Is it going under the content on your page? If so, try using this CSS in your Custom CSS instead:


#sys_banner {

position:fixed;

top:30px; /* you will need to adjust this to fit your needs */

left:50%;

right:50%;

z-index:2000;

}



Regards,
Nathan
Photo of CJ

CJ

  • 13 Posts
  • 0 Reply Likes
Nah, that did pretty much the same thing the last code did.
Sad day.
I am trying to get the banner to stay at the top of the page, while the other content scrolls under it. Those codes are moving the banner with the page.

Thanks for all your help thus far - I really appreciate this!!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It seems like the position:fixed; would make your banner stay at the top the whole time and then the content still scrolls under it. Could you post your site's URL with one of my codes above applied so I can see what it's doing? I'm still a little confused on how you want it. Are there any websites on the internet that have this same effect with their banner? I'll be able to have a better understanding of what you mean if there's any example sites that you want yours to be like.

Thanks,
Nathan
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for your superb help on this Nathan!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You're welcome!
Photo of CJ

CJ

  • 13 Posts
  • 0 Reply Likes
I'm guessing since I cannot locate an example - this issue might be un-resolvable...darn.
Anyway, here is my website http://vivalapack.yolasite.com/
the page I am trying to adjust is the archives page (there should be one with a banner). For some reason when I tried viewing it just now - the page doesn't work....UGH!!! nothing I just changed is showing up on my website...whole nother issue :-/
Lovely.