Line breaks for long navigation titles???

  • Resolved Yukon Cornelius

    (@jimmmy)


    15 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="https://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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Devin Price

    (@downstairsdev)

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

    Thread Starter Yukon Cornelius

    (@jimmmy)

    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Line breaks for long navigation titles???’ is closed to new replies.