tailwind-cssdaisyui

Navbar submenu's text appears in two lines

Here my menu:

enter image description here

As you can see, my submenu items are broken.

I mean, "Express 16k" is shown as:

"Express
16k"

Instead of

"Express 16k"

My related code is:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.2/daisyui.css" rel="stylesheet" type="text/css" />

<div class="flex flex-col min-h-screen">
<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Inici</a></li>
      <li><a>Inscripcions</a></li>
      <li>
        <details>
          <summary>Recorreguts</summary>
          <ul class="bg-base-100 rounded-t-none p-2" >
            <li><a>Marxa 10k</a></li>
            <li><a>Express 16k</a></li>
            <li><a>Puigcerver Trail 23k</a></li>
          </ul>
        </details>
      </li>
      <li><a>Reglament</a></li>
      <li><a>Informació</a></li>
      <li><a>Contacte</a></li>
    </ul>
  </div>
</div>
</div>

Any ideas about this behavior?

I need each item is a "single line"...

Solution

  • You may add a css rule targeting the anchor elements wrapped inside any list items being under a .menu element.

    .menu li > a {
  white-space: nowrap;
}

    This strategy alone will work on your current snippet:

    .menu li > a {
  white-space: nowrap;
}
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css" />

<div class="flex flex-col min-h-screen">
<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Inici</a></li>
      <li><a>Inscripcions</a></li>
      <li>
        <details>
          <summary>Recorreguts</summary>
          <ul class="bg-base-100 rounded-t-none p-2" >
            <li><a>Marxa 10k</a></li>
            <li><a>Express 16k</a></li>
            <li><a>Puigcerver Trail 23k</a></li>
          </ul>
        </details>
      </li>
      <li><a>Reglament</a></li>
      <li><a>Informació</a></li>
      <li><a>Contacte</a></li>
    </ul>
  </div>
</div>
</div>

    Or if you wish to target ONLY specific elements that you decided, you may define the same rule but using a different selector like:

    .whitespace-nowrap {
  white-space: nowrap;
}

    And then add that class to any element where you wish that behaviour to occur.

    For the sake of completeness, that exact class name was expected to work as that when using tailwind (the css framework under the hood of the daisyui components) and as documented here:

    https://tailwindcss.com/docs/whitespace

    Unfortunately I don't why but it doesn't apply here. Even when adding explicitely the tailwind asset as given here ... and by the way the css rule is there .. there's just some other styling interfering with the behaviour that prevents the white-space: nowrap to work as expected.