Skip to main content

Automatic CSS Menu Width Expansion With Spaces

Aspects of web design

Well today we discovered a wonderfully useful piece of CSS known as “whitespace:nowrap;”.  This super little piece of code solved an akward situation we were having with a problematic menu.

Here was the situation:

    • Normal top bar menu with drop down sub menus.
    • Drop down sub menu items have titles of varying widths, therefore each drop down sub menu block (as a whole) needs to be able to vary its width automatically depending on the length of the longest sub menu title in that block.  Still with us?
    • Some sub menu titles consist of more than one word (i.e. have spaces in between the words).

 

The Problem

    • Long sub menu titles would wrap onto the next sub menu line, or run over the sub menu box graphic, into “empty space” (rather unattractive).

 

Requirements

    • Fix needs to be in CSS only, not Javascript, etc.

 

The Solution

All I had to do was add the little bit of code in bold below, and all was fixed!

ul.dropdown ul {
visibility: hidden;
position: absolute;
z-index: 100;
min-width: 70px;
max-width: 340px;
white-space:nowrap;
}

 

Do you have a different way of resolving this problem?

If so, I’d love to know your solutions via the comment box below.


Sara Thornton

Sara is WebHolism's SEO Guide and Trainer. She's the one you'll see in all our YouTube videos, and helping folks out with their SEO queries on social media. She runs the fabulous SEO Clarity Club which teaches women how to do their own SEO. In her spare time she loves board games, and splashing around in the sea.

Comment

Leave a Reply

Your email address will not be published. Required fields are marked *