Vertical Menu in Twenty Twelve – Can't get text to wrap in listings

  • Resolved David Borrink

    (@davidborrink)


    11 years, 7 months ago

    I’ve set up a vertical menu in my Twenty Twelve child theme. It looks great, but I have menu items that should wrap onto two lines, and they’re sticking out the right side of the menu.

    I’ve tried various word-wrap settings, width amounts, paddings, etc, and I’m stuck. I just can’t figure out why I can’t get my menu items to wrap. And it gets worse when I switch to my tablet modes. Most items stick out of the menu.

    I’d like to ask if someone could be a fresh set of eyes and offer a suggestion. I’m this close to finished. All I need is to have my menu items wrap onto two lines when needed, and I’m done.

    Here’s the link to the site.

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter David Borrink

    (@davidborrink)

    I’ve seen wrapped text in menus before, so I’m wondering if this is something I “dropped” by accident when I modified the nav codes.

    Thread Starter David Borrink

    (@davidborrink)

    I can adjust the width of the ul items, but padding doesn’t seem to impact the line widths for some reason. Seems like they ought to put the text down to a next line.

    Thread Starter David Borrink

    (@davidborrink)

    I’ve checked out other sites where the sub-menu items wrap onto second lines, but the main menu items remain in one line. Though, these menus are horizontal menus and obviously the top level menus aren’t going to wrap. The length of the text determines the menu item width.

    I’d like to have the main items be able to wrap in the line, and that’s where I’m wondering how to change things. Can anyone point out to me the reason why top-level menu items cannot wrap within a specified space?

    I think that’s due to the nowrap here:

    .main-navigation li a {
    border-bottom: 0 none;
    color: #FFFFFF;
    letter-spacing: 0.1rem;
    line-height: 2.5;
    text-transform: uppercase;
    white-space: nowrap;
}

    https://www.w3schools.com/cssref/pr_text_white-space.asp

    Try changing the above to:

    .main-navigation li a {
    border-bottom: 0 none;
    color: #FFFFFF;
    letter-spacing: 0.1rem;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: normal;
    padding-bottom: 5px;
}

    Thread Starter David Borrink

    (@davidborrink)

    Aha. That was it. Obviously it was the “a” tag that needed to be modified. Also, I have had little experience with the “white-space” declarations, so that was the “unknown” thing I didn’t get.

    I’ll fix and adjust my block widths to suit, plus I need to adjust my line heights for two-line text.

    Thanks WPyogi!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Vertical Menu in Twenty Twelve – Can't get text to wrap in listings’ is closed to new replies.