Changing the width of menu made with css menu generator

This is very short tutorial that should help you to customize the width of the css menus generated with my css menu generator tool.

There are 2 hypotheses here: you want to resize the top-menu bar (the always visible menu line) or you want to change the width of the submenu items.

1) Change the width of the menu bar

This one is quite simple — just put your menu in container with specified width, something like that:

Put whatever value you need instead of “100px” in the example above

2) Resize the submenu items

The sub-menu width needs some not so trivial changes in the css.

Look between lines 57-82 of the css file, it should look similar to that:

(the comments are pointing the values to be changed)

Let say you want to give 2 ems more for the submenu width. In such case it must look like that now:

As you see, the easiest way is to add/substract what you need, but keeping the proportion. Still, it’s up to you — I prefer to use “ems” but you can set pixels or points or what best suits your needs.

Leave a Reply

Your email address will not be published. Required fields are marked *