Background and off canvas modal

On my home page I am trying to duplicate a couple of elements from other sites that I believe do them very well.

The first is I would like my background image to operate like this one does: https://www.popdotmarketing.com/ Regardless of the size of my computer (minus a cell phone or tablet) The image stretches to fit. (I can even change the size of my image if need be)

Secondly, I am wanting to have links off canvas similar to the way they do it here: https://vaynermedia.com/ I have worked at hacking the look as best I can but the closest I can come is the navigation modal. I essentially want that in my off canvas space, with a few tweaks… Thanks in advance.

Hi Michael,

Thanks for reaching out.

  1. That’s a full-screen layout, you can either use Revolution Slider with its full-screen configuration like from here https://theme-fusion.com/documentation/avada/how-to/how-to-make-a-full-screen-revolution-slider/. Or set 100vh height to the section by adding this CSS to Section’s CSS
$el {
  height: 100vh;
}

The background image will then display as full-screen since it will stretch to whatever dimension the container has. BUT, this only changes its dimension, it doesn’t the element within it like contents will be responsive. For that, revolution slider full-screen feature is still better as the layers will respond to different devices.

  1. That’s a Navigation Collapsed element and not an off-canvas element. It’s also achievable through the bundled SuperFly Plugin.

Thanks!

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