MayaViolet

Hi @Cinthetic, did you find a solution for a slideshow animation delay?

By inspecting the element, I can see that the current horizontal rule block has a margin of (margin: 34px 0px) ( see attached screenshot). So, we could apply the following CSS to overrule that margin, of course adjusting similar to padding to match the exact pixel height you'd like.
.sqs-block-horizontalrule hr { margin: 0 !important; }

Yep. That did it. I was using Chrome's developer tool to inspect the element to try to override it. but I forgot the !important tag. Thanks again.

@MayaViolet - Thank you, thank you!!! your CSS code worked perfectly! And, thank you for the explanation/sequence of the variables. You were a HUGE help!

@MayaViolet that worked perfectly! Thank you so much!
Steven

Yes, this worked, thank you so much! 🙌 Take care! 🙂 

@WebShark Ok, the first step would be to set your header style to "Fixed" as referenced here.
Then, try applying the follow CSS:
 
/*--- Header Navigation - Fixed Left ---*/ @media all and (min-width: 768px) { /* Navigation Position */ .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { margin: 0; position: fixed; left: 0; top: 100px; width: 15vw; } .header-nav-list>div { white-space: inherit; } /* Page Content Width */ main#page { width: 85vw; margin-left: auto; } }  
Lmk how that works!

Hey @tayspilates - it looks like the "Perks" page has it's own unique password applied to it, so I can't reference the exact example... 
If you can share that PW, I can target it exactly to see what's going on and to test code, but in the meantime you could play around with a media query (to target only mobile screens), and that specific typeface to adjust for letter-spacing:
@media all and (max-width: 768px) { h1 { letter-spacing: .05em !important; }  
Lmk if you can either share that pw or remove the page-specific pw so I can try to recreate and solve the problem on my end!

Hi @Richard06 - do you mean a border-radius (ie rounding the edges?), or an actual colored border?
I've included code for both below:
 
/* Calendar Image Borders */ .eventlist-column-thumbnail { background: transparent !important; } .eventlist-column-thumbnail img { border-radius: 50px; border: 2px solid blue; // border thickness, style and color }  
Lmk if you have questions!

Amazing! Worked like a charm

Absolutely! If you take note of the animation property, I included the syntax rules:
// animation name, duration, timing-function, delay, direction Following that order, you can adjust what currently is set to "0s" to your preferred delay time. Let me know how that works!

Brilliant, thank you MayaViolet!

Hi @marchbank, try this:
 
/* Transition Animation Application */ .fe-block-yui_3_17_2_1_1686276277987_84481 { -webkit-animation: fadeIn 5s linear 0s forwards; // animation name, duration, timing-function, delay, direction animation: fadeIn 5s linear 0s forwards; opacity: 0; } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} }  
You can adjust the animation properties (on both lines) if you'd like to change the duration or add in a delay

Try changing the last line of code to the following:
 
.header-menu-nav-item a:hover div { color: red !important; }  
You can also add a transition property if you'd like the color to fade in and out on hover:
 
.header-menu-nav-item a:hover div, .header-menu-nav-item a div { -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }  

.header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 0 0 100%; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { text-align: left; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-list { justify-content: left; flex-direction: column; text-align: left; } Try the above - Not sure if that is your final preferred outcome?

@tayspilates can you please share the url and password so we can inspect it?

Hi @Richard06 - do you mean a border-radius (ie rounding the edges?), or an actual colored border?
I've included code for both below:
 
/* Calendar Image Borders */ .eventlist-column-thumbnail { background: transparent !important; } .eventlist-column-thumbnail img { border-radius: 50px; border: 2px solid blue; // border thickness, style and color }  
Lmk if you have questions!

Hi @marchbank, try this:
 
/* Transition Animation Application */ .fe-block-yui_3_17_2_1_1686276277987_84481 { -webkit-animation: fadeIn 5s linear 0s forwards; // animation name, duration, timing-function, delay, direction animation: fadeIn 5s linear 0s forwards; opacity: 0; } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} }  
You can adjust the animation properties (on both lines) if you'd like to change the duration or add in a delay

.header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 0 0 100%; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { text-align: left; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-list { justify-content: left; flex-direction: column; text-align: left; } Try the above - Not sure if that is your final preferred outcome?

Hi @marchbank, try this:
 
/* Transition Animation Application */ .fe-block-yui_3_17_2_1_1686276277987_84481 { -webkit-animation: fadeIn 5s linear 0s forwards; // animation name, duration, timing-function, delay, direction animation: fadeIn 5s linear 0s forwards; opacity: 0; } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} }  
You can adjust the animation properties (on both lines) if you'd like to change the duration or add in a delay

Hi @EFIC - it looks like it's the fluid engine block's z-index, a parent element, that is set to 1 which is getting in the way of your custom z-index of the child. I'm wondering if maybe in the edit panel, SS gives you the option to change it's native order ("send to front"?)

If not, you can target the direct block: 
.fe-block-yui_3_17_2_1_1689711613120_11603 { z-index: 999; } Lmk if that works!

Hi @Baileyrookie, can you please share the URL + pw (if applicable) to the site, so we can inspect the code directly to identify the problem and solution? Thanks!

You could use custom css to add in a psuedo element for each title -- To target the exact sections on this page it would be helpful to have the site URL and password, but the you can follow these instructions to upload the images into your Custom CSS panel, and then use custom css to attach it to the title...
 
However to know exactly what to target we need access to the page!

Try changing the last line of code to the following:
 
.header-menu-nav-item a:hover div { color: red !important; }  
You can also add a transition property if you'd like the color to fade in and out on hover:
 
.header-menu-nav-item a:hover div, .header-menu-nav-item a div { -webkit-transition: .5s; -o-transition: .5s; transition: .5s; }  

Hey @nbamir - it looks like you have this code applied to your site:

 
html, body { overflow-x: hidden; } Anytime overflow-x is set to hidden, this will cause conflict with the sticky property. If you're having overflow-x issues, you can try to target the section in particular that is causing the conflict rather than the whole body to make sure your sticky section works. Hope this helps!