I have an update to this topic since "I think" I have a better and cleaner solution. Rather than adding the suggested code in index.template.php, insted, I added a class inside main menu and add a css styling for it.
The only code that needed to be changed is:
<ul id="main_menu" role="menubar">
I changed it to:
<ul id="main_menu" class="menu_direction" role="menubar">
Then I add below this code in the respective variant css:
/* Level 1 Menu bar: link or button. */
/* If there will be a border on hover, have a border here. */
The menuside class css:
/* Main menu repositioning without changing its direction */
#main_menu {
float: right;
}
.menu_direction li {
float: left;
}
This way, while main menu is now floating to the right, the menu direction from left to right is still maintained as required.
What do you think @emanuele ?