Leesh
Circle Member-
Posts
22 -
Joined
-
Last visited
Content Type
Forums
Downloads
Store
Events
Blogs
Gallery
Profiles
Everything posted by Leesh
-
iswiibyangrybirds.com password: 1500 See the home page's first section, how can I give this gallery block some radius corner (border-radius)? I can not locate the tag of it.
-
Site URL: https://primemetny.squarespace.com Site URL: primemetny.squarespace.com Site PW: 1500 As you can see I am currently using the hamburger menu with slide in-out effect, I also added a dark overlay when the hamburger slide out, it was working just perfectly and then it happened to be presented as a full dark overlay sometimes, yes, it is sometimes but not always. This drives me crazy, can someone help me to check if there is any codes I can change? //overlay under menu .header-menu:after { content: ''; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: black; opacity: 0; transition: opacity 1.5s ease; z-index: -1; pointer-events: none; } .header--menu-open .header-menu:after {opacity: 0.6;}
-
Having the mobile menu slide in on the left side of my site.
Leesh replied to inunzi's topic in Customize with code
Hi creedon, My website URL: on7studio.squarespace.com My website PW: 1500Broadway Thanks for the reply, I copy pasted your previous code in to my site but it seems only the reveal/slide out effect works fine for the hamburger menu which on the right, the close effect has some error which now I change it as "false" to disabled. Please check the code below. Thank you /* Hamburger transition */ @flyout-transition-duration : 0.6s; /* should the menu close with the same effect or blink; it's gone? use false or true */ @close-effect : false; // make close effect a little shorter than open @close-duration-shorten-by : 0.2s; /* reveal menu item by itself shows no visible effect. you have to use either a built-in reveal menu item effect or write a custom CSS effect */ @reveal-menu-items : false; // begin ignored if @reveal-menu-items is false @reveal-menu-items-delay-step : 0.03s; @reveal-menu-items-effect-flyout : false; // end ignored if @reveal-menu-items is false // do not change anything below, there be the borg here // begin unset SS built-in menu effect @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .header-menu { opacity : unset; -webkit-transition : unset; -o-transition : unset; transition : unset; visibility : unset; } } .header--menu-open .header-menu .header-menu-cta, .header-menu, .header-menu-cta, .header-menu-nav-item a, .header-menu-nav-list { opacity : unset; -webkit-transform : unset; -ms-transform : unset; transform : unset; -webkit-transition : unset; -o-transition : unset; transition : unset; visibility : unset; will-change : unset; } /* end unset SS built-in menu effect */ // begin move menu off screen .header-menu { transition-property : transform; transform : translateX( 100% ); will-change : transform; .close-effect ( @flyout-transition-duration, @close-duration-shorten-by ); } .header-menu-nav-folder { transform : translateX( 1 ); } // end move menu off screen // begin move menu on screen .header--menu-open .header-menu { @duration : @flyout-transition-duration; -webkit-transition-duration : @duration; -o-transition-duration : @duration; transition-duration : @duration; transition-timing-function : ease-out; transform : translateX( 0 ); } .header-menu-nav-folder--active { transform : unset; } // end move menu on screen // close menu effect, optional .close-effect ( @duration, @offset ) when ( @close-effect = true ) { @d : round( @duration - @offset, 10% ); -webkit-transition-duration : @d; -o-transition-duration : @d; transition-duration : @d; transition-timing-function : ease-in; } .reveal-menu-items ( @flyout-transition-duration, @reveal-menu-items-delay-step ); // reveal menu items .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) { .reveal-menu-items-effect-flyout ( @flyout-transition-duration ); // reveal menu items effect flyout .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) { // @reveal-menu-items = true, .header-menu-nav-item { transform : translateX( 30% ); transition-duration : @duration; } .header--menu-open .header-menu-nav-item { transform : translateX( 0 ); } } @iterations : 32; .transition-delays ( @i ) when ( @i > 0 ) { .header-menu-nav-item:nth-child( @{i} ) { @d : round( @i * @step + ( @start / 2 ), 3 ); transition-delay : @d; } .transition-delays ( @i - 3 ); } .transition-delays ( @iterations ); } // end mobile menu left flyout /* soften reveal effect in hamburger */ .header-menu-nav-item { opacity : 0; -webkit-transition-property : opacity; -o-transition-property : opacity; transition-property : opacity; visibility : initial; will-change : opacity; } .header--menu-open .header-menu-nav-item { opacity : 1; -webkit-transition-duration : 0.5s; -o-transition-duration : 0.5s; transition-duration : 0.6s; -webkit-transition-timing-function : ease-out; -o-transition-timing-function : ease-out; transition-timing-function : ease-out; visibility : initial; } -
Need help with hamburger menu CSS on Desktop - SQS 7.1
Leesh replied to Leesh's topic in Customize with code
And sorry to ask one more question, if I want to make Action button or one of the Nav/link out of the hamburger menu and put it back on the Nav bar, what code should I use? Thank you -
Having the mobile menu slide in on the left side of my site.
Leesh replied to inunzi's topic in Customize with code
Hi creedon, May I ask if my menu is on the right side how do I change your code for the closing(slide back) effect? Thank you, Leesh -
How to show 2 cards per row in mobile view? - SQS 7.1
Leesh replied to Leesh's topic in Customize with code
It works well!! Thanks again! -
Site URL: https://on7studio.squarespace.com/ Password: 1500Broadway Please click to the "Classes" page first. So if you look at the card I put in the section below, is there anyone know which code could make it show 2 cards per row on mobile browser? And also how to make each of the Card's Title font to Bold? There are only adjustment options for description but not title. Thank you, Leesh
-
Site URL: https://terrier-turbot-7tat.squarespace.com/ Hi there, About my hamburger menu as you can see in the screenshots. My web URL: https://terrier-turbot-7tat.squarespace.com/ My web PW: 1234 1. See the screenshot1. Is there anyone know how to move the social icon to the center and move the action button up a little bit? 2. If you see the screenshot2 which is the mobile view of the menu and it looks weird, I don' know somehow my codes affect the mobile as well, so is there a way to avoid change of my mobile menu but only on desktop view?. Below are my code: .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 30%; margin-left: 70%; box-shadow: -5px 5px 15px #000} div.header-menu-nav-item a { font-size: 30px !important; padding: 10px; } .header-menu-nav-item {line-height: 20px!important;} Thank you! Leesh