-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Made mobile drawer full width by default-header #2625
Made mobile drawer full width by default-header #2625
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚀
Thanks Louisa, this looks good. Just want to confirm with @YoannJailin that desktop and "tablet" drawers should remain as they are (viewports 750px and wider). |
Hello! Thanks it looks great. ![]() |
…when l1,l2&l3 links were opened
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚀
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry! I realized what's going on with the right-side border on the drawer. More details in the comments. I don't think this is a big problem but we should probably make some adjustments.
…top and removed it for mobile version
assets/component-menu-drawer.css
Outdated
.no-js .menu-drawer { | ||
height: auto; | ||
|
||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.no-js .menu-drawer { | |
height: auto; | |
} | |
.no-js .menu-drawer { | |
height: auto; | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for catching that! I just removed it and pushed the changes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! Thanks for the final tweaks 🚢
* Made mobile drawer full width by default-header * removed the small vertical line border kept appearing on drawer menu when l1,l2&l3 links were opened * reverted code to include border for customization for tablet and desktop and removed it for mobile version * removed border in mobile and added it in tablet version using media queries * removed white space per suggestion
* shopify/main: (59 commits) [Announcement bar] Add social icons (Shopify#2497) Update theme version to match the pubic release (Shopify#2698) Add release/v10.0.0 branch fixes to main (Shopify#2693) fix default UI for dropdown and mega menu (Shopify#2644) Fix link formatting in Related Products heading (Shopify#2680) Update 2 translation files (Shopify#2637) Enable gift card recipient form by default on featured product section (Shopify#2666) Gift cards/enable recipient form by default (Shopify#2618) Add a Color Scheme setting for Menus-Header (Shopify#2622) Made mobile drawer full width by default-header (Shopify#2625) Allow multiple announcement bars in Header group (Shopify#2619) [Feat Product] Add rating styling sheet (Shopify#2620) Fix password page variables (Shopify#2607) Fix transform applied when it should not for sliders (Shopify#2606) Modify info string for gift card recipient checkbox (Shopify#2588) [3D lift animation] Raise hovered card above adjacent cards (Shopify#2589) Remove fallback color scheme info text (Shopify#2602) Fix CSS specifity issue to cancel animation for theme editor events (Shopify#2605) Remove settings daya for icon color (Shopify#2601) Follow ups for accessibility of announcements slider (Shopify#2580) ...
* Made mobile drawer full width by default-header * removed the small vertical line border kept appearing on drawer menu when l1,l2&l3 links were opened * reverted code to include border for customization for tablet and desktop and removed it for mobile version * removed border in mobile and added it in tablet version using media queries * removed white space per suggestion
PR Summary:
Mobile drawer is full width by default
Why are these changes introduced?
Fixes #2563
What approach did you take?
I changed the width of the menu-drawer to be 100% by default.
Visual impact on existing themes
Not Applicable
Testing steps/scenarios
Demo links
Checklist