Jump to content
Sign in to follow this  
alargeau

How to center items in menu so they can use the whole length?

Recommended Posts

alargeau

Hi there, First of all, let me tell you that this theme definitely rocks! I've got a very silly question and didn't find the answer on this very forum. Within the menu bar, if I have 4 pages for instance, it will display let's say: the Home icon, About, Page X, and Contact. If I do that, the menu bar will be visually divided in three parts: a part with buttons, another part that's just empty and the last part with the search box. The thing is when you have not too many pages, the bar sort of looks empty and there's a big space between the last item (so contact for instance) and the search box. The space is quite useless and doesn't look good. So, is it possible to automatically "center" all those items so the menu bar can be used "completely" and won't display a big empty space? Of course, that would result in larger buttons but that's precisely the goal. Hope I was clear enough... Thanks a lot.

Share this post


Link to post
Share on other sites
kastelic

Yes it certainly is with CSS. In the custom code section there's a 'custom css' box. Get Firefox if you don't have it and then an extension called Firebug. Then you can right-click on elements and 'inspect' them to see which CSS rules to use. Check out this link here: http://www.w3schools.com/css/ to learn about CSS.

Share this post


Link to post
Share on other sites
alargeau

Thanks for both the reply and the link. I do have Firefox and Firebug installed on it but it seems quite complicated without some hints. I did notice that the menu is divided in three parts: the home button & icon, a "free" space where the pages go, and the search box. I also noticed that the free space has a "float:left" value which is probably the answer to my question. But still, this value which is in the "ul" attribute seems to be as mportant as the one appearing within the "li" attributes.

Share this post


Link to post
Share on other sites
catrina

The "float:left" value is there to align an item to the left and it can only float to the right if "right" was added (there is no "center" setting). Adding

margin-left: 10px;
to the
#nav ul
selector might work, though, for pushing the menu items more toward the center. For example, try adding this to your CSS:
#nav ul {margin-left: 10px;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alargeau

Hello and thanks again for the reply. I did what you said but it only makes the Home icon to be 10px more to the right (thus it's not centered anymore). Isn't there a simple way to "tell" the buttons to automatically adjust to the width? Because the width (650px) is something the css "knows". I've searched for the answer for 2 whole days and I can't find it. I'll let you know if I find out.

Share this post


Link to post
Share on other sites
kastelic
#nav ul li a:hover, #nav ul li a {padding: 9px 30px;}

Change the 30px to whatever you need.

Share this post


Link to post
Share on other sites
alargeau

Well, thanks a lot Jimmy, it definitely works!! Very happy, thanks again!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×