Question

this is my very first post on this site, so excuse me if I’m not clear enough.

I’m currently working on a website built using wordpress, and I have an issue with CSS.

My menu bar is made with an ul, and, when I increase text size in my navigator (with ctrl+scroll for example), li items overflow from the div, like in this image.

In this case, I would like the li to be splitted in two part, and fit in the div, but I did not find how to realize that. I’ve already tried the “word-break” solution, but I guess I was doing it wrong.

Because my site is hosted by WordPress, there are two different CSS sheets used for the design, which is a bit messy.

Here is a part of my sheet :

#access {
display:inline-block;
width:27%;
font-size:100%;
margin:2.5% auto 6px;
border:none;
padding-top:10px;
padding-bottom:10px;
overflow:hidden;}

#access a {
display:inline-block;
max-width:100%;
color:rgb(0,102,138);
font-size:22px;
padding:none;
line-height:30px;}

#access li {
display:block;
padding:4px;
float:none;}

#access ul {
list-style:none;
font-size:100%;
margin:0;}

I can’t post the theme’s CSS link because, as a new member, I’m limited to 2 hyperlinks by post.

Thank you for your help.

Answer 1

These menu items contain non-breaking spaces.:

Coaching professionnel

Coaching parental

Coaching professionnel
Coaching parental

This means when text increases in size they will all remain on one line.

Also, your #access has overflow:hidden; Remove that, and remove the non-breaking spaces – (“&nbsp”) and your words should wrap correctly