texjer

noticed the backend is slower now as well.

To anyone who finds this message wanting to add animation/fade-ins to twentytwentyone or twentig, I decided to use ScrollReveal which is super lightweight (just 3kb) and wasn’t too hard to add — https://scrollrevealjs.org/
If anyone has trouble getting it to work, let me know and I’ll expand this post.

Hi, sorry to revive an old thread, but I’m wanting to set the menu to always be the hamburger menu, and adding this to the styles didn’t work for me as pasted below. Did you change the way it works, or maybe I’m just doing something wrong?

Thanks again for all your hard work.

	.tw-header-break-tablet.tw-header-padding-small {
		--header--padding: 24px;
	}
	
	.tw-header-break-tablet .menu-button-container {
		display: flex;
		padding-right: calc(var(--site--padding) - 20px);
	}

	.tw-header-break-tablet .has-logo .menu-button-container {
		padding-top: calc(var(--header--padding) + (var(--logo--height) - (25px + var(--button--padding-vertical))) / 2);
	}

	.lock-scrolling .site {
		position: fixed;
		max-width: 100%;
		width: 100%;
	}	

	.tw-header-break-tablet .primary-navigation {
		position: absolute;
		top: var(--global--admin-bar--height);
	}
	
	.tw-header-break-tablet.primary-navigation-open .primary-navigation {
		width: 100%;
		position: fixed;
		z-index: 2;
	}

	.tw-header-break-tablet .primary-navigation > .primary-menu-container {
		display: block;
		position: fixed;		
		visibility: hidden;	
		opacity: 0;
		top: 0;
		height: 100vh;
		z-index: 499;
		overflow-x: hidden;
		overflow-y: auto;			
		transform: translateY(var(--global--spacing-vertical));
		padding: calc(6 * var(--global--spacing-unit)) var(--site--padding) var(--global--spacing-horizontal);
		background-color: var(--header--color-background, var(--global--color-background));
		margin-left: 0;
	}

	.tw-header-break-tablet .site-header.has-logo .primary-menu-container {
		padding-top: calc(70px + var(--logo--height));
	}

	.tw-header-break-tablet.primary-navigation-open .primary-navigation > .primary-menu-container {
		position: absolute;
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
	
	.tw-header-break-tablet .primary-navigation .menu-wrapper {
		width: 100%;
		max-width: 100%;
		padding-bottom: 120px;
	}

	.tw-header-break-tablet .primary-navigation > div > .menu-wrapper:not(:last-child) {
		padding-bottom: 20px;
	}

	.tw-header-break-tablet .primary-navigation > div > .menu-wrapper li {
		display: block;
		position: relative;
		width: 100%;
	}

	.tw-header-break-tablet .primary-navigation a {
		font-size: var(--primary-nav--font-size-mobile);
	}

	.tw-header-break-tablet .site-header .primary-navigation .primary-menu-container .menu-wrapper a {
		padding-left: 0;
		padding-right: 0;
	}

	.tw-header-break-tablet ul.header-actions {
		margin-left: 0;		
		padding-bottom: 120px;
		justify-content: flex-start;
	}

	.tw-header-break-tablet .header-actions .social-item {
		margin-left: calc(0px - var(--primary-nav--padding));
	}

	.tw-header-break-tablet .header-actions .social-item + .social-item {
		margin-left: 0;
	}

• This reply was modified 3 years, 5 months ago by texjer.

Nevermind, I found it at the bottom of your homepage.

Would also like to see an answer to this. @myvancity, where are you inserting this into the the infinite load script?