Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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.

    http://hif.joelberthet.com/

    Thanks!

    #38951

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

    http://hopecentral.com/

    #38952

    Hey,

    sorry for the late reply.

    Please search for following code in style.css:

    .nav li a{
    display:block;
    float:left;
    padding: 6px 10px;
    width:110px;
    border: none;
    text-decoration: none;
    line-height: 18px;
    outline: none;
    }

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

    #38953

    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?

    #38954

    You need to upgrade to Display Version 2.0 first, then you can follow this tutorial: http://www.kriesi.at/support/topic/i-can%E2%80%99t-create-a-custom-menu-the-menu-behaves-weird – 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 :)

    #38955

    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.

    #38956

    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="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/"><strong>Home</strong></a></li>
    <li id="menu-item-73" class="menu-item menu-item-type-custom"><a href="http://hif.joelberthet.com/about/"><strong>Welcome</strong></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/"><strong>About</strong></a></li>

    <li id="menu-item-32" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/beliefs/"><strong>Beliefs</strong></a></li>
    <li id="menu-item-33" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/history/"><strong>History</strong></a></li>
    <li id="menu-item-37" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/contact/"><strong>Contact Us</strong></a></li>
    </ul>
    </li>
    <li id="menu-item-65" class="menu-item menu-item-type-custom"><a href="http://hif.joelberthet.com/services/"><strong>Worship</strong></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/"><strong>Services</strong></a></li>

    <li id="menu-item-76" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/messages/"><strong>Messages</strong></a></li>
    </ul>
    </li>
    <li id="menu-item-87" class="menu-item menu-item-type-custom"><a href="http://hif.joelberthet.com/kids/"><strong>Relationships</strong></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/"><strong>Kids</strong></a></li>
    <li id="menu-item-83" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/youth/"><strong>Youth</strong></a></li>
    <li id="menu-item-86" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/adults/"><strong>Adults</strong></a></li>

    <li id="menu-item-99" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/events/"><strong>Events</strong></a></li>
    </ul>
    </li>
    <li id="menu-item-94" class="menu-item menu-item-type-custom"><a href="http://hif.joelberthet.com/partnerships/"><strong>Outreach</strong></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/"><strong>Partnerships</strong></a></li>
    <li id="menu-item-93" class="menu-item menu-item-type-post_type"><a href="http://hif.joelberthet.com/projects/"><strong>Projects</strong></a></li>
    </ul>
    </li>
    </ul></div>
    </div> <!-- end #head -->

    #38957

    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 ?

    #38958

    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: http://www.computerhope.com/issues/ch000746.htm

    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;
    }

    #38959

    Worked great, thanks!

    #38960

    Hey,

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

    James

    #38961

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

    #38962

    Hey,

    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.