Public Forums 71,145 posts

[joomler31 Friend joomler31Join date: January 2010Posts: 2Downloads:0Uploads:0 Thanks: 2]

#147371

Hello !

I’d like to know how to center the main menu.
Currently and by default, it is on the left.
I tried many combinations but that they fail.

Can you help me please ?

All I need is this element to complete the creation of my website.

Pending you read

Thank you so much !

[jaybrd1 Friend jaybrd1Join date: November 2009Posts: 28Downloads:0Uploads:0 Thanked: 7 times in 5 posts]

#328466

Just a question, are you using a fixed width for your website or a fluid width?

I have not quite figured out how to center the menu with a fluid width, but with a fixed width, you can just use “margin-left” or “padding-left” to push it to the center.

1 user says Thank You to jaybrd1 for this useful post

1. joomler31

[joomler31 Friend joomler31Join date: January 2010Posts: 2Downloads:0Uploads:0 Thanks: 2]

#328473

Firstly, thank you for your response jaybrd1.

If I am not mistaken, you would like to know the parameters of my template? I fixed Template Width: 100

Next, where should I intervene to fix the values that you have suggested?!
“margin-left” or “padding-left”?

Pending you read

Thanks !

[jaybrd1 Friend jaybrd1Join date: November 2009Posts: 28Downloads:0Uploads:0 Thanked: 7 times in 5 posts]

#328487

Just to be clear here…

Fluid width means when you resize the browser, you content resizes as well.
Fixed width means the the content stays the same size even when you resize the browser.

If you use a fixed width template (likely not 100px), then you can use margins to adjust the position of the main menu.

To do this I believe it is LINE 16 in mega.css :
<blockquote>ul.megamenu { margin: 10px; /* menu’s gutter */ } </blockquote>

you would change it like below:
<blockquote>ul.megamenu { margin: 10px 10px 10px 10px; /* menu’s gutter */ } </blockquote>

the 4th 10px is the number you would change to push the menu to the right , you would adjust this number until you reach your desire position.

I hope I have the right line, I have consolidated my css files and compressed them, so they look a little different.

[amybaron Friend amybaronJoin date: April 2010Posts: 2Downloads:0Uploads:0]

#341511

<em>@jaybrd1 159298 wrote:</em><blockquote>

I have not quite figured out how to center the menu with a fluid width, but with a fixed width, you can just use “margin-left” or “padding-left” to push it to the center.</blockquote>

i know this reply isnt timely but to center the menu in a fluid width layout, setting the margin-left and margin-right to a percentage that is the same number should work (works for me). ie:

[FONT=”Courier New”].ja-megamenu { margin-left: 15%; margin-right: 15%; padding: 0; }
[/FONT]

i dont think the percentage number matter as long as it is the same number for both left and right. i hope this is useful!

[toymaker Friend toymakerJoin date: April 2010Posts: 123Downloads:0Uploads:5 Thanks: 10 Thanked: 45 times in 32 posts]

#341719

For truly centering the menu, you can define the menu width and set the left and right margins to auto.

.ja-megamenu { margin:0 auto; padding:0; width:600px; }

You will probably have to play a little with the menu width to make an exact fit of it. (using the Firefox firebug toolbar will give you a quick answer)

Peace,
Gabriel

BTW… this will work no matter if you have a fluid or fixed width setting on your page.

1 user says Thank You to toymaker for this useful post

1. halemaumau

[Author]

Posts