Jump to content

Menu on Mobile Version

Go to solution Solved by accentsouthwest-jg,

Recommended Posts

I’d appreciate some help with the appearance of the menu on the mobile version of my site at https://www.accentsouthwest.com. I’ve used some CSS to enhance it (thanks Rebecca Martin for making available your https://www.rebeccagracedesigns.com/blog/change-width-of-mobile-menu) and added a line to change the background color to match the rest of the site, but I’ve gotten nowhere with how to change the font color, type and size, as well as the background color of the logo section.


/* Half Width Mobile Menu */

.header-display-mobile .header-title-text {

width: 87vw !important; /*width of the header menu */

font-size: 0.5rem !important; /*site-title font-size */


.header-menu {

width: 87vw; /*width of the header menu */


#page {

transition: opacity 0.75s; /* transparency animation */


.header--menu-open #page {

opacity: 70%; /* makes page transparent when mobile menu is open */


background-color:#5f636a; /*background color of the header menu */



.header-menu-nav-folder-content {

justify-content: flex-start; /* vertical alignment of navigation */

text-align: left; /* navigation text alignment */

color:#ffffff; /*text color of the header menu */

background-color: #5f636a; /*background color of the header menu */


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



Thanks for any help with this.



Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.