Remove word break in navigation dropdown

Question

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

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

score 2 · Accepted Answer · edited May 23 '17 at 11:45

#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.

What do you mean with: when the browser window is narrow? For the wrapper: this is by far not finished, it will serve its purpose later. Thanks for the other suggestions — Marvin Fischer, Nov 24 '16 at 12:56

score 0 · Answer 2 · answered Nov 23 '16 at 22:01

0

Add white-space: nowrap; to #navigation nav #main-list li a.

#navigation nav #main-list li a {
    display: block;

    padding: 0 12px;

    color: #eee;
    white-space: nowrap;
    text-decoration: none;
}

answered Nov 23 '16 at 22:01

Marvin

score 0 · Answer 3 · answered Nov 23 '16 at 22:04

As long as its OK for you to be editing the code manually, you can do this very simple change.

replace:

<li><a href="/">Startseite&nbsp;1</a></li>

with

<li><a href="/">Startseite&nbsp;1</a></li>

  stands for Non Breaking Space, which is exactly what you need.

3 Answers3