Menu Items 'break out' of their box at certain break-point (related to my earlier post)

[c0deM0nK424]

responsive website - using bootstrap framework

using a navbar-default (makes no difference if i use inverse etc)

and ive got the following menu items:

http://www.manoj-kumar.co.uk

What I'm noticing is, if we go to a size close to ipad portrait (768px) and anything 'mini-tablet' range, the menu breaks and 'contact us' starts on a second line.

This is not what I'm after, id rather it just collapsed sooner if this is gonna keep happening.

Any sugestions folks ?

btw is there any point in having the text links occupy two lines when in ipad portrait viewport/mini tablet viewport range ?

i.e

About Us becomes
Abous
Us

and Become a Member becomes
Become
a Member

whilst the navigation menu is responsive and does work, being a perfectionist i am keen to rectify the issue of too many menu items breakihng out of the actual menu holder. Advice ?

 

[audiopro]

Not sure if it is related but your menu isn't formed correctly.

Keith

http://www.studiosoft.co.uk

 

[c0deM0nK424]

Hi Keith, could you elaborate ?

Are you referring to the extra </li> element ? ive just spotted that.

I believe the issue lies with the media queries, i need to change 768px to something like , 990px , so it 'collapses' sooner.

Obviously the container is fluid and the menu is contained with in it.

 

[audiopro]

It is always best to get the page to validate before you start looking for specific errors.
That rogue <li> element must have an effect on something.

[URL unfurl="true"]http://validator.w3.org/check?uri=http%3A%2F%2Fwww.manoj-kumar.co.uk%2F[/url]

Keith

http://www.studiosoft.co.uk