Need to configure TS Visual Composer Extension's Figure Navigation tool

Hello and happy Sunday WPMU dev team! Hope that your weekend is fun and not too chilly :slight_smile:

I am using the VC extension from Tekanewa Scripts and am having a bit of trouble with one of the tools. Actually, more than a bit of trouble as I fear I might end up pulling my hair out if I try any more failed CSS attempts.

If you look at this page on their site underneath the heading "How do I actually get the Freebies?" you will see the tool I want to use, in use:
http://tekanewascripts.info/composer/?preview

It is the Figure Navigation tool.

The tool is used on the homepage of pennynicholslightingdesigns.com and is at the bottom of the page underneath the heading "Penny's Process."

If you look at the tool on my page vs theirs, you will notice a couple of major differences. The first is that the horizontal line that runs through the icon is not centered on mine. When I hover it, it extends even further out of alignment. I have tried dozens of CSS solutions (and no, I was silly and did not save them all but they involved width, position and other solutions) and the line will not change to look at it does on their site, centered and connected. I have inspected every element within the page on both my and their site and I just can't seem to find the obvious difference in our CSS.

I would like my line to look like theirs, connected and centered both horizontally and vertically.

Second, once you hover the navigation item on their site, the box that becomes "live" and drops down is centered and below the line. As you can see on my site, that box is slightly higher than the line and to the left. I can't help but think that perhaps this is an alignment issue with my theme and not the plugin. Either way, I am not yet sure how to find what to change in order to correct this. I have gotten much better at figuring out my own CSS solutions and feel rather happy about that, but this one has me stuck.

Could you please guide me with some CSS to center that darn line and the "content box" so that my Figure Navigation matches theirs. I know that I don't have the background images that they do and that is fine, I will add those later once everything is aligning.

Thank you so much! I did add some css to move the subtitle due to the fact that it was sitting on top of the icon. That CSS worked out well but as for the rest :disappointed:

I look forward to your answer and will be patiently waiting watching my gmail for it to come in :-p

Again, hope you are enjoying your Sunday!

Pura Vida,

Mandy

  • Michelle Shull

    Hoo, boy, that's a tough one.

    I've just tried throwing everything I've got at it, and it's a giant stubborn pain, isn't it?

    Hi, Mandy, btw! Always nice to see you here, even when you bring me questions like this. :smiley:

    Can you point to where you've set this up on your back end? I'm looking through the VC settings, and it's not standing out for me. I may just need more coffee, so don't laugh if it's right in front of my eyes.

    Thanks, Mandy!

  • Mandy

    Thank you for throwing everything you have at it! I feel like I have done the same and when we figure this darn thing out the plugin writer shall pay us to add our solution to their arsenal of support! hahahahah!

    Thank you as well for the compliments, it is super reassuring coming from someone as experienced in this world as yourself!

    Ok, so the question you asked me has a few parts to the answer. I also think I might know part of the problem.

    Visual Composer's settings can be adjusted under Settings>Visual Composer. I don't see any settings there to fix this.

    The VC Extension that provides the Figure Navigation can be adjusted under VC Extensions>Settings.

    The theme itself is adjusted under Qode Options>Qode Options. Within there you have a plethora of things that can be adjusted.

    I have grown to like Qode due to their natural integration with the VC, which just seems to make things quite a bit faster. It gives options that Canvas and Page Builder simple don't. While I love it, some framework settings are hidden like site width, etc. I think this might be a site width issue…not sure though. If you compare mine to theirs it just looks like mine is off to the left and up a bit.

    One thing that may be troublesome and maybe not, is that VC and Woocommerce are usually packaged within the Qode/Bridge Theme. I already had them active on the site as I was using them with Canvas, which is what I started building this project with. I am wondering if the plugins integrate differently if I already have them loaded vs the theme giving them? Basically, VC is included in Qode/Bridge and I am not sure if the version being used is my version that I bought and self-installed or the one that came with the theme. I also don't know if any of this would make a difference, they are the same plugin after all though they perhaps integrated differently. I could go into the cpanel and see if the folder for VC is inside of the Bridge theme? I say this b/c I also had some issues with the styling of the woocommerce shopping page that I had to correct with CSS and when I tried to add CSS and some new functions into the functions.php file to make the shopping page have less columns, it did not work…it has worked for me in the past.

    Enough of my rambling. Thank you for being amazing. Tell me if you think that what I addressed above is the issue or if you see something that I missed in the settings. Likewise, please don't laugh if I missed it and I have no excuse, I have been drinking coffee all day! LOL

    If I do need to mess with where the plugins are "firing" from, is there a way to move them so I don't lose my precious work :slight_smile:

    Chat soon!

    Pura Vida!

    P.S. I was putting the CSS within that page as Qode gives that option in each page. I see that VC Extensions also has a CSS place but since some of my CSS did affect things, even if it was not how I wanted, I guess it did work. Just throwing that out there!

    I just checked the Cpanel and I have VC and Woocommerce in both the Plugin folder under WP-content and Theme>Bridge>Plugins, where VC resides and Theme>Bridge> where woocommerce resides. Like I said, might be nothing but tell me your thoughts

  • Michelle Shull

    Hey Mandy!

    Sorry for the delay! I had a day off, and our backfeed was full full for a few days.

    I think you might be onto something with the packaged plugins. Is there any way to turn the plugins off via the theme so you can use your previously purchased version (which will be easier to update)? Also, check the version numbers of the packaged VC and WC plugins to make sure they're the same as your current version.

    As to the page width, I did a little searching, I think you're on to something there, too. I just read through 20 pages of support questions on Theme Forest, and it looks like the way this theme is set up is preventing you from making this fairly simple change.

    My suggestion, for now, is to try to adjust the width of the fancy spinny droppies (tech terms for the win!) to fit the current content area, if possible, and to use percentages, rather than pixels, so we don't lose any responsiveness.

    Another option to try, even though I know you've got a plugin heavy site, is to use a plugin devoted to just CSS, so we know it loads first and takes priority, rather than a battle between VC's CSS file and Bridge's.

    Any CSS you've already written (and works!) is fine to leave where it is, but let's try offloading the stuff that's not working thus far to it's own stylesheet.

    Hope this helps! That's a neat-o gadget, I hope we can make it work!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.