Search code examples
cssright-to-leftbulma

RTL bulma css navbar

I am trying to add the option for RTL users in my site. I am using bulma (V 0.5.2), most of it (the rtl) is working out of the box with a simple "style=direction:rtl" on the body tag. However, the navbar is acting funny. How can I make it work correctly with RTL?

This is what it looks like on desktop with rtl:

This is what it looks like on desktop with rtl

And on mobile it's like this:

And on mobile it's like this

Solution

  • Well, i have solved it by digging a bit in the code and understanding what should be changed in oreder for it to work properly as RTL navbar.

    We have three main sections in the navbar, and i recommend making a class for it in you app.css or whatever name you have for your css called rtl-navbar and apply it on navbar-burger, navbar-end. on top of this, you should apply direction:rtl on the main navbar container.

    .navbar-rtl{
   margin-right: auto;
   margin-left: 0;
}