Mobile Menu Hamburger Layout

Solved

Mobile Menu Hamburger Layout

NinoB97
Explorer
63 0 26

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.pngScreenshot 2024-08-07 035602.png

Accepted Solution (1)

parth_ghelani
Shopify Partner
259 38 40

This is an accepted solution.

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;
}

4. 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.

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns

View solution in original post

Replies 2 (2)

parth_ghelani
Shopify Partner
259 38 40

This is an accepted solution.

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;
}

4. 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.

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns

NinoB97
Explorer
63 0 26

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