-
Posts
383 -
Joined
-
Last visited
-
Days Won
1
Community Answers
-
Spark-Plugin's post in Dropdown menu edit was marked as the answer
Hi @Soohyun, give this code a try and let me know how it goes:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Changes the text color of dropdown menu items on hover */ .header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a { color: #fff !important; /* Change the color value (#fff) to any desired color code */ /* Instructions: - The color property specifies the text color of the dropdown menu items when hovered over. - You can change `#fff` to any valid color code (e.g., #000000 for black, #d4af37 for gold, etc.). */ } /* Makes the dropdown menu automatically adjust its width */ .header-nav-folder-content { width: auto !important; /* The dropdown will automatically adjust to the content width */ min-width: unset !important; /* Removes any minimum width restriction */ /* Instructions: - The width property is set to `auto` so the dropdown width matches the content size. - `min-width: unset` ensures there is no minimum width constraint, but you can change it to a specific value if needed. */ }
-
Spark-Plugin's post in Adjusting Header Icon Display for Mobile Version was marked as the answer
Hi @LukeHoll, You can use the same code and add a parameter to ensure it functions only on desktop. Here’s the updated code:
/* Login text to icon - apply only on desktop */ @media screen and (min-width: 800px) { /* Adjust the min-width according to your breakpoint */ .user-accounts-text-link span { color: transparent; } .user-accounts-text-link { background-image: url(https://i.ibb.co/2yD0xXq/360-F-448443831-jx-Cl2q-W7m-In-Z2-Je-Tp9d3-BF3-Jw-N9-XRVFE.png) !important; background-size: contain; background-repeat: no-repeat; background-position: right; } }
-
Spark-Plugin's post in Header logo doens't link to homepage but to error page was marked as the answer
@ADADAD, are you on a Business plan or above? if so, we can try this code:
Go to: Pages > Website Tools > Code Injection > FOOTER , paste it there and hit save.
<script> /* Desktop */ document.querySelector('.header-display-desktop .header-title-logo a').setAttribute('href', '/home'); /* Mobile */ document.querySelector('.header-display-mobile .header-title-logo a').setAttribute('href', '/home'); </script>
-
Spark-Plugin's post in Fully Square Button Styling was marked as the answer
Hello @Anele0610, give this code a try and let me know how it goes:
.sqs-block-button-element { width: 60% !important; box-sizing: border-box; min-height: 120px; text-align: center !important; display: flex; align-items: center; /* Center vertically */ justify-content: center; /* Center horizontally */ }
-
Spark-Plugin's post in Dropdown menu full height and alignment issues was marked as the answer
Hi @Jolene2023, in this case I would recommend watching this video:
-
Spark-Plugin's post in Remove white space below hidden footer. was marked as the answer
@AnnaJacobs, thank you. Can you make sure the section settings are exactly like the ones below? Fill Screen activated and Section height (L)?
-
Spark-Plugin's post in Change spacing of nav links in header was marked as the answer
@beccahobbs150, since the code worked as it is, no need to change the header template. To remove the title, you can simply add this code:
.header-title { display: none !important; } -
Spark-Plugin's post in Adding a highlight to header text was marked as the answer
Hey @aMarte, give this code a try and see how it goes:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done /* Hover effect for header navigation folder items */ .header-nav-folder-item:hover { /* Changes the link text color when hovering over the folder item */ a { color: #000000 !important; /* This changes the link text color to black on hover */ } } /* Hover effect for header navigation */ .header-nav a:hover{ color: #000000 !important; // * This changes the link text color to black on hover */ }
-
Spark-Plugin's post in Customize color for frame for name and email fields for newsletter sign-up was marked as the answer
Hi @Aurora, you can try the following CSS, this will work for all newsletters you’re using on your website:
.newsletter-block .newsletter-form-field-element:focus, .search-block input:focus { outline-color: #fe5aa9 !important; } Let me know how it goes:)
-
Spark-Plugin's post in Add space between 2 images in Reel was marked as the answer
Hi @juliengoldstein! You can try this code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note: Play around with the % value.
@media only screen and (min-width: 767px) { .gallery-reel-item img { width: 97% !important; height: auto !important; } } Hope it helps:)
-
Spark-Plugin's post in How to set custom color to the Checkout & Continue Shopping buttons? was marked as the answer
Hi @GregOvens, give this code a try and let me know how it goes:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note: Play around with the colors you want. (#)
/* Cart Checkout Button */ .cart-checkout-button{ background: #fff !important; color: #7777 !important; } /* Continue Shopping Button */ a.cart-continue-button { background: #fff !important; color: #7777 !important; }
-
Spark-Plugin's post in Adding more space between words in a code was marked as the answer
@joelbull, thanks. You can try this code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note: Play around with the gap value.
#footer-nav-clone .header-nav-list { width: 100%; max-width: 400px; margin: 0 auto; justify-content: space-evenly; gap: 10px !important; } Let me know how it goes:)
-
Spark-Plugin's post in Create double line under header was marked as the answer
Hi @designbyjrs, try this code and let me know how it goes:
div.header-announcement-bar-wrapper { border-top: 3px solid #0a1c30 !important; /* Top solid border */ position: relative; /* Ensure ::after pseudo-element is positioned correctly */ padding-bottom: 5px; /* Optional: Adds some space for the bottom lines */ } div.header-announcement-bar-wrapper::after { content: ''; position: absolute; bottom: 0; /* The lowest line is at the bottom */ left: 0; width: 100%; height: 2px; /* Thickness of the second line */ background-color: #0a1c30; } div.header-announcement-bar-wrapper::before { content: ''; position: absolute; bottom: 15px; /* Distance between the two bottom lines */ left: 0; width: 100%; height: 2px; /* Thickness of the first bottom line */ background-color: #0a1c30; }
-
Spark-Plugin's post in Custom padding top was marked as the answer
@jjohansson, you can try this code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done See attached video for results.
@media screen and (min-width: 992px) { body:not(.sqs-edit-mode) .header-title { position: fixed; top: 80px; left: 4vw; z-index: 9999; } } @media screen and (min-width: 992px) { body:not(.sqs-edit-mode) .header-nav { position: fixed; top: 20%; left: 4vw; padding: 0 !important; transform: translatey(-50%); } } Give it a try and see how it goes:)
Screen Recording 2024-10-21 at 11.07.38.mov
-
Spark-Plugin's post in How to Add a Drop shadow to some of my H1? was marked as the answer
Hello @IndianaGirl! That is definitely possible! Please check the attached screenshot—if that's what you're looking for, go ahead and use the following code. Also, with this code, you can add as many IDs as you need by simply separating them with a comma:
#block-11e7f5a733462b83320f h1 { text-shadow: 3px 5px 3px rgba(0,0,0,.6); } Hope it helps.
-
Spark-Plugin's post in Header Navigation Options was marked as the answer
Hi @BangaBuilds, did you try adding links? See screenshots for reference:
-
Spark-Plugin's post in Change form field shape to rounded / pill on promotional pop-up? was marked as the answer
Hi @yogacid, sure we can, there you go:
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].newsletter-layout-style-inline .actions:not(.stacked) .form-item input[type="text"] { border-radius: 10px !important; } Let me know if it works for you:)
-
Spark-Plugin's post in Portfolio - Project Navigation (Mobile) was marked as the answer
@BangaBuilds, thanks for clarifying. Try adding this code:
@media only screen and (max-width:767px) { .item-pagination-title { font-size: 18px !important; } } Let me know:)
-
Spark-Plugin's post in Header: Contact Button, Logo Placement was marked as the answer
Hi @BangaBuilds, for the header button you can use this code:
.header-actions .btn, .header-menu .header-menu-cta a { border-radius: 0px !important; } And for the logo, use this:
.header-title-logo img { width: auto; max-width: 100%; max-height: 107px; margin-left: -40px; Let me know how it goes:)
-
Spark-Plugin's post in How to remove the chatbot icon from specific pages? was marked as the answer
Hi @yogacid, you can try adding this code:
1. Go to Pages.
2. Hover over the page name where you want to apply the code, and you’ll see a gear icon—click on it.
3. Go to Advanced.
5. Paste the code, click Save, and you’re all set.
<style> #chatbase-bubble-button, #chatbase-bubble-button * { margin: 0; padding: 0; box-sizing: border-box; display: none !important; } </style> Let me know how it goes:)
-
Spark-Plugin's post in How to add a custom image to the header was marked as the answer
Hi @Jasonyun, you can follow the steps below and use the code I’m providing to achieve what you need:
Navigate to: Pages > Website Tools > Custom CSS Paste the code below into the CSS editor. Hit Save. Navigate to: Pages > Website Tools > Custom CSS Select ‘Custom Files’. Select ‘Add images or fonts’. Upload your image here. Now, look for the part in the code that says (IMAGE URL HERE). Delete the "IMAGE URL HERE" text, and leave the pipe symbol (|) in place. Scroll to the top, click on Custom Files, then click on your image. Its link will automatically be inserted where you deleted the text. Hit Save and you're all set! header#header { background-image: url(IMAGE URL HERE); background-size: cover; background-position: center center; background-repeat: no-repeat; } Hope it helps!:)
-
Spark-Plugin's post in Edit the Portfolio block header with code was marked as the answer
Hi @JoaoFreire! Thanks for your clarification. You will need to add this code:
Navigate to Pages > Website Tools > Code Injection. Paste the code into the FOOTER editor. Hit Save and you’re done
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".list-item-content__title").each(function(){ $(this).html($(this).text()); }); }); </script> This should work right away, please check the screenshot to see the final result. And let me know if it helps!
-
Spark-Plugin's post in Move Arrows Down List Carousel was marked as the answer
Hello @kaydotjpg! Yes, there’s definitely a way to do that. You can paste the following code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Play around with the px value.
.user-items-list-carousel__arrow-container { position: absolute; top: 180px; } Hope it helps:)
-
Spark-Plugin's post in How can I remove the blank section above the header? was marked as the answer
Hi again @vincentyyy. In this case, you can add this code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note in the code, padding-top is set to 0px.
.header .header-announcement-bar-wrapper { position: relative; z-index: 2; width: 100%; box-sizing: border-box; padding-top: 0px !important; } Let me know if it helps:)
-
Spark-Plugin's post in Full bleed slideshow height not working was marked as the answer
Hello @LukeDesign, you can do that by adding the following code:
Navigate to Pages > Website Tools > Custom CSS. Paste the code into the CSS editor. Hit Save and you’re done Note: Play around with the PX values.
// Desktop// .gallery-fullscreen-slideshow[data-width="full-bleed"] { max-width: 100%; padding-left: 0; padding-right: 0; height: 600px !important; } // Mobile// @media screen and (max-width:768px) { .gallery-fullscreen-slideshow[data-width="full-bleed"] { max-width: 100%; padding-left: 0; padding-right: 0; height: 300px !important; } } Hope it helps:)