Is there a way to keep the logo and menu buttons locked at the top of the screen when I scroll?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I am using the Verde template which has a nice scrolling feature.

Is there a way to keep my logo and page menus at the top of the screen regardless of how far down I have scrolled?
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes

Posted 4 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Chris

I've played around with the CSS of your the Verde Template, but I couldn't find a way to fix the header of your website for scrolling. As I couldn't find any Yola account under the e-mail address you're using for our forum, I'd suggest that you either e-mail us your request again using your login e-mail address, or provide your login e-mail address to your Yola account here (no password), so that I can create a case for our HTML Specialists to try and find a solution.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
Hey Stefan,

My account email is chris@espetaculosa.com and the site is Grand Senior Living.

Thanks for your help.

Chris
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Thank you, Chris. I've created a case about your request for our HTML Specialists to have a look. They'll be able to decide whether it's possible to achieve what you're trying to get and will be in touch with you via e-mail. Otherwise, I'll let you know on this thread.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
awesome, thanks a lot
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Chris

Adrian has worked out a CSS code override and sent it to you via e-mail. I'll post it here as well for the benefit of other users.

If you'd like to make the logo and navigation section of your Verde template "sticky", please follow the steps below. For an example, please see this test website: Verde Template Test Site.
  1. Copy this CSS code completely:
    .yola_heading_container {
    
    margin: 0 auto;
    position: fixed;
    background-color: #000000;
    width: 100%;
    z-index: 100;
    }

  2. Log into your Yola account.

  3. Open the website where you'd like to make the menu sticky.

  4. Click on the "Site" tab.

  5. Click on the "Content" category.

  6. Click on the "Site CSS" icon.

  7. The Site CSS Editor will open. Uncheck the checkbox in the bottom-left corner if it's checked.

  8. Paste the code you copied above to the left-hand side overrides box.

  9. Click on the "Preview" tab on the right-hand side to test if it's working.

  10. Change the colour code for "background-color" to the code of your desired colour. Our Webfriendly Color Code Chart may help.

  11. Save and republish your website. Done!
Photo of Jeff

Jeff

  • 2 Posts
  • 1 Reply Like
Great stuff. Perhaps worth pointing out that this type of change requires Yola Silver.