Add a divider / padding to drawer menu

Store Design

Topic summary

A user seeks to add a visual divider with padding in their drawer menu to separate ‘Invitations’ from ‘Portfolio’, creating distinct sections. The menu items below ‘Invitations’ should appear as a separate group.

Initial Challenge:

  • Previous CSS attempts failed to achieve the desired effect
  • Website was initially password-protected, preventing diagnosis

Solution Provided:
A community member offered CSS code to be inserted in the theme.liquid file:

  1. Navigate to Online Store → Theme → Edit code
  2. Open theme.liquid
  3. Paste custom CSS before the closing tag

Status: The solution appears to have been accepted, with the helper requesting feedback and marking as resolved if successful. Visual examples were shared showing the current menu layout versus the desired outcome.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hi, I have a drawer menu and want to add a divider/line with a little padding between two of my pages ’Invitations’, and ‘Portfolio’ - so that everything below Invitations looks like a separate section of the menu. Hopefully this makes sense. I’ve tried a few codes that haven’t worked. Is there as simple solution someone can help me with?

On the left is my current drawer menu - and on the right is an example of how I’d like it to look.

line-Screenshot 2024-10-07 at 13.57 copy.jpg
line-Screenshot 2024-10-07 at 13.57 copy.jpg2189×931 53.1 KB

Studio theme

https://theinkydeer.co.uk/

2

Hi @cinnamondaisy , your website is password protected.

3

Hi Sorry, I’ve just changed this :blush:

4

Hi @cinnamondaisy ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

websensepro_0-1728307618255.png
websensepro_0-1728307618255.png384×102 7.38 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!