Hi there!
I’m having an issue with my navigation bar on the mobile version.
For some reason, the menu on the mobile appears in the opposite order (I guess it’s because of the language which is RTL and not LTR).
When trying to reverse it on the mobile, it changes the order in the desktop as well.
Is there any way to reverse the other on mobile only?
Here’s is my site read-only:
Thanks!
I’m having this problem too and I can’t seem to find a solution to fix it.
Is it possible to create a mobile navbar with a new set of links that don’t reference the desktop parent links?
Yes, but you’d end up with 2x maintenance. Usually no reason to do that.
If you really wanted to, you can just create 2 navbars, and set them to appear/disappear at different breakpoints to make one “exclusively desktop” and one “exclusively mobile”.
A better solution is to just change the ordering on mobile.
I haven’t seen the RTL LTR issue before, but one away around it might be that on mobile, you change the container to flex, with vertical flow, and reverse the direction.
A better approach to RTL / English-Hebrew Navbars in Webflow:
In General, when you develop in RTL languages like Hebrew - you must set the document writing direction by applying the ‘dir’ attribute to the root HTML element.
In the specific case of Webflow - you wanna add two separate Code Embeds on each page:
<style>
:root {
direction: rtl;
}
</style>
<script>
document.documentElement.setAttribute('dir', 'rtl');
document.querySelector('.css_direction').remove();
</script>
Based on the set website direction (RTL) - Rows, Flexboxes and Grids automatically behave exactly the way you want them to.
The proper, structured & scalable way to RTL Webflow Development is by using RTLflow:
This system helps you set the document direction automatically, by using one component called “Global RTL Element”.
Hope this helps!
