Good morning and happy weekend,
I would need a hand:
how can I move the menu icon to the right and make it open from right to left (like the yellow arrow) and move the logo more to the left?
Thank you for your time
Topic summary
Goal: reposition the header elements so the menu icon is on the right, the drawer opens right-to-left, and the logo shifts further left. A reference URL and images illustrate the desired layout.
Proposed approach: add CSS in Base.css to:
- Align the header drawer to the right (grid and justify-self).
- Set header grid areas to “heading navigation icons.”
- Position the menu drawer on the right with an initial translate(100%) and reset transform to 0 when open (via details[open] selectors).
Additional guidance: another reply states that achieving this behavior requires customization in the theme’s header files for both desktop and mobile, not just CSS.
Latest update: after applying changes, the logo and menu icon placement look correct, but the menu does not open when the icon is tapped. Two screenshots show the normal state and the state after tapping the icon, indicating the drawer isn’t appearing.
Status: unresolved. Key next steps are to fix the menu drawer’s open behavior (potentially involving theme header code changes) so the right-side drawer actually renders and animates as intended. Images are central to understanding the issue.
Add this css In your Base.css File
header-drawer{
grid-column: 2 / 2;
grid-row: 1 / 1;
justify-self:end !important;
}
.header--middle-left {
grid-template-areas: "heading navigation icons" !important;
}
.menu-drawer{
transform: translate(100%) !important;
left: unset !important;
right: 0;
}
.no-js details[open]>.menu-drawer, .js details[open].menu-opening>.menu-drawer, details[open].menu-opening>.menu-drawer__submenu {
transform: translate(0) !important;
}
I checked your requirements but it needs customization in header file of the theme for desktop and mobile.
1 Like
