Converting Menu from Pro to Xtreme

[IBNu2WP]

The menu that you see on this site http://kmw.proimpactllc.com/ was aligned as one row prior to converting from Pro to Xtreme and didn’t wrap.  How do I get it on one row.  The font size, typeface, etc. are all the same as the Pro version.  I can’t find the padding settings that impact this.  The Menus > Desktop Menu Spacing: option only increases the padding.  Using 0.5 seems to have no impact.

Also, the dropdown menu selections appear to be double spaced and I would like them reduced.  And, I would like to add a separator line between the menu items in the dropdown menus,. 

Sorry, used to know how to do all of this in Pro. and I want to learn how to use the built-in tools rather than custom CSS if possible.
Thanks.

[scrambler]

Not seeing the original it is hard to say, but one thing is sure, for two menu items to be kicked below, something is making the items bigger (font size, font type, padding, arrows etc…

So the question, is which parameters (or combination of them) do you want to change in the above to make them fit.

You probably want to reduce the font size a bit as well as the spacing

To change the spacing, use the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

.wvrx-menu a {padding-left:.4em;padding-right:.4em;font-size:110% !important;}

For the sub menu, the line height is set at 25px using

.menu-primary .wvrx-menu ul li a, .menu-primary .wvrx-menu ul.mega-menu li {line-height:25px !important;}

Use the same rule with a different value 

.

[IBNu2WP]

Thanks.  I have reverted the site back to Weaver Pro so that you can see how I had the menu.  When I entered the rule, I lost the menu background height (though we did accomplish the 1 line); but I lost the height.  In Weaver Pro I had the Menu Bar Height: 

px and the text was aligned vertical center.  In the Xtreme, if I manually set the height in the custom CSS box for BG, the text is top aligned.  Also, if possible I liked the little offset I had from full width so the menu bar shadow would show and make the menu stand out.  In the Pro version, there was a menu item that allowed me to add the seperator bar on submenus.  I’m not finding that in Xtreme.  I have checked the add border, but it doesn’t add the border between the menu items on the submenu dropdown.

So, maybe it is just easier to show you how I had it, and then perhaps you can tell me what I still need to do for the menu.  Make Sense???

[IBNu2WP]

The Menu Bar Height did not come through as 70px.

[scrambler]

I am totally confused by everything you said.

The weaver II pro I see now  has its menu bar on two lines, so clearly the issue was already there , may be not on large screen.

Any way, there is no point is wasting time on pro. You should focus on the Xtreme tuning.

The first rule I gave you was to reduce horizontal padding and font size, that should have no impact on bar height.

if the second rule caused issue we need to see the site with the rule in.

If you want to increase the menu bar height, you have an option box in the Menu settings for that that will keep the menu centered, it is called desktop menu vertical padding. 

[IBNu2WP]

Scrambler, sorry – wasn’t trying to confuse.  In the Pro Version, we had a menu option that would take care of it and that is why I reverted the site back to Pro only for you to view.  I have since permanently switched to Xtreme and created the desired effect with:

.menu-primary .wvrx-menu, .menu-primary .wvrx-menu-container {

    height: 70px;

    padding-top: 10px;
}
But what I still need help with is I have selected Extend BG Attributes, which gives me the full-width BG Color.  But I would like to take full advantage of the shadow box, I would like the menu BG Color width to only be 95% wide and use the add shadow right + bottom to have the menu to “pop off the page”.  The menu text is fine with the guidance that you have provided. 
This is still a production site, so the link to the site doesn’t work.  I could wait until the site is live if you need to visualize.  Thanks for your help.

[scrambler]

Full width is full width, it is done with a script that computes the extension, there is no way to make that not go to the edge.

Once I can access the page, we may be able to come up with an alternate solution

[Author]

Posts