Resort style section headings positioned incorrectly after theme update

• reallymi

  said

  I had everything running and set up with the previous version of Vellum. After the update, I have the following issues with the site:
  1. title-bottom-attached is now sitting mainly above the screen area and therefore definitely not attached.
  2. Masthead items suddenly decided to align right with one of the menus on a subsite aligned left
  3. Go Pricing table is no longer a table and each column is 100% wide

  I thought maybe something went wrong with the update so I went to the Theme Updater and for some reason it doesn’t recognize my Parallelus login details. Now I don’t if this is because I have the theme running on multi-sites.

  These are the very visible issues at present.

• reallymi

  said

  I fixed the changed text-align items in the masthead and the Go Pricing table. However, is there a fix for the .title-bottom-attached no longer being attached and floating off the page?

• jeffw

  said

  That problem with title-bottom-attached is something we noticed that broke with the Visual Composer v4.3.5 plugin update. It was supposed to have been fixed, but for whatever reason it appears that it wasn’t fixed. I’ll start an issue for this with our development team and get back to you as soon as I know more.

• jeffw

  said

  Okay, I have a fix for this now.

  Unfortunately it’s not something we can fix with CSS. In the latest Visual Composer update WPBakery has nested a bunch of containers and they are giving every nested content container a relative position, so the only fix for this is JavaScript…

  jQuery(document).ready(function($){
    $('.title-bottom-attached').closest('.vc_column_container').css({
      'position' : 'absolute',
      'bottom' : 0
    });
  });

  Go to Appearance > Theme Options > Custom JavaScript and add that to your Custom JavaScript box.

  We’ll update the theme with this change, and after you’ve updated the theme again you’ll be able to remove that custom JavaScript.

• reallymi

  said

  Hooray! They are back to where they’re supposed to be. Thanks.

• dehayst

  said

  That Javascript fixed the titles being attached to the bottom of parallax images, but affected the anchor point detection for the menu to jump to the top of the image. Now the browser scrolls to the bottom of the image. Just me?

• jeffw

  said

  Yes, just you I think. Please start a new topic for this separate issue so that it can de dealt with in its own separate topic.

  Actually, I can see how this might happen. Again, same as the other problem, it’s because of the changes WPBakery made to Visual Composer. I’ll report it to our development team. I’ll let you know as soon as I know more.

• dehayst

  said

  Cool. Thanks. Crazy amount of nesting when checking it out in action with FireBug. In the short term maybe I could just add a row above the image with nothing in it and place DIV ID there. That might work.

• jeffw

  said

  Yes, your suggestion is the fix for this problem.

  In your article content duplicate a row that has an anchor and a section heading as its content (i.e. the content that is in a Raw HTML element). Edit the HTML in the upper of the two rows so that it has just the anchor div in it. For example..

  <div id="packages"></div>

  And also edit that row’s settings to remove the parallax background effect, remove the background image, and then set the top and bottom padding and margins for that row to zero.

  Now edit the HTML in the lower of the two rows so that it has just the section heading in it. For example..

  <h2 class="title-bottom-attached">PACKAGES</h2>

  You’ll need to do that for all the section headings in the article.

• dehayst

  said

  Right on. Leaves a small space at top, but does the job. Could always tweak a little more. Good to go though for now.

• jeffw

  said

  That space at the top is probably a margin or some padding. Edit the row settings where you’ve got the ID div and set its padding and margins to zero. If you can post a link to a live web page that displays the issue I will be glad to take a look.

• dehayst

  said

  Got it. replaced the hash marks they use as filler and keyed in “0px” and that did it. Thanks.

• plokamis

  said

  Hello I face the same problem and i didnt understand what you did here! Can you please explain again?

  THe scroll is not stoping at the beggining of the image but instead where the title words ends.

  Thank you!

  !!!!!!!UPDATE!!!!!!!!!!

  I found out tha adding a padding top percentage to the div (inline style div id=”example” style=”height:1px; padding-top: 42%;”) same as the rows padding-bottom then the scroll stops exactly where the parallax image begins. That Works DD

  Thank you Guyz

• chjan

  said

  Newbie on Vellum: I had the same problem, but could not get Jeffw’s advice to work. However, the row edit has a id field and when I put the “packages” name there, the theme works like the demo (Resort). Seems like an even simpler solution?

• jeffw

  said

  The way to fix this problem is described in this post → http://para.llel.us/support/groups/vellum/forum/topic/issues-with-resort-style-theme-after-upgrade/#post-67954

  I can confirm that it works.

  The ID field in row settings is a new feature of Visual Composer, introduced just recently. If adding the ID to that field also works, so much the better. Thanks for sharing your solution.