Jump to content

Recommended Posts

Site URL: https://dylansoffice.com/

I'm trying to adjust the mobile menu of my website with Squarespace 7.0.... I know I know. The 7.1 gang will be coming for me but I don't want to go through the process of recreating my site.

- I'd like the mobile menu to resemble the desktop version... No more need for the current menu button in the top right corner that opens a navigation display. I'd prefer a straightforward dropdown menu when the main pages are tapped, the secondary page links dropdown below. Just like on a desktop browser.

01_Current.jpg

02_Desired.jpg

Link to comment
2 hours ago, dcbachar said:

Site URL: https://dylansoffice.com/

I'm trying to adjust the mobile menu of my website with Squarespace 7.0.... I know I know. The 7.1 gang will be coming for me but I don't want to go through the process of recreating my site.

- I'd like the mobile menu to resemble the desktop version... No more need for the current menu button in the top right corner that opens a navigation display. I'd prefer a straightforward dropdown menu when the main pages are tapped, the secondary page links dropdown below. Just like on a desktop browser.

01_Current.jpg

02_Desired.jpg

Is it the result you want to achieve on mobile

image.png.958753793644168e0e1b8b4bbd3bca57.png

Try

@media only screen and (max-width: 767px) {
  #mobileMenuLink {
    display: none !important;
  }
  .desktop-nav {
    display: block !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
9 hours ago, bangank36 said:

Is it the result you want to achieve on mobile

image.png.958753793644168e0e1b8b4bbd3bca57.png

Try

@media only screen and (max-width: 767px) {
  #mobileMenuLink {
    display: none !important;
  }
  .desktop-nav {
    display: block !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

This works great! Thank you so much. Any chance the mobile menu/navigation text could be larger without affecting desktop version?

Link to comment
9 minutes ago, dcbachar said:

This works great! Thank you so much. Any chance the mobile menu/navigation text could be larger without affecting desktop version?

Add the font-size to your nav a

  .main-nav a {
    font-size: 20px;
  }

Make sure it is wrapper in my previous breakpoint code for mobile

image.png.3d74c3f009fc5ca1ae652f2c457569ff.png

Hope that it can help you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 4 months later...
On 12/1/2021 at 10:46 PM, dcbachar said:

This works great! Thank you so much. Any chance the mobile menu/navigation text could be larger without affecting desktop version?

You can try the following code

@media only screen and (max-width: 767px) {
  #mainNavigation ul li {
    display: list-item !important;
  }
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.