Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Align Floox Main Menu to center

Featured Lock Resolved Task
Hello,

How to change the Floox Main Menu Position to be at the center.

14 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
One line solution:

.sp-megamenu-parent { margin: 0 auto; float: none; text-align: center; }

Attachments (1)

  • custom_css_field_helix3.png
    custom_css_field_helix3.png 9.9 KB

Sohan - Staff

More than a month ago #Permalink
Open the menu.less file (path: templates/shaper_floox/less), now remove the line no. 17 & add this css property: text-align: center;.
If you already tried this & fail to full fill your needs then provide me some screenshots that show me your exact needs.

With Thanks
-Sohan

storm4design

More than a month ago #Permalink
Hi,
One line solution:

.sp-megamenu-parent { margin: 0 auto; float: none; }


Hello, I tried this but didn't work will with me.

Paul Frankowski - Staff

More than a month ago #Permalink
Maybe share site URL.
In my demo helped.

storm4design

More than a month ago #Permalink
Maybe share site URL.
In my demo helped.


It's working very well in my demo too & with the English version but doesn't work when I select the Arabic language

Attachments (2)

  • Screen Shot 2017-12-07 at 10.18.05 PM.png
    Screen Shot 2017-12-07 at 10.18.05 PM.png 40.1 KB
  • Screen Shot 2017-12-07 at 10.17.53 PM.png
    Screen Shot 2017-12-07 at 10.17.53 PM.png 539.6 KB

Sohan - Staff

More than a month ago #Permalink
For Arabic language, you have to do css on rtl.less file.

storm4design

More than a month ago #Permalink
For Arabic language, you have to do css on rtl.less file.

What to do exactly?
I add this line and nothing happend :
.sp-megamenu-parent { margin: 0 auto; float: none; }

Paul Frankowski - Staff

More than a month ago #Permalink
what <body> class name you have in Arabic mode ? can you tell me.

storm4design

More than a month ago #Permalink
what <body> class name you have in Arabic mode ? can you tell me.

I'm using the default when I select the Arabic language the template changed to RTL mode.

Paul Frankowski - Staff

More than a month ago #Permalink
Probably you have something like this :

<body class="ar-aa rtl

added by template, not manually as you thought probably.
----
Maybe add just a right margin for menu in Arabic only


body.rtl .sp-megamenu-parent { margin-right: 10%;}


Maybe not prefect solution but should help in you'll use proper value.

storm4design

More than a month ago #Permalink
Thank you all for your help, it's work with me now by edit template on the custom CSS at the

Attachments (1)

  • Screen Shot 2017-12-08 at 10.18.51 PM.png
    Screen Shot 2017-12-08 at 10.18.51 PM.png 245.6 KB

pepperstreet

More than a month ago #Permalink
One line solution:

.sp-megamenu-parent { margin: 0 auto; float: none; }


I believe a second line and rule is needed. @Sohan already mentioned it, but I would not suggest to modify any core LESS files. Simply add the following line to your custom CSS, too.

.sp-megamenu-wrapper { text-align: center; }


PS: This is the "real" center inside the menu column. The visual center depends on the Logo column and the search column. So in other templates than FLOOX, it might help to reduce the logo area a bit, and increase the menu column. This can be done in the layout editor -> column options.

storm4design

More than a month ago #Permalink
Thank you all for your help & support ^_^


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 137
Sifat

Sifat

Total Accepted Answers: 74
Toufiq

Toufiq

Total Accepted Answers: 41
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 15
Al Mamun

Al Mamun

Total Accepted Answers: 7

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us