Shortening mobile navigation menu and adding uniform styling

Site URL: https://therare.la

password: rarity

Hello - there are a couple of things I'd like to do with my mobile navigation for the site.

Here is a reference site that I'm trying to have similar styling to: https://cookies.co/cereal-milk.html

I've attached a video to show the problems I'm having.

1. I would like to shorten the whitespace at the bottom of the navigation menu so that the site is still scrollable underneath like in the example.

2. I would like the "strains" dropdown to expand accordion style within the same menu instead of sliding over to a submenu (see example vs current site).

3. In the case above where the subnavigation expands accordion style, I'd like the text color for each item to be black instead of green (see example vs current site).

4. When I look at the mobile navigation on different devices and even switching between fullscreen and regular preview like in the video below, elements get moved around and some are unreadable. Even when they are all present, some of the boxes have different padding and such. How do I make this more uniform so that the design is clean and fits to screen regardless of the device, browser, emulator, or screen dimensions?

Thank you!

Hey @mylesrh, it would require significant modification to override the theme to expand accordion style. 

If you set a sitewide password I can take a look at the padding issue

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

1 hour ago, RyanDejaegher said:

Hey @mylesrh, it would require significant modification to override the theme to expand accordion style. 

If you set a sitewide password I can take a look at the padding issue

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

@RyanDejaegher

password: rarity