Change Width of Mobile Menu | Squarespace 7.1

As you know having a mobile friendly site is extremely important for search engine optimization. Squarespace helps you out by using a mobile navigation when viewers are visiting your site from a mobile device.

However, you may find that you want to be able to customize this menu more than is allowed inside the Squarespace Editor. This is where custom css comes in!

In this video, I show you how to change the width of the mobile navigation menu in Squarespace 7.1. All the code used in the video is provided below.

The following code is used in the video.

/* Half Width Mobile Menu */
.header-display-mobile .header-title-text {
   width: 50vw !important;  /*width of the header menu */
  font-size: 1.5rem !important; /*site-title font-size */
}
.header-menu {
  width: 60vw;  /*width of the header menu */
}
#page {
  transition: opacity 1s; /* transparency animation */
}
.header--menu-open #page {
  opacity: 30%;  /* makes page transparent when mobile menu is open */
}

.header-menu-nav-folder-content {
  justify-content: flex-start; /* vertical alignment of navigation */
  text-align: left; /* navigation text alignment */
}
.header-menu-nav-folder:not(.header-menu-nav-folder--active) {
  display: none; /* hides non-active folder */
}

.header-menu-cta {
  width: 60vw; /* width of button */
}
.header-menu-cta a {
  min-width: unset !important;
}

Here are some other posts you may like:

• Customize the Input Field Text in a Squarespace Form

• Create a Secondary Navigation in Squarespace 7.1

• Hide Blog Tags in Squarespace 7.1