Marvin Fischer Marvin Fischer - 13 days ago 9
CSS Question

Remove word break in navigation dropdown

I try to remove the break between "Startseite" and the number on the dropdown below "News", whatever I try it always wraps

jsfiddle.net

I tried to get

#navigation nav #main-list li ul li


to stop the wrap but none of the css wrap functions worked for me

Dai Dai
Answer
#navigation nav #main-list li ul {

    white-space: nowrap;
}

I note that your CSS can be simplified:

  • Avoid * rules, they are expensive and resetting margins and padding to zero messes-up defaults which can harm readability unless you're going to go through the effort of manually setting them for every element you're using.
  • Your menu does not work when the browser window is narrow.
  • float: left; is now obsolete for stacking elements horizontally. Consider using display: inline-box instead, which also gives you more control over appearance and means you can avoid having to use clear.
  • Even with float you don't need a manual <div class="clearer"> anymore, use the ::after pseudo-element instead:

    (container of floating elements)::after {
        display: block;
        content: " ";
        clear: both;
    }
    
  • Your nav element is being wasted in this context. Consider replacing your <div id="navigation"> with just <nav> and eliminating the inner <nav> element.

  • Your <div id="wrapper"> isn't serving any purpose in this example. Also, consider replacing it with a simple <section> element, which makes your markup (slightly) more semantic.