MayaViolet

Hi @mrkttnr I think you might have the background width set to inset - changing it to full width I think will solve this problem... but if it doesn't, this code will apply a fix:
 
section[data-section-id="62b7422094e2396356c7ce98"] .section-background { left: 0 !important; right: 0 !important; bottom: 0 !important; }  

Hi @St Lukes - if you add the following code to the custom CSS panel, you will reduce the padding. You can also play around with changing the values from 0 to something like padding: 10px 0px (which would be 10px to top and bottom, or 0px to left and right), or event: 10px 0px 15px 0px (where the targeting direction goes top, right, bottom, left). Let me know if you have any questions!
 
.footer-inner { padding: 0 !important; }  

Hi @stvr1974 - you can drop the following code into the Page Injection section of the specific page where you want to hide the footer. To do so, navigate to "Website" and click the gear icon next to the page in question to access that page's settings. Then head to the "Advanced" tab drop the code in below:
 
<style> footer { display: none !important; } </style>  
Let me know if you have any questions!
 

Hi @DenisaP, try this - 
.tertiary-button-style-solid .sqs-button-element--tertiary:hover { opacity: 1 !important; }  

@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!

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; }  

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!

Hey @MattBairdSound - 

You should be able to use the gallery caption feature and some simple css to achieve this outcome. In order to differentiate the hover text from your current caption title text, you can wrap the hover text in html tags, so that we can target specifically this text. For example, if you have "Count Abdulla" in the caption already, add "<h2> hover text here </h2>" after in in the same line. 

Here's the CSS I would add:

 
.gallery-caption-wrapper { overflow: visible; // this allows your hover text to be visible when we make it an absolute element, and move it up to appear on top of the image - if you want it to appear normally beneath the title, ignore this, and remove "position:absolute" below } .gallery-caption-wrapper h2 { position: absolute; text-align: center; width: 100% !important; transform: translateY(-250%); // this moves the text up - can be adjusted to match your needs margin: 0 !important; transition: .5s; // allows for smooth fade in/out when we adjust opacity opacity: 0; } .gallery-grid-item:hover { .gallery-caption-wrapper h2 { opacity: 1; transition: .5s; } .gallery-grid-item-wrapper img { opacity: 0.8; // changes opacity of image so text is more legible on hover } }  
Depending on where and how you want it to appear, the above can be adjusted. Hope this helps!

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!

Hi Tuan - Dmitry helped me find the issue. Because I wasn't loading the content, it kept disappearing. This is the final code that did the trick. Thanks for all your help! I appreciate it.
 
<!---Custom Menu Footer---> <script> $(function() { $('.header-menu-nav-folder-content').append('<div class="mobile-menu-footer"></div>'); $('.mobile-menu-footer').load('/mobile-menu-footer #mobile-menu-footer'); }); </script> <!---END Custom Menu Footer--->  

Hey y'all - was shared the link to this amazing tutorial if anyone is interested how to do this!