Weaver Xtreme Tips and Tutorial (part 6)

[scrambler]

This is a new Tips and Tutorial for the Weaver Xtreme theme

INDEX for all the threads is here: http://forum-archive.weavertheme.com/discussion/10344/index-for-the-weaver-xtreme-tips-and-tutorials-threads

If you are new to CSS Customization, read the introduction of http://forum-archive.weavertheme.com/discussion/590/infos-and-examples-for-custom-css-rules

If you have not done so yet, PLEASE READ THE HELP in Weaver Xtreme > Help > Weaver Xtreme Theme Documentation!!
There is a lot of information there that will help you understand what the theme has to offer.

Unless indicated otherwise, custom CSS Rules go in Main Options > Fonts & Custom > Custom CSS rule box

1) Styling WordPress Custom Menu Widget

First, if you need fully styled Vertical menu, you should really invest in the “Plus” Plugin that will give you widget and shortcode to do just that, and use any WordPress Custom Menu with any of the theme menu styles (primary, secondary, min, and Extra).

Now if you really cannot afford “Plus” and need to do some styling on the Custom Menu Widget, here are some basic rules you can use. Remove any property you don’t need.

#menu-MenuName, #menu-MenuName ul {list-style:none}   /*Style ul properties*/
#menu-MenuName li {margin:5px 0;}   /*Space Individual menu Items*/
#menu-MenuName li a {color:black;background-color:grey;padding:5px;display:inline-block;width:90%;}   /*Style Individual menu text*/
#menu-MenuName li.current_page_item a {color:red;background-color:white;}   /*Styles Current page*/
#menu-MenuName li a:hover {color:blue;background-color:yellow}   /*Styles Hover*/

Replacing MenuName by the name of your custom menu

2) Adding a Menu label beside the Hamburger Icon On mobile

NEWER VERSION on the Guide Site Here

3) Changing Submenus from Vertical to Horizontal

NEWER VERSION on the Guide Site Here

You can play with the basic rules below to try and accomplish that
Tweak values as needed

.is-desktop .wvrx-menu ul li {display:inline-block;}  /*makes sub menus horizontal*/
.is-desktop .wvrx-menu ul {left:-100px;}      /*Shifts sub menus left so they don’t extend outside of the browser*/
.is-desktop .sub-menu .sub-menu {left:-100px;top:30px;}    /*Shifts sub sub menus left and down*/

Depending on your menu structure, you may need more specialized rules to shift different sub menus with different values. You would need to inspect your page and check menus and sub menu IDs for that.

We can help if you posts a link to the site with the above basics in place explaining what you need to modify.

4) Have a different header image on Mobile

Solution one:

1- In Main Options > Header > Header Image > Hide header Image, select Hide: Phones + tablets, so the standard header image does not show on mobile.

2- Then in Main Options > Header > Header HTML > Header HTML BG CSS+ box type the rule below

{} #branding %selector% {display:block;} #branding %selector% img {display:block;}

3- Then in Main Options > Header > Header HTML > Hide Area, Select Hide: Desktop, so the mobile image does not show on desktop

4- Finally, in Main Options > Header > Header HTML >Header HTML Content box, type the code for the mobile header image like below

<img src=”MobileHeaderImageUrl” />
Using the Full URL of the image to use

Solution two:

If you are using the Header Html for something else, replace steps 2,3,4 by the ones below

2- Insert the image tag of the Mobile header image in a widget inside the Header Widget Area, or an HTML Insertion area like Advanced Options > HTML insertion > Header area (if you have plus).

To have the image only show on mobile, put it inside a [show_if] shortcode like below
[show_if device=mobile] <img src=”MobileHeaderImageUrl” />[/show_if]

You may need some custom CSS to tweak responsiveness

5) Simple centered horizontal menu with separators (using Plus Extra menu shortcodes)

Set your Menu style like centered and vertical separators in the Extra Menu setings

Then insert the menu in the area of your choice, use an Extra menu shortcode like below

[extra_menu menu_name='CustomMenuName' menu_style='extra' menu_type='horizontal']

6) Style Current page Parent page

NEWER VERSION on the Guide Site Here

7) Remove general border on specific images

NEWER VERSION on the Guide Site Here

If you have set a border for all images in Main Options > Content Areas > Images, you may want a way to remove that border on some specific ones.

To do that, create a class that removes all border/shadow styling by adding the rule below to Main Options > Fonts & Custom > Custom CSS Rule box

.noborder {background-color:transparent !important;border: none !important;-moz-box-shadow:none !important;-webkit-box-shadow:none !important;box-shadow:none !important;padding:0 !important;}

Then add that class to any image that should not have the border. To do that, Switch your content editor to text mode, and add the class to the Image tag class attribute (in yellow). If the image tag does not have a class attribute add one.

For example if your image tag looked like <img class=”class1 class2″…/> make it

<img class=”noborder class1 class2″…/>

If you want to remove the border/shadow on images you have no acces to, like the showhide icons or others, you need to inspect your page with your browser developer tools to find the selector that can target them and add it to the rule.

For example, to target the showhide icons you would use img[alt=show], img[alt=hide] so the initial rule would have to be changed to:

.noborder, img[alt=show], img[alt=hide] {background-color:transparent !important;border: none !important;-moz-box-shadow:none !important;-webkit-box-shadow:none !important;box-shadow:none !important;padding:0 !important;}

8) Make the Slide open Mobile Menu display in 2 columns on small tablets

NEWER VERSION on the Guide Site Here

Add the rules below in Main Options > Custom > Custom CSS rule box

@media screen and (min-width:581px) and (max-width:767px) {
ul.sm.wvrx-menu > li, ul.wvrx-menu > li {float:left !important;width:50%;}
ul.sm.wvrx-menu > li:nth-of-type(2n+1), ul.wvrx-menu > li:nth-of-type(2n+1) {clear:both;}
ul.sm.wvrx-menu > li:nth-of-type(2), ul.wvrx-menu > li:nth-of-type(2) {margin-top:0.5em;}
}

Note 1: If you want it on phones too, remove the first part of the @media rule (and (min-width:581px))

Note 2: If you need to restrict this to a specific menu style or individual menu, you will need to add the specific selector in front of the rules (make sure to do that on each selector as there are more than one on each rule)
Menus styles selectors:
  .menu-primary
  .menu-secondary
  .menu-extra

Typical menu IDs (Inspect your page with your browser developer tool to find it) include:
For Main menu bars
  #nav-primary
  #nav-secondary
 For Extra menus (n will be a number)
  #primary-xn
  #secondary-xn
  #extra-xn

For example the CSS below will only affect menu using the primary style

@media screen and (min-width:581px) and (max-width:767px) {
.menu-primary ul.sm.wvrx-menu > li, .menu-primary ul.wvrx-menu > li {float:left !important;width:50%;}
.menu-primary ul.sm.wvrx-menu > li:nth-of-type(2n+1), .menu-primary ul.wvrx-menu > li:nth-of-type(2n+1) {clear:both;}
.menu-primary ul.sm.wvrx-menu > li:nth-of-type(2), .menu-primary ul.wvrx-menu > li:nth-of-type(2) {margin-top:0.5em;}
}

As usual, if I missed something or screwed up, please chime in

[GR8FL]

Thanks Scrambler!

[scrambler]

Added 2 columns sub menus

[Maureen]

Had to post a thank you to @Scrambler. I just added a MENU label to the burger icon and now using a different header for Mobile. His instructions were so well written and easy to follow.

Thanks Scrambler — you make me look good! 

[txmom]

4) Different header on mobile

 I tried solution 2 and get the following error     
Error with [hide/show_if]: ”mobile” not valid for device parameter.  

 Is there something else I should be using than mobile or do I need to set up parameters?

[scrambler]

Looking at the help in Add-ons > Show if shortcode ?buble, it looks like the quotes are not needed

[show_if device=mobile] <img src=”MobileHeaderImageUrl” />[/show_if]

In which case it was my error. But you should always read the help of any feature you use 🙂

[txmom]

Thanks for both the tutorials and solution. 

[Author]

Posts