First, thanks for making such an awesome theme. I will be recommending/purchasing it for all future clients.

The website in question is:

http://www.yaka.life
WP: 4.2.2
X: 3.2.5
X-Shortcodes: 3.0.5

I am building a single page site with the Navbar fixed to the right of the screen.

Within the content I would like to be using a parallax effect. Right now it works, minus one issue. The images stretch across the full screen underneath the Navbar.

Is there a way to force the images to respond to the width/position of the Navbar?

With the initial Background Images I used the CSS code:

.backstretch img {
width: 78% !important;
height: 100% !important;
top: 0px !important;

Pretty sure this is a sloppy and inefficient way to fix this issue. Also, on larger computer screens, it forces a white area in between the Navbar and the image.

Is there a better way to do this? I noticed that when I used Revolution Slider “Above Masthead” on the page, their feature to “Offset Containers” worked perfectly when I put in “#x-navbar x-navbar-fixed-right”.

My question is, is there a way to use “Offset Container” for the background images that I want a Parallax effect with?

Thanks for the support!

display: block; 
height: 500px; 
background-size: 78%; 
background-position: 0% !important;

Seems to work, but again it is a sloppy way to fix it, as it makes the formatting strange on large screens.

Thanks again for the help

Thanks for writing in! Please try to change your background-size: 78%; to background-size: cover;

Hope it helps, Cheers!

This causes the image to go behind the navbar, just as it would without any code. It seems like the element is not recognizing the Navbar as limit to its size.

Any other ideas?

Appreciate your continued support.

Please replace your css code with this code instead:

.backstretch img {
  width: 80% !important;
  width: calc(100% - 325px) !important;
  height: 100% !important;
  top: 0px !important;
}

We’d love to know if this works out for you.

This does seem to work better then the code I had. I need to get to a larger computer screen to test it fully, but so far it seems like a great fix.

Can you help me understand what is happening here, because I would like to do this same thing for all of the paralaxing images further down in the site. I attempted to reformat the code you gave me above and apply it to the paralaxing images, however it did not work.

The images in question are the three that say:

“A place to create community”
“Dream a project make it real”
“We provide resources for your creativity to flourish”

The code I am using is:

display: block; 
height: 500px; 
background-size: 78%; 
background-position: 0% !important; 

This seems to work for screens around 13-15′ but breaks on anything bigger and also starts to format funny is the browser window size is stretched to strange aspect ratios.

Your support team is the reason I will continue to recommend, and purchase, Theme X licenses.

You all are great!

Thanks you!

Please try to use only this code:

display: block; 
height: 500px; 

You do not need background size and background position. Adding these two, changes the behaviour of the parallax effect within your content. You can try to check and compare with and without it. You do not need to adjust the width because the content band doesn’t run through behind your sidebar unlike the background image stretch.

Hope this helps.

Apologize about the delay between my responses. This is a project being built at a slow place.

Unfortunately your last response is not true. The parallax images do indeed go behind the Navbar and will not fit to the size of the website.

Also, I am disappointed to report that your new cornerstone does not function

at all

with a webpage that has Navbar Fixed Right. Was really hoping that it would be able to solve this problem, but I have attempted to rebuild the page using Cornerstone and have run into more issues then I did with Visual Composer. Issues include not being able to add elements to Rows, as they do not appear.

Is there a possible CSS code that can be used to fix this issue like the one we used for the .backstretch img?

Thank you for the continued support.

Sorry if that didn’t work out for you. Please remove the code we gave you in our previous reply. How about we try this code for the backstretch

.home .backstretch {
  width: 90% !important;
  width: calc(100% - 325px) !important;
}

.home .backstretch img {
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: none !important;
  max-height: none !important;
  max-width: 100% !important;
}

With the code above, this is what the results:
http://prntscr.com/7g1wmc
http://prntscr.com/7g1x2y

And for your parallax effect, please try to remove you inline css background-size: 78%;. This is the results without the background size:
http://prntscr.com/7g1xy4
http://prntscr.com/7g1yan
http://prntscr.com/7g1ykx

Hope this helps.