ThemeShaper Forums » Thematic

Changing space between items in menu?

(3 posts)
  • Started 10 years ago by awarner20
  • Latest reply from awarner20
  • This topic is resolved
  1. Yet another css question...

    I am trying to shorten the space between list items in the main navigation menu. The only css I've found that affects this is:

    .sf-menu li {
    	float:left;
    	position:relative;
    }

    I added a negative margin to this and was able to achieve the look and position I needed.

    .sf-menu li {
    	float:left;
    	position:relative;
    	margin-right:-10px;
    }

    However, when hovering, you can see the right side of the list item chopped off because of the hover background color.

    Is there a more elegant way to change the space between list items in the main menu?

    Posted 10 years ago #
  2. This is controlled by:

    .sf-menu a {
    padding:9px 13px;
    }

    Chris

    Posted 10 years ago #
  3. Thanks Chris, I really appreciate it. It was my lack of full css knowledge that led me to skip over this pseudo class selector and padding property because of seeing only two values. I was expecting either one or four.

    I now understand that 9px controls the top and bottom and the 13px controls the right and left padding.

    ...learn something new everyday! :)

    Posted 10 years ago #

RSS feed for this topic

Reply

You must log in to post.