Moving the arrows in the header hamburger menu in mobile

Solved

Moving the arrows in the header hamburger menu in mobile

Etay56
Tourist
31 0 5

Hey, I want to move the arrows in the menu and in the sub menu (after the second option in the menu is being clicked) to the left side of the words and I want to change the direction of the arrows, so they will point to the left instead of the right,.
in addition I want the social media icons to be moved to the right side.
thanks in advance.
the store link: https://7c8266-b4.myshopify.com/

 

Screenshot 2024-06-24 at 0.39.27.png

Accepted Solutions (2)

BSSCommerce-TA
Shopify Partner
123 24 24

This is an accepted solution.

Hi, @Etay56. You can follow these steps:

 

Step 1: Access the theme editing section

In the admin panel, select "Online Store" from the left navigation bar. In the "Themes" section, you'll see your store's current theme. Click the "Customize" button to open the customization interface.

 

Step 2: Open the theme source code editor

In the top right corner of the Customize page, you'll see a button with a three-dot icon (⋮). Click on it. Select "Edit code" from the drop-down menu.

 

Step 3: Edit source code

The source code editor will open, allowing you to edit the theme files. Select the "base.css" file or "theme.css" file and paste the CSS code below at the bottom of the file:

 

#Details-menu-drawer-menu-item-2 summary {
    display: flex;
    padding-right: 3rem; 
}

#Details-menu-drawer-menu-item-2 summary .icon-arrow {
    order: -1;
    margin-right: 8px;
    position: unset;
    right: unset;
    top: unset;
    transform: unset;
}

 

Step 4: Save changes

Click the "Save" button in the top right corner to save your changes.

Here result: 

BSSCommerceTA_0-1719197366242.png

 

If it works please choose my answer as the solution. Thank you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Dan-From-Ryviu
Shopify Partner
8440 1661 1675

This is an accepted solution.

Hi @Etay56 

I see you move the arrow to the left, and you can add this code to change the direction of the arrow.

#Details-menu-drawer-menu-item-2 summary .icon-arrow {
    transform: rotatey(180deg) !important;
}

Screenshot 2024-06-24 at 15.09.01.png

Best regards,

Dan from Ryviu

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

BSSCommerce-TA
Shopify Partner
123 24 24

This is an accepted solution.

Hi, @Etay56. You can follow these steps:

 

Step 1: Access the theme editing section

In the admin panel, select "Online Store" from the left navigation bar. In the "Themes" section, you'll see your store's current theme. Click the "Customize" button to open the customization interface.

 

Step 2: Open the theme source code editor

In the top right corner of the Customize page, you'll see a button with a three-dot icon (⋮). Click on it. Select "Edit code" from the drop-down menu.

 

Step 3: Edit source code

The source code editor will open, allowing you to edit the theme files. Select the "base.css" file or "theme.css" file and paste the CSS code below at the bottom of the file:

 

#Details-menu-drawer-menu-item-2 summary {
    display: flex;
    padding-right: 3rem; 
}

#Details-menu-drawer-menu-item-2 summary .icon-arrow {
    order: -1;
    margin-right: 8px;
    position: unset;
    right: unset;
    top: unset;
    transform: unset;
}

 

Step 4: Save changes

Click the "Save" button in the top right corner to save your changes.

Here result: 

BSSCommerceTA_0-1719197366242.png

 

If it works please choose my answer as the solution. Thank you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-TA
Shopify Partner
123 24 24

@Etay56, for social network icons, you can add them to the bottom of the following code: 

.menu-drawer list-social {
    justify-content: flex-end !important;
}

#chat-bubble {
    right: unset !important;
}

Here result: 

BSSCommerceTA_0-1719198539901.png

 

If it works please choose my answer as the solution. Thank you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Etay56
Tourist
31 0 5

The arrows moved to the left side, I need them to point to the left side as well.

BSSCommerce-TA
Shopify Partner
123 24 24

@Etay56 yes. In the css above, replace "transform: unset;" with "transform: rotate(180deg) !important;". It will rotate the arrow direction for you.

 

If all three solutions work then mark them as solution. Thank you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Dan-From-Ryviu
Shopify Partner
8440 1661 1675

This is an accepted solution.

Hi @Etay56 

I see you move the arrow to the left, and you can add this code to change the direction of the arrow.

#Details-menu-drawer-menu-item-2 summary .icon-arrow {
    transform: rotatey(180deg) !important;
}

Screenshot 2024-06-24 at 15.09.01.png

Best regards,

Dan from Ryviu

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.