Mobile Menu Hamburger Layout

Store Design
, , ,

Topic summary

A user is seeking help to redesign their mobile hamburger menu layout, which currently appears disorganized. They want to:

Desired changes:

  • Display menu items in organized lines
  • Add footer content including policies and social media icons (Instagram/Facebook)
  • Include login logos at the bottom

They provided screenshots showing the current problematic layout versus a reference example from another site.

Solution provided:
Another user offered CSS code to add lines below menu items by:

  1. Navigating to Admin > Online Store > Edit Code
  2. Opening “component-menu-drawer.css”
  3. Adding custom CSS that creates borders under menu links using the :after pseudo-element

The helper noted that social media icons are already present in the menu drawer and don’t require repositioning. The original poster then tagged additional users requesting further assistance, suggesting the initial solution may not have fully resolved their issue.

Status: The discussion remains open with the user seeking additional help.

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

how do i change the menu layout when i press on the hamburger button menu on the header of my mobile website, currently it looks bad see first photo below, i want it in lines and i want some filling at the bottom with my policies and insta /fb / login logos. any good code for this, doesnt need to be perfect. Example menu from: https://mauro-milan.nl/

Screenshot 2024-08-07 035851.png
Screenshot 2024-08-07 035851.png469Ă—808 15.1 KB

Screenshot 2024-08-07 035602.png
Screenshot 2024-08-07 035602.png344Ă—684 10.7 KB

2

Hello @NinoB97

To show the menu items with lines below, you just need to follow below steps:

  1. Go to admin > online store > edit code.

  2. In code directory, find the file named “component-menu-drawer.css” and open the file.

  3. Copy below given css and paste it at the end of the css file that mentioned above.

.menu-drawer__menu li a {
  position: relative;
}
.menu-drawer__menu li a::after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #eae3d9;
  height: auto;
  bottom: 0;
  left: 30px;
  right: 30px;
}
  1. Don’t forget to save the file after making changes.

Hope this code works for your issues.

and the icons you wants to show are already showing in menu drawer. and also don’t need to change the placement of that.

1 Like
3

@BSSCommerce-HDL @BSSCommerce-B2B can one of u guys help me with this ?