I need to make some adjustments to my navigation menu.
1) make all navigation text centered, instead of aligned left
2) some of my menu points are very short (e.g. "Blog"), whereas others are longer (e.g. "Personalized Services"). What happens is that "Personalized Services" gets broken up, so it looks like this:
I would like to make the menu point for "Blog" smaller, and the menu point for "Personalized Services" larger, so that I can display it in one line, without a line break.
I could imagine this would work by defining the size of a menu item in terms of a fixed padding space left and right of the text, instead of a fixed total width for each menu item.
(so instead of making each menu item e.g. 115 pixels wide, there should just be a 10 pixel padding space on both the left and the right side of the text, and the width of the menu item itself would be generated dynamically according to the text).
Hope it's understandable what I'm after. It is essentially about making better use of the available space. I created an example graphic: