Reply To: Responsive navigation – hide & move items's to dropdown when space runs out

[grimski]

Incase it’s useful for anyone else I managed to get this working by changing :

var availablespace = $('#nav-main').outerWidth(true) - morewidth;
to
var availablespace = $('#nav-main').width() - morewidth;

which calculates the width and ignores any margin/padding, allowing me to set padding on the right of the container which the form could be positioned in.

Codepen: http://codepen.io/moy/pen/qOYeqN

I thought I had a similar example working where an elements width was unknown, heading/text for example. But to get the text and nav to display inline and not wrap I had to set overflow: hidden; on the nav element. This does create the required layout but now, obviously, the dropdown is hidden when the ‘more’ link is hovered over.

Codepen: http://codepen.io/moy/pen/ZbjbNM

I’m aware this issue might be better suited to the CSS forum but can anyone think of an alternative ‘fix’? I had a play with display inline-block and floating different elements but the script doesn’t seem to like floating certain elements as it freezes up.

I thought I’d document this issue here first before creating another thread in the CSS forum if it can be avoided.

Cheers again,
Steve