style issues for extra menu

[beachmat]

I’ve inserted a menu using the extra menu widget and one issue I’m having is that it doesn’t seem to be possible to disable underlining of the links in the extra menu style options, which is coming from the default widget styles. Another is that the option for bold for the current page doesn’t seem to work for this type of menu.

[Weaver]

Exactly which widget do you mean by “extra menu widget”?

Do you mean the standard WordPress “Custom Menu” widget, or do you mean the Weaver Xtreme Plus “X-Plus Menus” widget.

The former is very hard to style, and that styling will have nothing to do with Weaver’s menus. You might search the WordPress support forums for suggestions of custom CSS styling for that widget. You can use Weaver’s Custom CSS box to add such styling. But given that that widget isn’t part of Weaver, we don’t support styling it here, but there should be plenty of suggestions for custom CSS elsewhere for it.

EDIT: I didn’t remember the tutorial already on this site as noted in the next post. It can be done, but it is not easy!

The latter requires Weaver Xtreme Plus, and can be styled easily from Weaver Xtreme’s menu options. If you are having troubles applying the Primary, Secondary, or Extra Menu styling to that widget, we will be happy to try to help you get that working.

[scrambler]

If you cannot get “plus” (which you should 🙂 ) and need to style the WordPress Custom Menu widget, it will be hard manual labor and I have some pointers here:

http://forum.weavertheme.com/discussion/11685/weaver-xtreme-tips-and-tutorial-part-6

For any further help, you need to provide a link to your site with specifics

[beachmat]

Thanks. I’m using Plus and the X-Plus Menus widget. I removed the underlines by turning that option off for links in widgets, overkill but it probably won’t matter. As I say the choices under Options: All Menus for Current Page BG and Bold Current Page don’t seem to work with the Extra Menu, regardless of which style I choose for it in the widget. I managed to get that working with some CSS.

[Weaver]

What “Menu Type” did you specify in the X-Plus Menus widget?

I see that the link underline follows the setting for the Individual Widgets settings. I think you could argue this one either way. Changing the way it works now might cause issues with existing sites, but I’m not really sure what really should happen on this.

In my testing, I do note that the current page options apply to the Vertical – Accordion Menu, but not the Vertical – Simple menu. I’m not sure if that is by design, or a bug.

I think I need more feedback on how these options SHOULD work.

[scrambler]

I have both of these options working fine on my test site on an X plus menu widget in a sidebar, so we would need to see a page showing the problem to see what is going on in your site.

You may have some custom CSS interfering.

[beachmat]

Sorry, I should have said, it’s Vertical – Simple.

[Weaver]

As I said, the underline bit has me in a bit of a quandry as to how that really should work, and if I should change how it works.

I would guess the current page issue is really a bug for Vertical – Simple. I will look into that one.

[beachmat]

The text in the other menus is not underlined, and you wouldn’t want it to be (which is presumably why there isn’t an option for it). So why not have text in the extra menu appear the same?

[scrambler]

Also read item #5 of this thread for additional styling of the simple vertical menu

http://forum.weavertheme.com/discussion/10343/weaver-xtreme-tips-and-tutorial-part-2#Item_1

[beachmat]

Just to add to this, the Dividers between menu items on the Extra Menu options doesn’t seem to have any effect either.

[scrambler]

Vertical Simple is what it is vertical simple. It does not have full styling.

If what you meant is that you wanted to know how to change it, Inspecting the page with the browser developer tool, it appears the separators on the simple menu are done by the rules below.
Replacing #menuID  by the actual ID of the menu (can be found inspecting the page and looking for it on the container div of the menu)

.menu-vertical#MenuID li a {border-top:2px solid #000000;}
.menu-vertical#MenuID ul ul a {border-top:1px solid #000000;}
#MenuID.menu-vertical{border-bottom:3px solid #000000;border-top:1px solid #000000;}

If you ned help figuring out the ID, we need a link and specifics

If you wish to affect all simple vertical menu, you can probably just use

.wvrx-vertical-menu li a {border-top:2px solid #000000 !important;}
.extra-menu-xplus.menu-vertical {border-bottom:3px solid #000000 !important;border-top:1px solid #000000 !important;}

[Author]

Posts