mbockmaster
-
Posts
180 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by mbockmaster
-
-
Thank you so much @tuanphan! The links and 'creative' are now showing up after the menu has fully covered the screen! However, when the menu closes, these elements need to disappear as soon as the X is clicked. Is there a way to have the delay when they appear, but remove the delay on close?
I'm also hoping to add a slight fade to the opacity, so that when the menu is clicked, the elements fade up rather than the delay and then BAM, appear. Is this possible?
-
Hi @tuanphan! This is amazing, I'm super close!
The delay worked on the nav links, but 'CREATIVE' still comes up right away. I tried experimenting with the code you provided to see if I could get 'CREATIVE' to do the same thing, but I'm afraid my Jquery knowledge is little to none. I'm also hoping I can add a slight fade transition to the opacity.
Thank you SO much for your help!
-
10 hours ago, tuanphan said:
Because you are using custom burger menu, so we will need to use JavaScript code to achieve this.
Use this code to bottom of Code Injection > Footer
<script> $(document).ready(function(){ $('label.checkburger').click(function(){ $('#block-b3227c180fb77e2f7555').toggleClass('show-text'); }); }); </script> <style> #block-b3227c180fb77e2f7555 h3 { position: fixed !important; bottom: 0; z-index: 999999999; color: #fff; left: 50%; transform: translateX(-50%); visibility: hidden; } .show-text h3 { visibility: visible !important; } </style>
Oh my gosh @tuanphan, you are a lifesaver! I was able to get my links to stick right in the centre using your code as well! The only outstanding issue is: My menu transition takes a second, and during it, both 'CREATIVE' and the nav links appear before the background has fully covered the screen. I'd love to have them be 'uncovered' as the menu opens, the way 'BOCKMASTER' does at the top.
Hard to describe, but you can see in this screenshot that the menu elements have appeared before the black background has covered the screen. Can you help?
-
Hi @tuanphan, yes exactly! all of the text/background colour should only show when menu is open. i'm just having trouble getting 'CREATIVE' to be positioned at the bottom of the viewport, and stay there even when the screen is resized.
-
Hello! I'd use Will Meyers' Tabs plugin for this. It's a great plugin and support is excellent should you run into any snags. I'm not affiliated, just a fan 🙂
-
Hi Amy! I've used Will Meyers' Tabs plugin to achieve this effect! Great plugin, and top notch support should you need it.
-
I was looking into this previously and found this article! Hope it helps 🙂
-
-
Hello! I'm trying to style my full screen desktop menu like the screenshot. I've managed to get 'BOCKMASTER' to fix to the top of the screen regardless of the viewport size, but using the same code for 'CREATIVE' isn't quite working.
I thought I had it when I used fixed position:
.menu #block-b3227c180fb77e2f7555 { position: fixed; bottom: -4.4vw; }
But that made the element visible even when the menu is closed. Is there a way to use absolute positioning to attach this block to the bottom of the viewport? Or to use fixed positioning that keeps the element within the .menu?
https://potato-goose-e48n.squarespace.com/
pw: bockmaster -
-
On 12/28/2023 at 10:54 PM, tuanphan said:
Hi again @tuanphan! This has helped to a point, but I'm having trouble when adding 'height: 100vh;' to my hero section on this page. Can you help? I'd like this section to be full screen, like the other pages hero images.
-
On 4/16/2023 at 9:56 AM, Vicks said:
it looks like your span has position relative and not absolute as in the code above..
I have updated the code:- made the grid container relative, so that all child follow absolute position from this grid.
- made the spans absolute.
- added line-height so not crop the texts.
- aligned the items to center, because they all will stick to left once positioned absolute.
.fadeIn{ display: grid; text-indent: 0px; position:relative; justify-items: center; // align items to center line-height: 1.2em; // added bigger line height so that element doesnt cut off from top } .fadeIn span{ position: absolute; }
if the posittion absolute in .fadeIn span doesnt work, try " absolute !important; "
hope this helps
Hi @Vicks & @FTWSGEM! This is exactly what I've been trying to create, thank you so much for sharing your knowledge!
I've got this partially working, but am having some difficulties with the text cutting off. I see that I can keep increasing the line height to help, but it forces my text down. It seems that my container is collapsing, is there a better way to resolve?
https://toucan-vuvuzela-r235.squarespace.com/about
pw: illume -
I have the same issue. It's making it difficult for my client to manage.
-
On 9/24/2022 at 4:47 AM, tuanphan said:
You can add query code to make code run on mobile only
@media screen and (max-width:767px) { /* Enlarge Gallery Carousel block for mobile -- turned off arrows */ .sqs-gallery-design-strip { position: relative; overflow: hidden; min-height: 500px; } }
Hi @tuanphan! I was hoping I could reuse this code to do the opposite—I'd like to make my gallery smaller on mobile. I've gotten close with the following code, but the gallery images crop from the bottom rather than using my focal points.
.sqs-gallery-container { position: relative; overflow: hidden; max-height: 40vh; }
I'd so appreciate any thoughts!
https://fife-sunflower-68mk.squarespace.com/spa-menu
pw: elipsis -
Hello! I'm hoping to get some help creating a blink and change text effect, like the attached. I supposed that this could be achieved with an autoplay summary carousel, but there must be a better way?
My site is: https://potato-goose-e48n.squarespace.com/
pw: bockmaster
(though I don't have much to see here yet) -
My hero! Thank you so much.
-
Hello! I'm trying to achieve the attached, where each image is a separate auto rotating gallery block. I've tried placing two gallery blocks in the first section of my page, but the one on the right won't extend to the very top of the page, behind the nav bar.
site: https://potato-goose-e48n.squarespace.com/work
pw: bockmasterAppreciate anyone's insights!
-
4 hours ago, Ziggy said:
Have you tried duplicating the page? Replacing the photo blocks and photos with new blocks and different images?
It's image blocks across multiple pages, unfortunately. I'll try taking the image effect off and see if that helps!
-
Hi @paul2009 and @Ziggy, I had her clear her browser cache with no luck, and she is able to see the photo by following that link which rules out their device/service provider blocking the squarespace domain. They aren't local to me, and aren't particularly tech savvy, so having her look for errors in the console log won't be easy. Any other ideas/options?
-
Hey @Ziggy! I haven't, though I did have them view it in an incognito window. Could this still be affecting it?
-
I've encountered a strange issue... My client has previewed her site (on a 13" macbook) and image blocks aren't appearing. Images that are placed as section backgrounds, and summary block photos do show, it seems to only be plain image blocks. I've attached screenshots of the pages/photos that aren't displaying, but it applies to:
Home > Our Story
About > Philosophy
About > The Founders
Spa Menu > All categoriesI'm working on the same screen size and have tried to replicate the issue with no luck. Does anyone have any insight?
https://fife-sunflower-68mk.squarespace.com/
pw: elipsis -
8 hours ago, tuanphan said:
Hi,
The page doesn't work. Can you check url again?
Oops, sorry about that! I updated the slug:
https://www.andasanas.com/be-and-bloom-retreat
pw: beandbloom -
On 3/10/2021 at 10:06 PM, tuanphan said:
Hi. Redirect to /checkout or /cart page?
Hi @tuanphan, I'm hoping to achieve this as well. I'd like the button to take the user to the check out page.
-
Hello,
I'm trying to style the product form (the one attached to a product, which I've set as required in order to make this purchase) to match my other site forms. I can't seem to target the check boxes specifically. See first screen shot for regular form styling throughout the site, and second screen shot is my product form.
https://www.andasanas.com/spring-equinox-yoga
*Click 'register' button to open lightbox, select room, and click 'register' to locate the form.
Fixing text to bottom of full screen menu
in Customize with code
Posted
Hi @tuanphan I was actually able to change the menu transition to opacity, rather than height! My menu is perfect now. Thank you so much for all of your help!