WordPress.org

1. Yukon Cornelius
   Member
   Posted 2 years ago #

   Hi,

   I have a navigation menu which uses square buttons on a background img. A couple of my link names are too long for the button, withpout being broken into two or three.

   For example: 'Meet the Characters' is too long for the button, and needs to be:
   'Meet
   the
   Characters'

   I've tried putting a
   between words in header.php as follows:

   <li class="page_item page-item-6"><a href="http://www.mysite.com/?page_id=6" title="Meet the Characters">Meet<br />the<br />characters</a></li>

   ...but i guess that doesn't work: just breaks up the navbar.

   How can I do it? I don't really want to shorten the names or use just images instead of links unless it's the only solution.

   I can't find anything out there on the subject. Hopefully that means there's a simple answer.

   Please help!

   Jimmy

2. Devin Price
   Member
   Posted 2 years ago #

   Set the width through the css. That should break up the words into separate lines. What's the link to your site?

   li a {width:200px;}

3. Yukon Cornelius
   Member
   Posted 2 years ago #

   Hi Downstairsdev,

   Thanks so much for your reply. You pointed me in the right direction and I finally figured things out.

   For anyone else with the same problem, the following css was preventing my width adjustments from having any effect:
   {display:inline}
   If you want to adjust the width, you need to use
   {display:block}
   Also make sure that your line height is not too big/high.

   Here is some info on inline and block elements.

   Thanks again!

   Jimmy

Topic Closed

This topic has been closed to new replies.