.menu-box ul li {
margin-left: 21px;
}
If your theme doesn’t allow customising CSS you can use a custom CSS plugin or try and work out how to create a child theme. It’s not that difficult and there is plenty of advice on the net or in the Codex.
Hey martcol. Should I just delete that segment? Is that what’s causing the new line? I’m sure customizing the stylesheet is fine. I don’t think I need to go as far as creating a child theme as this is the only real adjustment that needs to be made. (also seems to be an issue with many themes, but the wording, order, etc of each theme’s stylesheet seems to be different. Solutions from another theme don’t apply to mine :/ )
Other themes CSS are unlikely to work if they are using different grids and/or id and selectors.
I think that if you drop that bit of CSS at the bottom of the Style CSS and comment it something like:
/*Added to make menu items narrower*/
.menu-box ul li {
margin-left:21px;
}
You could also find that rule and edit that instead. That might look something like this:
.menu-box ul li {
float:left;
height:106px;
line-height:106px;
/*margin-left:37px; change margin-left to make menu items smaller*/
margin-left: 20px;
position:relative;
}
Does that make sense?
You don’t need the comments but it will help if you have to look again in the future to find it and remind yourself what you did.
If you edit a themes CSS and update the theme the changes will be lost.
Hey martcol. Made perfect sense and also worked perfectly. Added the extra parameters at the end of the stylesheet and it fixed the problem. Thanks for the forewarning that CSS will update with theme updates. Now I’ll know how to handle it in the future. Much appreciated.
