Jump to content

mgcreative

Circle Member
  • Posts

    25
  • Joined

  • Last visited

Community Answers

  1. mgcreative's post in Add Gradient Overlay Top to Bottom on Blog Header Image was marked as the answer   
    Thank you so much! Since this code affects the header nav (and not the blog post featured image), and it's a split screen section, I just adjusted the gradient angle and only made it go halfway across. It's not perfect but it does the job! 

    Here's the adjusted code I used if anyone is interested.
     
    body[class*="type-blog"].view-item header#header {     background-image: linear-gradient(175deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0) 60%); }  
  2. mgcreative's post in Sticky Column Blog - Fluid Engine was marked as the answer   
    Okay, I actually think I figured it out (may need some adjustment - open to suggestions!). But for anyone searching:
    I used this code -- a Code box on the column, and then just adjusted the top px. 
    Source: Will Myers
    Add this to Custom CSS:
    @media(min-width:767px) { .col.wm-sticky-column { position:sticky; top: 150px; } } Put this in a code box in the column you want (works for blog posts, even in fluid engine):
    <div class="wm-sticky-column"></div> <script> (function() { function initSticky() { let stickyStarts = document.querySelectorAll('.wm-sticky-column'); stickyStarts.forEach(el => { let col = el.closest('.col'); if (!col) return; col.classList.add('wm-sticky-column'); }); } window.addEventListener('DOMContentLoaded', initSticky); }()); </script>
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.