Menu

[MichaelGrassi]

Hi,

I have created a menu with different colour tabs, but when I view it on Windows pc the menu wrapps.

I have used Desktop Menu Spacing to get it to fit, but a lower em measurement just puts a green bar at the ends.

http://www.active-research.co.uk/wordpress

Please can you help

[scrambler]

Well, the layout of the menu item will depend on the menu item sizes and the width of the browser, so no matter what you are doing, when the browser gets smaller, they will break into two lines.

I had a tutorial on Weaver II to spread menu items aver the whole menu bar, but it is not compatible with you wish to have different color menu items. If you would be to spread your menu items using that method, it would leave spaces between the various menu items.

if you want to try it, add the rules below in Main options > Fonts & Custom > Custom CSS Rule box.

@media screen and (min-width:768px) {
#nav-primary .weaverx-theme-menu {text-align:justify;text-justify: distribute-all-lines; -ms-text-justify: distribute-all-lines;margin:0;}
.wvrx-menu li {vertical-align:top;display:inline-block !important;*display:inline;zoom:1;float:none !important;}
}

Doing what you want would be very complicated, as for every browser width the padding necessary for each menu item to accomplish the look you want changes.

A script would need to compute the width of each menu items and of the menu bar, and calculate what padding needs to be applied to each menu item to fill the menu bar. And in all cases, when the browser becomes smaller at one point they would still wrap over two lines when all items don’t fit.

I will think about it some more, but I don’t think there is a 100% responsive solution without a script.

[scrambler]

OK, here is the best I can figure out and that seems to do the job.

Remove all padding and center menu items, then set each menu item with a width in percentage (total 100%).

You can do that by adding the rules below in Main Options > Fonts & Custom > Custom CSS Rule box.

@media all and (min-width:768px) {
.menu-primary .wvrx-menu-container li a {padding-right:0;padding-left:0;text-align:center;}
ul.wvrx-menu, ul.sm-wvrx {margin-left:0;}
#menu-item-25 {width:6.5%;}
#menu-item-24 {width:19%;}
#menu-item-23 {width:19%;}
#menu-item-22 {width:32%;}
#menu-item-31 {width:12%;}
#menu-item-30 {width:11.5%;}
}

Post back with rules in place if it needs tweaking

[MichaelGrassi]

scrambler you are a genius, thank you very much it worked like a dream.

All the best

Michael

[Author]

Posts