ThemeShaper Forums » Thematic

[closed]

Add space between menu items

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

Tags:

  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 http://dnorthington.com

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

    // Move menu to top right
    
    function new_header() {
        remove_action('thematic_header','thematic_brandingopen',1);
        remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'new_header');
    add_action('thematic_header','thematic_access',1);
    add_action('thematic_header','thematic_brandingopen',2);

    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 4 years ago #
  2. if i understood you correctly you are looking for:

    .sf-menu li {
    margin-left:10px;
    }

    and if you havent already you should http://www.getfirebug.com

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

    add_action('thematic_aboveheader','thematic_access');

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

    Posted 4 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 4 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:

    http://megadutch.com/Chicapera/

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

    Thank you for your help!

    Posted 2 years ago #
  5. bogh
    Member

    @megadutch try the following:

    Replace:

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

    With:

    #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 2 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 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.