ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   dnorthington
   Member

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

   helgatheviking
   Moderator

   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 12 years ago #
3. 

   dnorthington
   Member

   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. 

   megadutch
   Member

   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 11 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 11 years ago #
6. 

   helgatheviking
   Moderator

   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.