Adding Background Image to Off Canvas Menu in Pro

Support
#1

Hi there,

I was wondering if you could help me?
I’d like to show an image in the background of the Off Canvas menu, like the website below.
I cannot find an option in ‘Off Canvas’ to add an image background, please let me know how this can be achieved.

Many thanks.

(Hit the Toggle on top right hand corner to see image displayed in background of menu)

#2

I am also having trouble aligning the letters to the centre of the Off Canvas, set to 100% width.
Any guidance here appreciated.

#3

Hey Jayd,

Hope you’re well today.

There is currently no built-in option to add a background to the canvas menu. However, it is possible by adding some custom CSS to the element through the element’s Element CSS feature.

Please follow these steps:

#1. Edit the navigation element option then click on its Customize option.

#2. Add this code to the Element CSS field:

$el.x-off-canvas .x-off-canvas-content {
    background: #fff url(URL_OF_THE_IMAGE_FILE) no-repeat center center;
    background-size: cover;
}

Please do not forget to change URL_OF_THE_IMAGE_FILE with the image file URL in the code above.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

I have also added this feature in our Feature Request list so that it will be considered in future development.

Hope this helps.

#5

Hi there,

That’s wonderful! Worked perfectly. Thanks also for your super speedy reply, much appreciated.

Jayd

#6

You’re welcome!:slight_smile:

#7

One more question -

Is it possible to fade in the Off Canvas Menu - rather than have it sliding across into view?
Many thanks!

#8

Hey Jayd,

That would involve further customization. Would might want to check the CSS animation for that and apply it to the element using the Element CSS option.

https://www.tutorialspoint.com/css/css_animation_fade_in.htm

Hope this helps.

#9

Hi there,

No worries. Sorry, I think you missed a question earlier.
Is it possible to have the text centre aligned in the Off Canvas Menu?
I have set containers to Centre, Top Links to centre aligned, but can’t figure out how to make them sit in the middle of the page and to be centre aligned.

#10

My menu is here http://simplysignspreview.com/hrgroupnew/

Many thanks

#11

Hey Jayd,

You can add the following code in the Element CSS of your canvas menu element as well:

$el.x-off-canvas .x-off-canvas-content .x-menu > li > .x-anchor {
    margin: 0 auto;
    display: flex;
    align-items: center;
}

$el.x-off-canvas .x-off-canvas-content .x-menu > li > .x-anchor .x-anchor-content .x-anchor-sub-indicator {
  margin-left: 10px;
}

$el.x-off-canvas .x-off-canvas-content .x-menu > li .sub-menu .x-anchor {
    align-items: center;
}

Hope this helps!

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.