Moving the arrows in the header hamburger menu in mobile

[Etay56]

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/

 

 

[BSSCommerce-TA · 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: 

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

[BSSCommerce-TA · 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: 

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

[BSSCommerce-TA]

@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: 

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

[Etay56]

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

[BSSCommerce-TA]

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

[Dan-From-Ryviu · 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;
}

 

Best regards,

Dan from Ryviu