Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #2695

    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.



    Anyone out there? Here is someone using the same theme with the customized spacing?



    sorry for the late reply.

    Please search for following code in style.css:

    .nav li a{
    padding: 6px 10px;
    border: none;
    text-decoration: none;
    line-height: 18px;
    outline: none;

    and change the value of “width” as you like.


    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?


    You need to upgrade to Display Version 2.0 first, then you can follow this tutorial: – 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 :)


    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.


    It would look like

    #menu-item-72 a{
    width: 100px;

    You can find the ids in your website’s source code – atm you have following menu items:

    <div id="head">

    <h1 class="logo ie6fix "><a href=""><img src="" alt="" /></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=""><strong>Home</strong></a></li>
    <li id="menu-item-73" class="menu-item menu-item-type-custom"><a href=""><strong>Welcome</strong></a>
    <ul class="sub-menu">
    <li id="menu-item-72" class="menu-item menu-item-type-post_type"><a href=""><strong>About</strong></a></li>

    <li id="menu-item-32" class="menu-item menu-item-type-post_type"><a href=""><strong>Beliefs</strong></a></li>
    <li id="menu-item-33" class="menu-item menu-item-type-post_type"><a href=""><strong>History</strong></a></li>
    <li id="menu-item-37" class="menu-item menu-item-type-post_type"><a href=""><strong>Contact Us</strong></a></li>
    <li id="menu-item-65" class="menu-item menu-item-type-custom"><a href=""><strong>Worship</strong></a>
    <ul class="sub-menu">
    <li id="menu-item-55" class="menu-item menu-item-type-post_type"><a href=""><strong>Services</strong></a></li>

    <li id="menu-item-76" class="menu-item menu-item-type-post_type"><a href=""><strong>Messages</strong></a></li>
    <li id="menu-item-87" class="menu-item menu-item-type-custom"><a href=""><strong>Relationships</strong></a>
    <ul class="sub-menu">
    <li id="menu-item-80" class="menu-item menu-item-type-post_type"><a href=""><strong>Kids</strong></a></li>
    <li id="menu-item-83" class="menu-item menu-item-type-post_type"><a href=""><strong>Youth</strong></a></li>
    <li id="menu-item-86" class="menu-item menu-item-type-post_type"><a href=""><strong>Adults</strong></a></li>

    <li id="menu-item-99" class="menu-item menu-item-type-post_type"><a href=""><strong>Events</strong></a></li>
    <li id="menu-item-94" class="menu-item menu-item-type-custom"><a href=""><strong>Outreach</strong></a>
    <ul class="sub-menu">
    <li id="menu-item-90" class="menu-item menu-item-type-post_type"><a href=""><strong>Partnerships</strong></a></li>
    <li id="menu-item-93" class="menu-item menu-item-type-post_type"><a href=""><strong>Projects</strong></a></li>
    </div> <!-- end #head -->


    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 ?



    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:

    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:

    #menu-item-72 a{
    width: 100px;

    #menu-item-73 a{
    width: 80px;


    Worked great, thanks!



    Glad this is resolved, let us know if you have any other questions.



    Where EXACTLY do we paste the code in the source code file?



    I’d paste it at the very bottom of style.css.

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Adjust Individual Menu Item Spacing’ is closed to new replies.