Header Formatting issues on mobile only

Solved
mattpermute
Excursionist
21 0 7

Hello,

I'm having issues with the mobile version of the header, all the items from the right are stacking on the right, and one of the icons doesn't show up on mobile.

I need to move the icons to the right of the header, like they are on desktop view

I have attached screenshots to show, and I can provide code if anyone can help.

Here is the link: https://0br12xqxjzqi3sqc-11985066.shopifypreview.com

Whats the best way to go about fixing this?

Thanks

MM

 

IMG_0245.jpg

Screen Shot 2021-06-10 at 1.36.38 PM.png

0 Likes
Ninthony
Shopify Partner
1898 285 745

This is an accepted solution.

You need to change this element's position to relative, it's fixed and it's screwing everything up. Put this at the bottom of your style.scss.liquid file:

.header-navigation-toggle {
    position: relative;
}

 

 The other icon disappears because there's not enough room on the top bar to fit everything. Add a link to your mobile menu instead for people to login. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
mattpermute
Excursionist
21 0 7

that worked like a charm, thanks!

0 Likes
Ninthony
Shopify Partner
1898 285 745

No problem, thanks for accepting the solution.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes