Mobile Menu

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.

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.

Is it the result you want to achieve on mobile

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

9 hours ago, bangank36 said:

Is it the result you want to achieve on mobile

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?

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

Hope that it can help you

2 hours ago, bangank36 said:

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

Hope that it can help you

This worked perfectly. Thank you!

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

Perfect! Thank you! Is it possible to have the menu collapse after selecting a sub-menu item?