Forums

max-width on nav li

Permalink
using the autonav I wanted to give each li element a max-width in order to wrap any long page titles to two lines depth, however on links like below where it splits the words it still holds it max width of 100px and does not reduce, leaving an empty space before the next link. Any ideas of how to get this to work or is this not possible in CSS :

I have attached a screen shot 

.navbar .nav > li {
   display: block;
   float: left;
   word-wrap: normal;
   max-width:100px;
}
<li class=""><a data-toggle="" href="/index.php/birthday-parties/" class="">Birthday Parties<b class=""> </b></a></li>

1 Attachment

Responsive
 
nickelfault replied on at Permalink Reply
nickelfault
Max-width works by extending the width of your element if it needs it, it won't reduce it for you. If your content is larger than 100px which in your case it is, it'll wrap to the next line and keep it's max-width.
Responsive replied on at Permalink Reply
Responsive
thanks , any way around this or will it need some scripting ?
MysteriousCleon replied on at Permalink Reply
MysteriousCleon
- nevermind -


(I thought about something, but I was wrong... ;) )
nickelfault replied on at Permalink Reply
nickelfault
I can't think of a way off the top of my head to do that without scripting :S