Add a Background Image to the Mobile Menu

What does this code do?

This code snippet will allow you to add a background image to the mobile menu.

Video Tutorial

Upload Your Image

Prepare an image for the mobile menu. It should be a vertical image; I find a ratio of 9:16 works well. For example you could create an image that is 844px wide and 1500px long. Upload your image to Design > Custom CSS > Manage Custom Files.

Code Snippets

I have provided code snippets with and without an overlay colour. Copy and paste one of the code snippets below into Design > Custom CSS.

/*Mobile Menu Image With No Overlay */
.site-wrapper .header-menu .header-menu-bg { 
  background: url("IMAGEURL");
    background-repeat: no-repeat;
    background-size: auto 100%;
}

/*Mobile Menu Image With White Overlay */
.site-wrapper .header-menu .header-menu-bg { 
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("IMAGEURL");
    background-repeat: no-repeat;
    background-size: auto 100%;
}

/*Mobile Menu Image With Black Overlay */
.site-wrapper .header-menu .header-menu-bg { 
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("IMAGEURL");
    background-repeat: no-repeat;
    background-size: auto 100%;
}

Then delete the work IMAGEURL, place your cursor between the quotation marks and click on the image you uploaded into the Manage Custom Files folder. You can change the strength of the overlay by change the 0.5 to any number between 0 and 1. Make sure you change it in both spots. If you would like an overlay that is not black or white, you can edit the rgba code provided for the linear gradient.

How To Use It

1. Prepare your image and upload it into Design > Custom CSS > Manage Custom Files.

2. Copy and paste one of the code snippets as indicated above.

3. Delete the work IMAGEURL, place your cursor between the quotation marks and click on the image you uploaded into the Manage Custom Files folder.

4. To change the color of the overlay, you can edit the rgba code provided for the linear gradient.