static sidebar, but only on other pages, not home page.

[Richard Sohanchyk]

I want my sidebar in Umami to have the slide-in animation initially when a visitor enters my website’s homepage for the first time. Then when the visitor begins to navigate to different pages, I want the sidebar to be static.

I saw the previous topic about just making the sidebar static throughout the site. I was hoping there was an easy way to make it static on everything, except for the homepage.

Thanks,

Rich

[Bill Robbins]

Hello Rich,

That’s a great idea and I believe we can make that happen. Here’s what to do:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #sidebar.animated {
     -webkit-animation-duration:0;
     animation-duration: 0;
   }
   
   .home #sidebar.animated {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
   }
   

3. Update your settings.

The first style basically says that the sidebar animation should take 0 seconds (or not happen in other words). The second style says that on the home page, the sidebar animation should take one second (the original value). Hopefully that will do the trick.

Let me know if you run into any questions or trouble,
Bill

[Richard Sohanchyk]

Beautiful! Thank you. Works great.

Rich

EDIT: Hmm, for some reason Firefox is not allowing this code to work. The sidebar still animates everywhere. Safari and Chrome let your code work perfectly though.

[Bill Robbins]

Fantastic. I love animating with CSS because it’s so much easier to change if you need to.

Take care,
Bill

[Author]

Posts