How can i evenly space out the tabs on my menu?

  • 1
  • Question
  • Updated 5 years ago
  • Answered
i have just recently lowered the number of tabs on my menu and they are all aligned to the left. i have gone through the site css to change this but no luck so far. maybe i am changing the wrong bit. I ideally would like them centred or evenly spaced across the menu bar.

Thanks in advance
Photo of sam mcausland

sam mcausland

  • 26 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Sam,

Which Yola template are you using? Do you have a Yola Gold or Silver account?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Sam

Before I can try and find out if there is a solution for what you'd like to achieve, I will need to ask you to clean up your Site CSS. When I open your CSS Editor, I can see that the whole original code has been copied over to the left-hand side overrides field. This is not the correct way to work with the CSS overrides. You should only add the code sections which you'd like to change. Redundant code can cause unwanted effects. Please see our tutorial on how to work with the Site CSS, then please clean up your overrides box by removing all redundant code.

Once done, please let me know on this thread, and I'll be happy to see if I can find some code solutions for you. However, while working with the Site CSS, I often realized that centering or justifying the menu links would not be possible, so I can't promise you anything.

Are you sure you want it that way? It is pretty common and a good design standard to align menu links either to the right or to the left-hand side and leave the rest of the space empty. Web design experts say that centering or justifying text is not recommendable because it makes it more difficult to read a website.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Sam,

The following code will center the menu. Depending on the length of the menu words, the -170px will have to be adjusted until the words are centered.


#menu {
position:absolute;
margin-left: -170px; left:50%
}