DAWN THEME: HOW TO MAKE MOBILE MENU FULL SCREEN

Store Design
, , , ,
1

Hi, on my mobile website

how do I increase the length of my menu to the screen height so that the background image banner does not show?

IMG_2243.PNG
IMG_2243.PNG1170Ɨ2532 109 KB

1 Like
2

Hey @skymochi ,

To increase the length of your mobile menu to cover the screen height and prevent the background image banner from showing, you can use custom CSS to adjust the height of the mobile menu. Hereā€™s how to do it:

  1. Open your Shopify theme settings:

-Online Store > Themes

-Select Customize for your current theme.

  1. Add custom CSS:

-If your theme supports it, you can add custom CSS through the theme setting or by directly editing the themeā€™s CSS file.

-You will want to target the mobile menu container and adjust its height to cover the screen.

  1. CSS code to adjust the height: Add the following CSS in the theme.scss.liquid or theme.css file under Online Store > themes > Edit Code.
@media only screen and (max-width: 767px) {
  .your-menu-class { /* Replace this with the actual class of your mobile menu */
    height: 100vh; /* 100% of the screen height */
    overflow-y: auto; /* Allow scrolling if the menu content is longer */
  }
  .your-banner-class { /* Replace this with the actual class of your banner */
    display: none; /* Hide the background banner when the menu is active */
  }
}

This should help you prevent the background banner from showing while the mobile menu is open, ensuring the menu covers the entire screen height. Let me know if you need further assistance!

If I was able to help you, please donā€™t forget to Like and mark it as the Solution!
If youā€™re looking for expert help with customization or coding, Iā€™d be delighted to support you. Please donā€™t hesitate to reach out via the email in my signature belowā€”Iā€™m here to help bring your vision to life!

Best Regard,
Rajat Sharma

3

Hi @skymochi

TRy this one.

  • From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€
  • Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  • In the ā€œtheme. Liquidā€ file. Find the tag and paste the code below before the tag.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

4

Welcome! Would you mind hitting ā€˜likeā€™ as well? Thanks!