hello, can someone give me the code to have my mobile menu look like this with all the menu items on the right and my logo on the left. much appreciated thanks!
my website is www.exoticsouls.world
Topic summary
A user requested CSS code to reposition their mobile menu layout: moving menu items to the right side and the logo to the left.
Initial Solutions Provided:
- GemPages support suggested adding CSS to the theme’s base.css file with specific margin adjustments for the header-drawer element
- ExpertRookie recommended modifying header.liquid by relocating the header-drawer HTML element and adding CSS for left margin
Issue Encountered:
The initial code caused the mobile menu to open on the left side instead of the right, contrary to the user’s preference.
Final Resolution:
GemPages provided updated CSS code adding left: unset !important; to the menu-drawer positioning, which successfully made the menu open from the right side while maintaining the desired layout.
Outcome:
The solution worked as intended. The user confirmed success and expressed appreciation for the assistance. Multiple users found the solution helpful.
Hello @ExoticSouls ,
It’s GemPages support team and glad to support you today.
I would like to give you a recommendation to support you so kindly follow the steps below:
- Go to Online Store > Theme > Edit code of your current theme
-
Open your theme.liquid theme file
-
Paste the below code before
For example,
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
2 Likes
worked, thank you so much!
hi,
You will need to modify header.liquid to move all icon to the right.
-
Open sections > header.liquid, and move all the content is embraced by “..” after “…”
-
Open assets > base.css and add this code at the end
header-drawer {
margin-left: 1.2rem !important;
}
Try it and let me know
its making my menu open on the left not the right how can I change that?
how can I make it open on the left not the right?
Add this code to make your mobile menu full with to fix your issue
.menu-drawer {
width: 100vw important;
}
Let me know if your issue is addressed
Hello @ExoticSouls ,
If you want your menu open on the left, let’s remove this code:
This means the complete code will be like that:
Best regards,
GemPages Support Team
im sorry, I meant I want it to open on the right side
Hello @ExoticSouls ,
So let’s add this complete code:
Actually, I just add a code left: unset !important; to this position:
Best regards,
GemPages Support Team
2 Likes
it worked, thank you so much I really appreciate the help!
1 Like
I am so glad that my solution can help.
Best regards,
GemPages Support Team
1 Like
You are a lifesaver, thank you so much!!! Have a great day!