Customize Mobile Menu Squarespace with Code

SOMEKINDstudio · June 10

Hi,

https://grouse-maracas-fc4g.squarespace.com/work
Site password: birgit

I would love to know how to customize the mobile menu I have on the website listed above.

01. I would like to make the fontsize smaller
02. I would like to space the links further apart vertically
03. I would like to align the navigation with the bottom of the mobile screen (with same padding as the other elements on top) in stead of in the middle.
04. I would like make the height of the menu (logo + hamburger icon) smaller so the padding left and right around the site is the same as on top.

Thank you in advance!
Have a nice day,

Kristel

Edited June 10 by SOMEKINDstudio

Lesum · June 10

@SOMEKINDstudio Hi! Add this code under Website > Pages > Website Tools > Custom CSS

@media screen and (max-width: 1024px) {
	// font-size smaller and spacing between links
	#header .header-menu-nav-item a {
		font-size: 15px !important;
		padding-bottom: 10vw !important;
	}
	// align navigation at the bottom
	#header .header-menu-nav-folder-content {
		justify-content: flex-end !important;
	}
	// reduce menu height
	#header .header-announcement-bar-wrapper {
		padding-top: 3.5vw !important;
	}
}

SOMEKINDstudio · June 11

@Lesum Thank you so much! That really looks beautiful.

Edited June 11 by SOMEKINDstudio

Customize Mobile Menu Squarespace with Code

Recommended Posts

SOMEKINDstudio

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Lesum

SOMEKINDstudio

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources