Home › Forums › Weaver Xtreme Theme › Extra Menu Option Styling
- This topic has 13 replies, 2 voices, and was last updated 8 years, 8 months ago by
GR8FL.
-
AuthorPosts
-
March 13, 2015 at 00:32 UTC - Views: 58 #17463
GR8FL
ParticipantI 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/menusDo 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.March 13, 2015 at 01:04 UTC - Views: 19 #20521scrambler
ModeratorI 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.
March 13, 2015 at 01:40 UTC - Views: 20 #20522GR8FL
ParticipantHow 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?March 13, 2015 at 03:59 UTC - Views: 19 #20523scrambler
ModeratorTo 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;}
March 13, 2015 at 09:05 UTC - Views: 23 #20524GR8FL
ParticipantPlease 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;}March 13, 2015 at 09:07 UTC - Views: 18 #20525GR8FL
ParticipantHow 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.March 13, 2015 at 16:50 UTC - Views: 18 #20526scrambler
Moderator1-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;}
March 13, 2015 at 19:04 UTC - Views: 18 #20527GR8FL
Participant.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.March 13, 2015 at 21:10 UTC - Views: 17 #20528scrambler
ModeratorWhen 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;}
March 13, 2015 at 22:32 UTC - Views: 23 #20529GR8FL
ParticipantFor 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.March 13, 2015 at 22:53 UTC - Views: 17 #20530scrambler
ModeratorYou 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
March 13, 2015 at 23:11 UTC - Views: 18 #20531GR8FL
ParticipantThat 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, ScramblerAnd your help!March 14, 2015 at 00:16 UTC - Views: 18 #20532scrambler
ModeratorI 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;}
March 14, 2015 at 02:18 UTC - Views: 18 #20533GR8FL
ParticipantI thought I took the rules from you.
But this one works best.Thank you. -
AuthorPosts
- You must be logged in to reply to this topic.