Adjust Individual Menu Item Spacing « Support Forum | Kriesi.at

Support Forum » Display

Adjust Individual Menu Item Spacing

13 posts from 4 voices

Started 2 years ago by JoelAnthony
Latest reply from Dude
This topic is resolved

Tags:

JoelAnthony
Member

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!

Posted 2 years ago #
JoelAnthony
Member

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

http://hopecentral.com/

Posted 2 years ago #
Dude
Dude
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.
Posted 2 years ago #
JoelAnthony
Member

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?

Posted 2 years ago #
Dude
Dude

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 :)

Posted 2 years ago #
JoelAnthony
Member

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.

Posted 2 years ago #

Dude
Dude

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

Posted 2 years ago #

JoelAnthony
Member

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 ?

Posted 2 years ago #
Dude
Dude
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;
}
```
Posted 2 years ago #
JoelAnthony
Member

Worked great, thanks!

Posted 2 years ago #
James Morrison
Former Team Member

Hey,

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

James

Posted 2 years ago #
northstarpc
Member

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

Posted 2 years ago #
Dude
Dude

Hey,
I'd paste it at the very bottom of style.css.

Posted 2 years ago #