Goal: Convert the Shopify Publisher theme’s main menu “drawer” into a full-page overlay with a black background and white menu text.
Context: The header/logo bar is transparent. Current drawer appearance is unsatisfactory. Screenshots show the current look and a desired full-screen overlay example.
Action taken: A helper suggested adding CSS in base.css to force the drawer to full width:
Result so far: The drawer now spans the full page width.
New requests (unresolved):
Status: Partially solved. Further CSS (and possibly theme-specific selectors or conditional styles when the drawer is open) is needed to center items, set background color for the logo row, and hide slideshow controls. Discussion remains open.
Hi,
I made the Header desktop Logo bar of my website transparent and have selected the main menu type as drawer.
i am not liking the way the main menu is showing as you click on it and would like if anyone can help in getting the drawer menu to take up the whole page with black background and white fonts for the menu.
This is how it is looking right now.
This is an example i saw on a shopify website and how i wanted my main menu to look like.
Please help!!
Hi @anshuep
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
div#menu-drawer {
width: 100% !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
