Justified main menu items - V.6.0.4

[tonyp]

Using v.6.0.4 fine but would like to ‘justify’ the main menu items. By this I mean to spread them out so the left one is at the left hand of the menu line, the right one (the last one) is at the right hand end of the menu line.

I’m sure I’m missing something very simple but really cannot see what.

[admin]

Hi,

You can use the following – it will work in all browsers except IE7:

#Menu1 {
	display:table;
}
#Menu1 > li {
	display:table-cell;
	float:none;
	width:1%;
}
#Menu1 > li > a {
	padding-right:0 !important;
	text-align:center;
}

If you care about IE7, you can also add the following and it will fix the main menu for it so that it doesn’t look too bad:

/* IE7 main menu fix */
*:first-child+html #Menu1 > li {
	float:left;
	width:auto;
}
*:first-child+html #Menu1 > li > a {
	padding-right:15px !important;
}

Cheers!

[tonyp]

Thanks for that. I added those lines to my main CSS file, was that correct?

However they appear to make no difference. I’ve undoubtedly done something wrong, but cannot see what.

Edit: The problem seems to be that I cannot get the leftmost menu bar Menu item to move to the left of the menu bar area. By use of non-blank spaces etc. and can get the rest spaced out towards the right – though IE & FF do things differently!

Any thoughts would be most welcome.

[admin]

Hm, are you sure you are using SmartMenus 6 (and not the new jQuery version)? Because these rules work just fine on the default v6.0.4 demo page. Or maybe, you are using a different id for your menu tree and not “Menu1”?

In any case, it’s very difficult to guess what exactly might be causing the issue without looking at your core. So if you like, please post some live URL and I will take a look (you can post it as “Protected data” if you’d like to keep it private between us.)

Thanks!

[tonyp]

Thank you. The web site in question is http://www.allhallows-church.org.uk .

[admin]

Thanks, that helped a lot!

OK, in your case some of the declarations did not take effect so please just use this code instead in your “common_style.css”:

#Menu1 {
	display:table;
	border-spacing:0; /* removes completely the item spacing */
}
#Menu1 > li {
	display:table-cell;
	float:none !important;
	width:1% !important;
}
#Menu1 > li > a {
	padding-right:0 !important;
	text-align:center;
}

Additionally in “c_config.js” set these to 0 in your main menu style array to remove the item separators spacing:

0,		// ItemsSeparatorSize
...
0,		// ItemsSeparatorSpacing

Please let me know if you still have any troubles.

Cheers!

[tonyp]

Brilliant! That worked. Indeed, as I wanted separate ‘blocks’ for each of the menu items, the changes to c_config.js weren’t needed.

It’s now working as we wanted. Once again many thanks. 🙂

[admin]

Np, cheers! 🙂

[Author]

Posts