ThemeShaper Forums » Thematic


Add space between menu items

(6 posts)
  • Started 12 years ago by dnorthington
  • Latest reply from helgatheviking
  • This topic is resolved


  1. I've tried a number of things, but can't seem to modify my CSS to add space between my menu elements.

    My site is

    I'm using the following function to move it up to the top right:

    // Move menu to top right
    function new_header() {
    add_action('init', 'new_header');

    And the following CSS:

    /*** Align Menu in Header Right ***/
    .menu ul {float:right;}

    I've tried adding margin to a number of the Menu classes and IDs. I really admire the support provided on this site. Thanks in advance for any help.

    Posted 12 years ago #
  2. if i understood you correctly you are looking for:

    .sf-menu li {

    and if you havent already you should

    just as an fyi to anyone reading you could also have done


    this takes the menu out of the #header div completely and leaves the branding functions alone. your way works too though!

    Posted 12 years ago #
  3. Thanks for your great advice and quick reply. I have firebug and I think I tried adding margin to just about every other entry... I also switched to your suggested hook for moving the menu up, but out of the header div. It makes things easier to manage.

    Posted 12 years ago #
  4. This was great information, Helgatheviking.

    But how would you add space between the menu items if the needed to be uneven?

    For instance, I am currently working on a web site that requires the text to line up with the background image, which requires uneven spacing:

    How would I go about lining this text up with the back ground?

    Thank you for your help!

    Posted 11 years ago #
  5. bogh

    @megadutch try the following:


    #navigation ul li {
    	display: inline;
    	height: 30px;
    	float: left;
    	list-style: none;
    	margin-left: 30px;
    	margin-top: 10px;


    #navigation ul li {
    	display: inline;
    	height: auto;
    	float: left;
    	list-style: none;
            margin-left: 0px;
            margin-top: 0px;

    Add this to the end of your style.css file.

    /*Fix Main Menu Items*/
    a.menulink {
    	display: block;
            line-height: 36px;
            height: 34px;
    #navigation ul li:first-child {
    	padding: 0px 24px;
    #navigation ul li + li {
    	padding: 0px 23px;
    #navigation ul li + li + li + li {
    	padding: 0px 13px;
    #navigation ul li + li + li + li + li {
    	padding: 0px 16px;

    This should work till you decide for a more professional approach.

    Posted 11 years ago #
  6. if you use firebug you'll also see that each li element has a specific ID that you can also use to target. i don't love hard-coding things, but at the same time your menu isn't likely to change all that often.

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.