Hi - is there any way to make the menu items stretch to fill the available space?

On this site www.bizzybounce.co.uk/newsite/index.php the menu is shy each side on the width of the site.

I want to make it fill no matter how few the menu items.

Any ideas?

Thanks

Ian

Hi Ian,

With css tricky - is there no way of knowing the amount of menu items that will be shown?

Cheers
Paul

Hi Paul - thanks for getting back to me.

The number of menu items will eventually be more or less stable.

Is there a rule I could apply manually, as it were, so I could stretch to fill now, and then re-apply if an additional item were added?

Thanks

Ian

Hi Ian,

It isn't as simple I'm afraid as one rule - it would be a case of adapting something along these lines

www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

Cheers
Paul

Hi Paul - thanks for getting back to me.
This has worked for me so far - except it's upset the little 'home' logo on the home page button.
It's now centred over the word home instead of sitting in front of it - and I can't see why.
Any ideas?
Thanks again
Ian

Hi Ian,

You have a 100% width on that :before so add this

.zen-menu *::before {width:auto;}

For it to work it needs to be below the 100% width you added

Cheers
Paul

looks like you may need to zero the left and right padding on #menu as well

Cheers
Paul

Perfect!
Thanks yet again Paul.

Ah - I think it's created another little problem, Paul.

In mobile and tablet views the off-screen zen icon of three horizontal bars is now centred as opposed to floating to the right.

I've tried various things without success - any ideas?

Thanks

Ian

Hi Ian,

I think that is related to the style that applies to the ::after

or maybe not

Try

@media screen and (max-width:880px) {
.zen-menu * {width:auto}
}

adding your max width breakpoint as required - see if that fixes the 100% width problem

Cheers
Paul

Great - that's done it!

I must admit I'm having trouble grasping the logic of this.

Thanks again for your help…

Ian

Basically it was making all elements 100% width and this changes the width to fit its contents

Cheers
Paul

Ah. Clear as mud.

Really I should take a month off and rtfm

Thanks for the help - I'm sure there will be more…

Ian

No worries - good luck with the site

Cheers
Paul