Support Forum - Topic: Adjust Individual Menu Item Spacing

Support Forum - Topic: Adjust Individual Menu Item Spacing http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing Support Forum - Topic: Adjust Individual Menu Item Spacing en-US Sun, 19 May 2013 02:39:01 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Dude on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-17033 Thu, 14 Apr 2011 14:20:59 +0000 Dude 17033@http://www.kriesi.at/support/ Hey, I'd paste it at the very bottom of style.css. northstarpc on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-16965 Wed, 13 Apr 2011 16:34:54 +0000 northstarpc 16965@http://www.kriesi.at/support/ Where EXACTLY do we paste the code in the source code file? James Morrison on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-13065 Thu, 17 Feb 2011 12:24:43 +0000 James Morrison 13065@http://www.kriesi.at/support/ Hey, Glad this is resolved, let us know if you have any other questions. James JoelAnthony on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-13051 Thu, 17 Feb 2011 10:53:17 +0000 JoelAnthony 13051@http://www.kriesi.at/support/ Worked great, thanks! Dude on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-11267 Thu, 13 Jan 2011 16:40:45 +0000 Dude 11267@http://www.kriesi.at/support/ Hey, the source code is what your browser receives from your server. I don't know which browser (it's browser dependent) but here you can find a good tutorial: <a href="http://www.computerhope.com/issues/ch000746.htm" rel="nofollow">http://www.computerhope.com/issues/ch000746.htm</a> You just need to add the code I posted above but you need to adjust the item ids. I.e. your first menu items have the ids menu-item-73 and menu-item-72 To adjust the witdh individually you must add following code to style.css: <pre><code>#menu-item-72 a{ width: 100px; } #menu-item-73 a{ width: 80px; }</code></pre> JoelAnthony on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-11237 Wed, 12 Jan 2011 13:46:34 +0000 JoelAnthony 11237@http://www.kriesi.at/support/ Thanks for the tip, but still a bit confused as I am somewhat new at editing code. The source code is found in what file? And to change the width just add the sample code you provided ? Dude on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-11228 Wed, 12 Jan 2011 10:44:13 +0000 Dude 11228@http://www.kriesi.at/support/ It would look like <pre><code>#menu-item-72 a{ width: 100px; }</code></pre> You can find the ids in your website's source code - atm you have following menu items: <pre><code><div id="head"> <h1 class="logo ie6fix "><a href="http://hif.joelberthet.com/"><img src="http://hif.joelberthet.com/wp-content/uploads/2011/01/HIF-Logo-Website.jpg" alt="http://hif.joelberthet.com" /></a></h1> <div class="menu-first-container"><ul id="menu-first" class="nav"><li id="menu-item-38" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home"><a href="http://hif.joelberthet.com/">Home</a></li> <li id="menu-item-73" class="menu-item menu-item-type-custom"><a href="http://hif.joelberthet.com/about/">Welcome</a> <ul class="sub-menu"> <li id="menu-item-72" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/about/">About</a></li> <li id="menu-item-32" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/beliefs/">Beliefs</a></li> <li id="menu-item-33" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/history/">History</a></li> <li id="menu-item-37" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/contact/">Contact Us</a></li> </ul> </li> <li id="menu-item-65" class="menu-item menu-item-type-custom"><a href="http://hif.joelberthet.com/services/">Worship</a> <ul class="sub-menu"> <li id="menu-item-55" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/services/">Services</a></li> <li id="menu-item-76" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/messages/">Messages</a></li> </ul> </li> <li id="menu-item-87" class="menu-item menu-item-type-custom"><a href="http://hif.joelberthet.com/kids/">Relationships</a> <ul class="sub-menu"> <li id="menu-item-80" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/kids/">Kids</a></li> <li id="menu-item-83" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/youth/">Youth</a></li> <li id="menu-item-86" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/adults/">Adults</a></li> <li id="menu-item-99" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/events/">Events</a></li> </ul> </li> <li id="menu-item-94" class="menu-item menu-item-type-custom"><a href="http://hif.joelberthet.com/partnerships/">Outreach</a> <ul class="sub-menu"> <li id="menu-item-90" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/partnerships/">Partnerships</a></li> <li id="menu-item-93" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/projects/">Projects</a></li> </ul> </li> </ul></div> </div> </code></pre> JoelAnthony on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-11208 Wed, 12 Jan 2011 03:15:15 +0000 JoelAnthony 11208@http://www.kriesi.at/support/ I already have Display 2.0 as I just bought the theme a few weeks ago. I also understand how to create a custom menu and have done so. I just need to know where these "unique id's" are kept for each menu item so that I can adjust the spacing. Dude on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-11167 Tue, 11 Jan 2011 08:41:36 +0000 Dude 11167@http://www.kriesi.at/support/ You need to upgrade to Display Version 2.0 first, then you can follow this tutorial: <a href="http://www.kriesi.at/support/topic/i-can%E2%80%99t-create-a-custom-menu-the-menu-behaves-weird" rel="nofollow">http://www.kriesi.at/support/topic/i-can%E2%80%99t-create-a-custom-menu-the-menu-behaves-weird</a> - it shows you how to create a custom menu. Then you'll get a menu where every menu item has an unique id which helps you to style every item different. Please post here again after you upgrade to Display 2.0 and created your own menu and I'll provide some sample code :) JoelAnthony on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-11158 Tue, 11 Jan 2011 03:27:25 +0000 JoelAnthony 11158@http://www.kriesi.at/support/ Maybe I am missing something or I did not make myself clear. I already knew how to adjust the width for the whole menu, just not to customize each menu item differently. As I followed the instructions above it changes the width, but it is applied to each menu item. How do you diversify the menu spacing for words that are bigger than others? Dude on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-11037 Fri, 07 Jan 2011 13:27:44 +0000 Dude 11037@http://www.kriesi.at/support/ Hey, sorry for the late reply. Please search for following code in style.css: <pre><code>.nav li a{ display:block; float:left; padding: 6px 10px; width:110px; border: none; text-decoration: none; line-height: 18px; outline: none; }</code></pre> and change the value of "width" as you like. JoelAnthony on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-11012 Fri, 07 Jan 2011 06:03:14 +0000 JoelAnthony 11012@http://www.kriesi.at/support/ Anyone out there? Here is someone using the same theme with the customized spacing? <a href="http://hopecentral.com/" rel="nofollow">http://hopecentral.com/</a> JoelAnthony on "Adjust Individual Menu Item Spacing" http://www.kriesi.at/support/topic/adjust-individual-menu-item-spacing#post-10929 Wed, 05 Jan 2011 07:10:18 +0000 JoelAnthony 10929@http://www.kriesi.at/support/ I have figured out how to adjust the font size and total width of the menu, but I need to know how to adjust the width for each of the menu items. As you can see here it looks quite odd as each word is different and therefore needs different spacing. <a href="http://hif.joelberthet.com/" rel="nofollow">http://hif.joelberthet.com/</a> Thanks!