Support Forums

Support Offline : 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

One week 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

One week 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
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

One week ago #Permalink
Maybe share site URL.
In my demo helped.
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

One week ago #Permalink
For Arabic language, you have to do css on rtl.less file.
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

One week ago #Permalink
what <body> class name you have in Arabic mode ? can you tell me.
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

One week 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.
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
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.
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: 142
Toufiq

Toufiq

Total Accepted Answers: 63
Shibbir

Shibbir

Total Accepted Answers: 27
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 5
Pavel

Pavel

Total Accepted Answers: 4

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