First, could you post a link to your site so that we can see what’s going on?
Secondly you need to consider very carefully creating a Child Theme. It’s the only recommended way of making changes to themes and is generally considered to be essential in the case of default themes like twentyeleven.
Once all that’s done, you can alter your child theme’s CSS to reduce the space between menu items. At the moment, each item has 10px of left and right padding:
#access a {
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
If you want to reduce that, you can do so by creating a rule (in your child theme’s style sheet) something like:
#access a {
padding: 0 5px;
}
You risk crowding your menu items together, rather, though. As a rule, your primary navigation should not be too busy. You may want to see if you can order your menu items into two tiers, using the drop down menu facilities available in twentyeleven.
HTH
PAE
First, could you post a link to your site so that we can see what’s going on?
Secondly you need to consider very carefully creating a Child Theme. It’s the only recommended way of making changes to themes and is generally considered to be essential in the case of default themes like twentyeleven.
Once all that’s done, you can alter your child theme’s CSS to reduce the space between menu items. At the moment, each item has 10px of left and right padding:
#access a {
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
If you want to reduce that, you can do so by creating a rule (in your child theme’s style sheet) something like:
#access a {
padding: 0 5px;
}
You risk crowding your menu items together, rather, though. As a rule, your primary navigation should not be too busy. You may want to see if you can order your menu items into two tiers, using the drop down menu facilities available in twentyeleven.
HTH
PAE
http://parrocchiadolo.it
Thanks peredur! I’ll give it a sight tomorrow!
On your site, the pertinent rule is:
#access a {
color: #EEEEEE;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
To get all your items on one line, you would need to create a rule like this:
#access a {
padding: 0 5px;
}
This looks far too crowded for my taste.
I would suggest either creating a two-tier structure, or making your menu labels shorter (i.e. fewer, shorter words as opposed to altering their width in CSS).
HTH
PAE