Need help? Check out our Support site, then

Watson: Increasing width of menu tabs

  1. solidgoldcreativity

    Hello All. I have just started using the Watson theme. The menu tabs across the top are quite narrow and so the labels of my drop-down items are wrapping to a second line.

    I would like to increase the width of the menu tabs so the labels of the drop-down items appear on a single line.

    Any help most appreciated. Thank you.

    The blog I need help with is

  2. Gaaaahhhh! The theme team needs to fix this. As a temporary thing you can add this to your CSS to keep it from breaking words inappropriately. The white-space declaration keeps it from breaking words, and you can adjust the width as desired, but keep in mind all browsers render differently, so it may be one line in some browsers, but two lines in others unless you go way wide. The 150px works in Firefox, but I'm not sure about Safari, Internet Explorer, Chrome or Opera.

    nav[role="navigation"] ul.sub-menu li, nav[role="navigation"] ul.children li {
    white-space: nowrap;
    width: 150px;
  3. I should note that staff will likely fix the word break issue, but will not likely widen the submenus.

    I've contacted them on the inappropriate word breaking.

  4. solidgoldcreativity

    Hi Richard. Thank you. That works!

  5. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic