Moving collapsible content icon to the right side on mobile view (Motion Theme)

Store Design
, , , ,
1

Hey, is there a way to move the collapsible icon to the right side on mobile view? I have added an image about the issue and desired outcome below. Thanks in advance!

My store: https://berry-helsinki.com/

The issue:

the issue.jpeg
the issue.jpeg1179×2556 78.9 KB

Desired outcome:

desired outcome.jpeg
desired outcome.jpeg1179×2556 102 KB

1 Like
2

Hello @bellevo

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search site-nav.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media only screen and (max-width: 768px) 
{
    #NavDrawer .mobile-nav__item .mobile-nav__child-item {
        justify-content: space-between;
        margin-right: 20px;
    }
    #NavDrawer .mobile-nav__item button.mobile-nav__link--button.mobile-nav__link--button-small.collapsible-trigger {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    #NavDrawer .mobile-nav__item .mobile-nav__link--button-small .collapsible-trigger__icon {
        right: 0;
    }
}

Output : https://prnt.sc/99aoRJPVgxFy

Please hit Like and Mark it as a Solution if you find our reply helpful.