Jump to content

mbockmaster

Circle Member
  • Posts

    180
  • Joined

  • Last visited

Posts posted by mbockmaster

  1. 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?

  2. 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!

  3. 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?

     

    Screenshot 2024-03-14 at 2.53.08 PM.png

  4. 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

    Screenshot 2024-03-05 at 10.47.38 AM.png

  5. On 12/28/2023 at 10:54 PM, tuanphan said:

    You can add this code to Website Tools (under Not Linked/Hidden) > Custom CSS

    [data-section-id="658626dbb0bbd24a0065d8b8"] {
        padding-top: 0px !important;
    }

    image.thumb.png.5c001d40e0dcde3a6d45d03cb0540683.png

    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.

  6. 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:

    1. made the grid container relative, so that all child follow absolute position from this grid.
    2. made the spans absolute.
    3. added line-height so not crop the texts.
    4. 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

    Screenshot 2024-02-01 at 9.47.58 AM.png

    Screenshot 2024-02-01 at 9.50.51 AM.png

  7. 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

  8. 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 categories

    I'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

    Screenshot 2023-12-14 at 10.39.32 AM.png

    Screenshot 2023-12-14 at 10.39.59 AM.png

    Screenshot 2023-12-14 at 10.45.02 AM.png

    Screenshot 2023-12-14 at 10.45.12 AM.png

  9. 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.

    Screen Shot 2023-11-21 at 2.53.09 PM.png

    Screen Shot 2023-11-21 at 2.53.21 PM.png

×
×
  • 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.