Skip to main content ↑ ↓
Topic: How to align / float menu to the right without affecting its order? (Read 3022 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

How to align / float menu to the right without affecting its order?

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
[Community] [My Messages] [Mentions]

Any ideas?

Re: How to align / float menu to the right without affecting its order?

Reply #1 –

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:
Code: [Select]
$context['menu_buttons'] = array_flip($context['menu_buttons']);
at the beginning to template_menu.
Bugs creator.
Features destroyer.
Template killer.

Re: How to align / float menu to the right without affecting its order?

Reply #2 –

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!
Last Edit: October 17, 2014, 02:16:05 pm by ahrasis

Re: How to align / float menu to the right without affecting its order?

Reply #3 –

Sorry, wrong function... lol
array_reverse
Bugs creator.
Features destroyer.
Template killer.

Re: How to align / float menu to the right without affecting its order?

Reply #4 –

Thank you very much. It works great.

Re: How to align / float menu to the right without affecting its order?

Reply #5 –

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:
Code: [Select]
<ul id="main_menu" role="menubar">

I changed it to:
Code: [Select]
<ul id="main_menu" class="menu_direction" role="menubar">

Then I add below this code in the respective variant css:
Code: [Select]
/* Level 1 Menu bar: link or button. */
/* If there will be a border on hover, have a border here. */

The menuside class css:
Code: [Select]
/* 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 ?

Re: How to align / float menu to the right without affecting its order?

Reply #6 –

Too much css for my little brain. lol

If it works that's good. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: How to align / float menu to the right without affecting its order?

Reply #7 –

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.

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