Gravitate breaking Royale theme menu

I’ve extensively searched for a solution, reviewed documentation, and still can’t resolve the issue. Seeking assistance.

Using the Royale theme in Rapidweaver for my existing site, everything functions well. However, upon adding the Gravitate stack without any modifications, the menu button disappears on both mobile and desktop versions. To isolate the problem, I created a new single-page project, added a stacks page, and inserted a Gravitate stack. Testing with various themes, including those from Nick Cates, the Gravitate stack works flawlessly. The menu button conflict only arises with the Royale theme. I’m seeking a resolution without the need to redesign the entire site with a different theme. Your help is greatly appreciated.

Hi @uluckidog – Sounds like a javascript conflict at first blush. That said I can’t troubleshoot it currently as I do not have a copy of the theme you’re using. If you’d like to provide a copy of the theme for testing, as well as a copy of your project file, I can take a look when I am back in the office after the weekend.

Create a ZIP file containing your project file and the them. The project file is the file you open in RapidWeaver to edit your site. After creating the ZIP file, upload it using a service like Dropbox, WeTransfer, Droplr, or a similar service to create download link for us. Paste that download link in a email to me, and also reference this forum thread so I know they’re related. You can email me at adam at elixirgraphics dot com

sent. I look forward to hearing back from you. Thank you!

Looking at your project file I see no javascript errors being thrown in the console:

My guess, without digging through every line of code for the theme, is that the animations applied to the navigation after conflicting with the animations in Gravitate. This is likely just one of those instances where two addons from different developers isn’t going to work together unfortunately.

Hi Adam,

Thanks for your prompt response, although I have to admit it left me somewhat disappointed. The first thing I did was inspect the element in the console to see if I could see any obvious conflicts or warnings and I didn’t. I’ve invested a considerable amount of time in integrating Gravitate animations into my site, so hitting this roadblock is bit of a setback for me. I’ll admit that I should have tested Gravitate first but I didn’t. It all looked great to me and the animations were smooth and stunning. I just sort of need my menu back :). I’ll also admit…it won’t be the end of the world if I must remove Gravitate completely. (Pretty damn close though… :slight_smile:

I’ve been a RapidWeaver user for nearly two decades, and one of the main reasons I use platforms like yours is to avoid these exact technical hurdles. I’m not a JavaScript expert, and I was hoping for some actionable guidance, not a “it is what it is” situation.

I get that combing through every line of code might not be feasible for you. However, could you perhaps point me toward someone who could help? Whether it’s someone on your team or a contact in your network, I’d appreciate the assistance and I’m willing to compensate for their time.

I’d also like to narrow down the root of the issue. Is it more likely to be a conflict with the updated Royale theme or something within the Gravitate stack itself? Do you have access to an older version of the Nick Cates Royale theme that I could test? Perhaps you know someone who does? This could help determine if the problem is with the theme or if it’s stack-related. I will also reach out directly to Rapidweaver since they own the Royale theme now and not Nick Cates. Perhaps they will have some insight.

I’m also reaching out to the RapidWeaver community for insights, but given that the conflict involves your product, your expertise would be incredibly valuable.

I’d be willing to pay a consultation fee if that makes it more feasible for you to assist. Your help would mean a lot to me as I work to resolve this issue. But first, as I said, I will check with Rapidweaver directly.

Thanks again.

Sorry my answer took you off guard. I wasn’t trying to put you off or pass the buck. Sometimes things just are not compatible. This is even more likely when the two addons are coming from different developers. When things are designed to specifically integrate with one another it is a different situation. Different developers though may use similar naming schemes that might override each others code, or may use different 3rd-party libraries that are not compatible with one another, etc.

There is no “team” or network of people here. Elixir is just me. I wear all of the hats, so-to-speak.

As I mentioned in my previous post – there are no javascript errors showing, so I don’t suspect that is the problem. I thought at first it could be a conflict between the jQuery instance the theme is loading, and that which is being loaded via Stacks for the Gravitate addon, but I experimented with this and it was not the case.

As for the theme’s previous version – I don’t have an older copy of this theme. I didn’t even own the newest copy of the theme, which is why I needed you to provide it to me for testing.

Speaking of testing…

I’ve sat now for an hour or so now combing through the theme’s CSS and javascript. What I’ve fgound is that the theme targets the menu css using a direct child combinator (>) to select and style the navigation element.

Something like this:

body > .menu_btn {
   // styling for this selector here
}

This means the element with .menu_btn class must be a direct child of the <body> tag.

Gravitate though wraps everything inside of the <body> tag in a <div> of its own in order to apply the animations, etc to your content and track the scrolling.

This means anything with a direct child combinator that is applied to the body will not work as the direct child of the <body> tag is now that Gravitate wrapper.

Neither of these two products is doing anything wrong, or incorrect, it is just that what they’re doing doesn’t work together. If I go in and modify the code of the theme so it doesn’t use this direct combinator, or I remove the code Gravitate needs to wrap the contents of the page, then things begin to work, more or less. In the case of modifying the the theme’s code – the menu shows but isn’t styled quite right and has some problems when toggled. Or in the case removing the Gravitate wrapper element Gravitate ceases to work, but the navigation is A-OKAY.

For the theme, or the addon to work they way they need to these bits of code need to stay how they are, which leads to the two not being compatible. Again, neither is a bug, and neither is doing anything incorrectly, they’re just not compatible, which is what I thought to begin with.

3 Likes

Thanks Adam for looking into this in greater detail. There was one part off the theme code that misspelled a ui reference. You will see in the following code menu misspelled on the 3rd line. I am not sure what it is referencing or even if it could be relevant…probably not.

<div class="menu_mask"></div>
	<div class="menu_btn">
		<div class="meun_ui"></div>

I do appreciate your comments and I understand what you are saying completely. I guess I was incorrect in assuming that since Gravitate is a Rapidwaver Stack and sold on the Rapidweaver website that it would at least be required to be compatible with all of the themes developed and sold directly by Rapidweaver…Royale is not a 3rd-party theme anymore. I will run this by them and see if they can offer something further.

I appreciate your thoughtful reply.

Thank you.