How the center menu

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Hi I am trying do center the menu, but i didn't find the way to do it, any chance someone can point me the right CSS line I need edit ? I tried a couple without results :

http://terrauc.yolasite.com/

Thanks !

Paulo
Photo of pdanielt

pdanielt

  • 5 Posts
  • 0 Reply Likes
  • happy !

Posted 6 years ago

  • 1
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Paulo
Your menu looks pretty much centred to me.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello Paulo,

Your menu looks centered to me as well. Could you provide a screen shot of how you see your menu?

Or do you mean the links in the menu?
Photo of pdanielt

pdanielt

  • 5 Posts
  • 0 Reply Likes
I might expressed myself wrong. Inside the menu I have 7 pages that I created but they are all aligned left and not center. The menu itself is the right place :-)

Sorry about it, guys !
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Sorry Paulo I still don't get it, hopefully Nathan can help.
Photo of pdanielt

pdanielt

  • 5 Posts
  • 0 Reply Likes
Trying again (sorry again I am having hard time to find the right words to explain this) :

How I can center the contents (pages/links) inside the menu (not the menu bar itself that is already centered on the page)?

I included a image to try explain what I would like to center :

Photo of Jean

Jean

  • 134 Posts
  • 14 Reply Likes
pdanielt, I'm looking at your site in FireFox 9 and your menu is centered on the page. What browser are you using? Internet Explorer? Chrome? Opera?
Photo of pdanielt

pdanielt

  • 5 Posts
  • 0 Reply Likes
Chrome

But is more the content inside the menu bar then the menu itself that isn't centered.

Thanks !

Paulo
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Paulo,

This is because the {float} is set to the left in the CSS. There are only two possibilities Float: left and float:right. There is no float:center command.

There is a workaround to center the menu items but it is very complex and something that you have to work out rather than a simple statement or formula.

You need to be able to work out the length of each menu item. Add the left margin for each menu item. Obtain the wrapper length of the menu bar. From this you then calculate the left margin for the menu bar and insert this into your CSS. If you make a change at all to your menu then you have to go through the whole procedure again.

After all that I think it would be extremely difficult to do this with Yola Free subscription as I'm really gearing this to Yola Silver where you have access to changing the CSS easily.

You may also be able to get an idea of the process using the Chrome Developer Tools set in your Chrome browser.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Actually, you can specify the width of the menu links' parent element and then add margin: 0 auto; to center the elements. (this sets the left and right margin to auto making it center) I do this all the time to center elements and it works perfectly if you specify a width.

Here you go, insert this into your CSS and it should center it, however, if you add a menu link you'll need to increase the width to fit your needs:


div.ys_nav ul {
list-style: none;
padding: 5px 17px 0 17px;
margin: 0 auto;
width: 687px;
}



Here's a screenshot of how it would look (I used developer tools to manipulate it):



I hope this helps.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
That's great fix nathan. Well done.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Gop. Nice smiley icon ;)
Photo of pdanielt

pdanielt

  • 5 Posts
  • 0 Reply Likes
Worked perfectly, thanks a lot Nathan ! And also all those that tried to help