Change background overlay to an image, on off canvas

Support
#1

I would like my background overlay to actually be a still image. so when i click my hamburger menu it doesnt show a color it actually shows a full width and full height image on the right side. example attached

#2

Hi There,

Thanks for writing in!
The issue seems little confusing. Can you please describe a bit and post your website details in a secure note so that we can check.

Please provide following information:
Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password
    All the best!
#3

Okay, in the x-pro header builder i have clicked on navigation collapsed then i click “off canvas” where it has the option to add “overlay background”.

i was wondering if you could give me some code which would let me replace the overlay background with an image of my choice, like the example above i want to be able to add an image (blue box) instead of just have overlay background color…

hopefully that clears it up

#4

Hello @mhgwebsitedesign,

Thanks for updating the thread and I am really sorry for the confusion.

Please follow bellow steps to have image in background of Off Canvas element.

  1. Under Customize > Class let’s give a class name to the Navigation Collapsed element ex change-background-color. https://cloudup.com/cSZbSwSAGkf
  2. After that please add following CSS under Pro > Theme Options > CSS:
.change-background-color.x-off-canvas .x-off-canvas-bg {
    background-image: url(Enter Image URL);
}

In above code please change Enter Image URL with image URL. You can also change the class name.

I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

In above code that I have shared .x-off-canvas .x-off-canvas-bg is called as the selector. Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

1 Like
#5

thanks its has worked perfectly after a few more adjustments

1 Like
#6