How can I modify the menu layout on the Andaman theme?

I am using the Andaman theme and wanting to customise the menu to open as a side bar rather than full page and also to be smaller text and left aligned. Any help would be greatly appreciated.

Website is www.nimthelabel.com.au

This is how it currently looks and I want it to look more like this style:

I would also like to reduce the spacing between products on the collection pages both horizontally and vertically.

1 Like

Generally you need to ask 1 small question.

This is an advanced customization because of the amount of different things that need to be styled to be consistent such as the search panel and icons needing to be positioned and the correct colors etc etc.

Below is some rough css to get started using custom-css settings

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

If you need this customization fleshed out for you then contact me by email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

#header-sections #menu {
    background: rgb(153 153 153 / 85%));
}
#header-sections #menu .header {
    width: 90vw;
    max-width: 90vw;
    background-color: white;
    margin-left: inherit;
    margin-right: inherit;
}
/* target the navigation menu items text */
.main-menu ul li a {
 text-align: left;
}

Good Hunting.