WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Line breaks for long navigation titles??? (3 posts)

  1. Yukon Cornelius
    Member
    Posted 5 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 5 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 5 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.

About this Topic