How Can I Customize the Navigation Menu on Mobile Devices?

Hi everyone,

I'm currently working on my Squarespace website, and I'm having trouble customizing the navigation menu specifically for mobile devices. I've managed to style the menu for the desktop version, but the mobile version still doesn't look quite right.

Here’s what I’m trying to achieve:

• I want the mobile menu to have a different background color from the desktop version.
• I’d like to increase the font size of the menu items on mobile.
• I want to center-align the menu items instead of having them left-aligned.

I've tried using the following CSS code, but it doesn’t seem to be working on mobile:

/* Mobile Menu Customization */
@media (max-width: 767px) {
  .Header-nav .Header-nav--mobile {
    background-color: #333;
    font-size: 18px;
    text-align: center;
  }
}
Is there something I’m missing, or do I need to target a different class or ID for mobile styling? Any help would be greatly appreciated!

#1. #2. #3. You can use this CSS code

@media screen and (max-width:991px) {
	header#header {
		background-color: #f1f !important;
}
div.container.header-menu-nav-item * {
	font-size: 12px !important;
	text-align: center !important;
}
}