How to move main menu and search icons to left with a space between them in mobile view

Store Design
1

How to move main menu and search icons to left with a space between them in mobile view ( impact theme )

swepak.com

pass: gefeen

2

Hello @leonee

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code below:

.header__icon-list{
  justify-content: flex-start;
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

3

@leonee - add this css to the very end of your theme.css file and check

.header__icon-list {justify-content: left;}

suyash1_0-1675221263277.png
suyash1_0-1675221263277.png1366×768 126 KB

4

Go to your Online store > Themes > Edit code > open theme.css or theme.css.liquid and add this CSS code at the bottom of file and then click Save

.header__icon-list { justify-content: left !important; }
5

thank you a lot it works but its too close to the search icon is there any way i can make a space between them ?

6

WechatIMG2307.jpeg
WechatIMG2307.jpeg1242×1950 104 KB

7

@leonee - add this css too and check, adjust number 5 as per the need

.header__icon-list .tap-area {padding-left: 5px; padding-right: 5px;}
8

Thank you for help exactly what i need !

9

@leonee - welcome, happy to help.