Leesh

@Eugene_WeglotCan you also take a look? thank you

I tested in a private window, it has a dropdown from my side tho. Can you try again?

@tuanphanBother you again, see if you have some quick CSS solution. thank you site url if you needed: www.venturantgroup.com

Hi there, I can't use the code below to reduce the width under a certain amount of the width, for example, width set to 100px, it works but for 30px, it doesn't change. See screenshot. .header-actions .language-picker-desktop .language-picker-content { width: 30px !important; }

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;}

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; }

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

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

It works well!! Thanks again!

It works perfect!! Much appreciated!

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