Watson: Increasing width of menu tabs

  • Author
  • #1211971

    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 solidgoldcreativity.com.


    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;

    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.


    Hi Richard. Thank you. That works!


    You are welcome.

The topic ‘Watson: Increasing width of menu tabs’ is closed to new replies.