KatieVetter
-
Posts
9 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by KatieVetter
-
Is there a way to make this apply to the blog's post title in the actual blog post? Thank you all for this thread - so helpful for me!! Just can't get it to work for the title in the actual blog post. It's there in the grid, just not the custom font when I open the post. Thank you!
-
Anchor Link to Dropdown Menu in Header
KatieVetter replied to KatieVetter's topic in Customize with code
I did consider that, but it interfered with the flow of the site in a way I didn't love. I thought it was too many pages within a page, given that each product line has a few sub categories as well. Lots of pages, lots of clicks... Does that make sense? -
Hey all, First, you'll need a password to see the site right now: Teckton1 https://teckton.squarespace.com/ I am working on a client's site that has a dropdown menu in the header to display categories of products. On the homepage there is a section about their products with a button that shows "view products." There is not one product page since they needed to be set up each like separate portfolios, thus the dropdown. When it is clicked, I want it to anchor back up to the top of the page AND open up the dropdown menu. So far I can only get it to anchor back up to the top. (Desktop view only) The tricky part is on mobile view it needs to open up the collapsed header options rather than open the dropdown menu - this I have gotten to work successfully. This code also generates the button mentioned above. It was adjusted to look like the other buttons on the site. I've pasted the code I have currently in the site below. Any advice? Disclaimer: I am not a coder. I have used ai to assist in writing code snippets for the very little coding I do need until I find a coder to collaborate with. I know very very little, and I am absolutely open for guidance and direction. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll to Top and Open Product Dropdown</title> <style> /* Center text inside the button */ #yui_3_17_2_1_1708440256551_17927 .sqs-html-content { text-align: center; line-height: 2em; /* Match the height of the button */ vertical-align: middle; } /* Set button dimensions and remove outline */ #yui_3_17_2_1_1708440256551_17927 { font-size: 1.4em; padding: 0.8em; /* Keep padding as it was */ height: 2em; /* Set the height to 2 grid units */ outline: 0px; } </style> </head> <body> <!-- Your existing button --> <a class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" onclick="return false;" style="cursor: text;" id="yui_3_17_2_1_1708440256551_17927"> <div id="yui_3_17_2_1_1708440256551_17575" class="sqs-dd-invalid-handle yui3-widget sqs-html"> <div id="yui_3_17_2_1_1708440256551_17577" class="sqs-html-content">View Products</div> </div> </a> <script> document.addEventListener("DOMContentLoaded", function() { var existingButton = document.getElementById('yui_3_17_2_1_1708440256551_17927'); var productDropdownLink = document.querySelector('#header > div.header-announcement-bar-wrapper > div.header-inner.container--fluid.header-mobile-layout-logo-left-nav-right.header-layout-nav-right > div.header-display-desktop > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder > div'); var menuToggleButton = document.querySelector('.header-burger-btn'); // Scroll to top and open product dropdown (for desktop) existingButton.addEventListener('click', function() { // Scroll to the top of the page window.scrollTo({ top: 0, behavior: 'smooth' }); // Open product dropdown (for desktop) if (!isMobileDevice()) { if (productDropdownLink) { productDropdownLink.click(); } } }); // Open collapsed header menu (for mobile) existingButton.addEventListener('click', function() { // Open the collapsed header menu (for mobile) if (isMobileDevice()) { if (menuToggleButton) { menuToggleButton.click(); } } }); // Function to check if the device is a mobile device function isMobileDevice() { return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1); } }); </script> </body> </html>
-
Carousel Gallery title and description not showing on mobile
KatieVetter replied to dotandpeg's topic in Images & Videos
I haven't attempted this since I don't have a grid gallery, but you can try the code below if you're still needing a solution. /* Mobile gallery title */ @media screen and (max-width:640px) { .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-title, .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-meta { display: block !important; opacity: 1 !important; height: auto !important; max-width: 100% !important; margin-left: 0 !important; position: relative !important; } .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-title { bottom: 0 !important; } .sqs-gallery-design-grid .sqs-gallery-block-grid .image-slide-meta { bottom: -15px !important; } } -
Carousel Gallery title and description not showing on mobile
KatieVetter replied to dotandpeg's topic in Images & Videos
I found something that worked for me! I found the below code on another forum and gave it a try and it worked to force the image description and title to appear on mobile viewing. If your gallery is a carousel rather than a slideshow, you will likely need to replace "slideshow" with "carousel" in the code snippet. Here's the link to the forum I got the code from: /* Mobile gallery title */ @media screen and (max-width:640px) { .sqs-gallery-block-slideshow .meta { display: block !important; opacity: 1 !important; bottom: -15px !important; height: auto !important; max-width: 100% !important; left: 0 !important; margin-left: 0 !important; } } -
Carousel Gallery title and description not showing on mobile
KatieVetter replied to dotandpeg's topic in Images & Videos
I'm having the same issue with image descriptions on mobile! I've double-checked all the settings, and I've even used a few small codes in the CSS to try and force the descriptions to be viewed, but nothing is working. If I find something that does work I will reply it here. This is a pretty significant bug that Squarespace needs to adderss. -
Thank you to you both! I appreciate the time and responses.
-
Thanks for the reply! I have had success in uploading files, just no .ai files. I was hoping to get some info on that specifically! Thank you for the link, but it's just a basic instruction on how to upload files in general. Any tips or insight if there is a trick for .ai files? Thanks!
-
Hey all - hoping someone can offer some insight! I am currently constructing a client's website, and one of their non-linked pages is a Branding Guide for employees to access with a private link. The logo files they have available for download on the site are in PNG format and ".ai" format. I had never seen that before, but I belive it's a form of vector file (not a graphic designer here! Lol...) Anyway, I can't figure out a way to upload the .ai files to my asset library so I can create a download link on the branding page. Any help or suggestions would be amazing! Thanks!
