ElkArte Community

How to align / float menu to the right (next to profile) without affecting its order?

I tried changing .listlevel1 to float:right but that will affect the menu order. I tried changing #main_menu, #menu_nav to float right as well but they are not working too.

[Community] [My Messages] [Mentions] to

Any ideas?

I may be wrong (nothing unusual), but I think that you can't do that with css alone, you have to rewrite the template_menu function to start generating the entries in the opposite order and then float:right.

That translates in adding a:

$context['menu_buttons'] = array_flip($context['menu_buttons']);

at the beginning to template_menu.

Thank you. I tested that but then the menu disappears. Any more ideas?

Edited: Error(s) array_flip(): Can only flip STRING and INTEGER values!

Sorry, wrong function... lol
array_reverse

Thank you very much. It works great.

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 ?

Too much css for my little brain. lol

If it works that's good. ;)

After going deeper into css, I think there is no need to change the index.template.php by adding any class at all. Simply using its available id may also do the trick. Case is properly solved using the following code in css.

/* Main menu repositioning without changing its direction */
#main_menu {
	float: right;
}
#main_menu ul {
	float: left;
}