Extra Menu Option Styling

[GR8FL]

I have a couple of long pages that I am trying to figure out best way to manage. I could break them into sub-pages, but I was hoping to also display the navigation links on the parent (and sub-pages).

Been looking at menu documentation – specifically, http://forum-archive.weavertheme.com/discussion/10739/weaver-xtreme-tips-and-tutorials-part-4 and http://demo.weavertheme.com/menus

Do you have besides how it looks on the demo page, documentation on the coding for Extra Menu Options? I am looking to have something very simple with a nice border around it, similar to what you describe: 

{border-radius:15px;border:3px solid #FFEEBB !important;margin:5px;}

But what I don’t want is for it to take the Options: All Menus Current Page BG,  Current Page Text, etc. If that is not possible, then I need to know how to define these options for the primary menu.

[scrambler]

I am not really following.

If you want button style menus, then use the tutorial on either primary, secondary or extra style and use it in your extra menu shortcode (check the help of the shortcode).

If then you don’t want to have current page attributes, we can remove them from the style you are using with custom CSS.

You need to play with the various options, and when you have something close, post a link explaining what you are still missing.

[GR8FL]

How do I set current page background, current page text for each menu area? Using the global option messes with what I am trying to do for the Extra Menu. See http://xtreme.littledropup.com/about-lavender/

How can I decrease the amount of spacing between menu items on the primary menu bar? Since I added sub-pages to the menu, it has become much wider because of the sun-menu arrows.

How can I change the primary widget title background ONLY and not have it be global? 

[scrambler]

To change the current menu item background color of the menu using the extra style use

.menu-extra .weaverx-theme-menu .current-menu-item > a {background-color:red !important;}

To change the space to the right of the menu item with the arrows use

.menu-hover.menu-arrows .toggle-submenu {margin-right:10px;}
.menu-arrows.menu-hover .has-submenu > a {padding-right:20px;}

To change the background of the top width title use

#text-8 .widget-title {background-color:grey;}

[GR8FL]

Please see http://xtreme.littledropup.com/about-lavender/

Instead of changing #text-8 .widget-title {border-bottom-color:#2F4F2F;border-bottom-style:dashed!important;line-height: 2em;} which only affects the first widget title in the primary widget area, how can I change the Sitewide Top Widget Title to NO BORDER?

I have tried without success…

#weaverxplus_nav_menu-2.widget-title {border: none;}

#extra-x1. widget-title {border: none;}

[GR8FL]

How can I have the sub-menu be as wide as the item above it?

It doesn’t look right with the submenus being smaller width. Ideally, am looking for something that looks like this: http://hattiesgarden.com/ regarding sub-menus. Would also like the dotted separator between sub-menu items.

[scrambler]

1-The ID of that widget area is    sitewide-top-widget-area  so the rule would be

#sitewide-top-widget-area widget-title {border:none;}

2- You cant because if the item on the menu is smaller than the Sub menu, the sub menu would be cutoff. What you can do is make all Sub menus the same width with

.menu-primary .wvrx-menu ul li a {width:100px;}

[GR8FL]

.menu-primary .wvrx-menu ul li a {width:100px;} doesn’t work – it is cut off.

Why doesn’t it work to at least be as wide as the menu bar item? This was not an issue with Weaver Pro II.

[scrambler]

When I give you a rule with a value, it is indicative, you need to adjust the value to whatever you need.

Weaver II pro had the exact same problem, and was using a fixed width as I just showed you how to do the job.

If you want you can use a min-width rule to give them a minimum width, but let them be bigger if you like (again use the value you like)

.menu-primary .wvrx-menu ul li a {min-width:100px;}

[GR8FL]

For now am just making the nav titles about the same length. So I will drop this one.

I have a related issue regarding the mobile menu view of the Extra Menu.

One of your tips recommended to do the following if I didn’t want the 3-bar icon:

.genericon-wvrx-menu:before {content:”Menu”;font-size:60%;} (I changed the size so it would fit better).

.menu-toggle-button {width:2em;}

This is fine for the primary menu bar, but I was wondering if I could use something else for the Extra Menu, since all that is displayed is “Menu” and it isn’t clear to press that to see the Extra Menus. Most folks won’t even realize this is something to press. The Extra Menu is on the Sitewide Top Widget Area. You can see it by going to this site.

[scrambler]

You can specialize the rules using the ID of each menu.

To target only the primary menu bar use

#nav-primary .genericon-wvrx-menu:before {content:”Menu”;font-size:60%;}

#nav-primary .menu-toggle-button {width:2em;}

To target the extra menu at the top of the content use

#extra-x1 .genericon-wvrx-menu:before {content:”OtherMenu“;font-size:60%;}

#extra-x1 .menu-toggle-button {width:2.5em;}

If the text has the same width in both, you don’t need to specialize the second rule

[GR8FL]

That works! 

I guess maybe I need to look for an image, since most people won’t know what the 3 bars mean either. Any thoughts on the size of this?

And thank you for your patience, Scrambler 

And your help!

[scrambler]

I am not sure from where you took the rules, but the last discussion was about a slightly different set of rules that keep both the hamburger icon AND add the text so that both younger generation and older ones can understand

 .is-mobile .genericon-wvrx-menu:after
{content:”MENU”;font-size:90%; padding-left:10px;vertical-align:top;}

.is-mobile .menu-toggle-button {width:5em;}

[GR8FL]

I thought I took the rules from you.

But this one works best. 

Thank you.

[Author]

Posts