Menu Bar: Advanced Customizations
This Tutorial takes you over the following Menu Bar customizations:
- Site Logo & Menu positioning
- Menu / Submenus hover
- Horizontal Submenus
- Two columns Submenus
- Increase space between Menu items
- Shifting out of screen Submenus
- Submenus width or text wrap
- Menu Bars margin & padding
- Wrapping of Menu Add HTML area
In the various examples below, you can use some of the Menu selectors below to specialize Custom CSS rules to a specific Menu.
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
1) Site Logo and Menu positioning
Xtreme has an option to Add the Site Logo to the left of the Menu Bar
Customize > Added Content… > Menus > Add Site Logo to left
General Information on the Site Logo option can be found here
How to use the site logo
It also has an option to Set the height of that logo image
Customize > Spacing, Width… > Menus > Logo On Menu Bar Height
When the logo is higher than the Menu bar, it automatically increases its height and the Menu items will be positioned at the top of that space.
If you wish to center the menu items vertically in that space, or position them at the bottom of the space, you can use a custom CSS rule like below to move it down.
Adjust the padding value to get the vertical position you like, and change the first selector to secondary if using the secondary menu
#nav-primary ul.wvrx-menu {padding-top:2em;}
If you only want the space on desktop, add the is-desktop class to the rule.
.is-desktop #nav-primary ul.wvrx-menu {padding-top:2em;}
Aligning the logo to the right on mobile
Add the rule below in the Theme Global Custom CSS Rule box
.is-mobile .custom-logo-on-menu {float:right;}
2) Menu item hover style when hovering Sub Menus
To keep or define a Hover style on top menu items while hovering their sub menus, add the rule below to the Global Custom CSS Rule box
.menu-primary .wvrx-menu li:hover > a {
background-color:#742836 !important;
color:white !important;
}
/*-If you have arrows also use below */
.menu-primary .wvrx-menu > li:hover > a .toggle-submenu:after {
color:white !important;
}
.menu-primary .menu-arrows > li.current_page_item .toggle-submenu:after,
.menu-primary .menu-arrows > li:hover .toggle-submenu:after {color:#742836;}
.menu-primary .menu-arrows > li.current_page_item .toggle-submenu,
.menu-primary .menu-arrows > li:hover .toggle-submenu {background-color:white !important;}
3) Changing Submenus from Vertical to Horizontal
You can play with the basic rules below (placed in the Global Custom CSS Rule box), to try and accomplish that
Tweak values as needed.
/* makes sub menus horizontal */
.is-desktop .wvrx-menu ul li {display:inline-block;}
/* Shifts sub menus left so they don’t extend outside of the browser */
.is-desktop .wvrx-menu ul {left:-200px;}
/*Shifts sub sub menus left and down*/
.is-desktop .sub-menu .sub-menu {left:-100px;top:30px;}
/* Add BG color to sub menu container */
.is-desktop .sub-menu {background-color:grey;}
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 on the support Forum, if you post a link to the site with the above basics in place, and explaining what you need to modify.
4) Two columns Sub Menus
If you have very long Sub menus, here are the rules to spread them across two columns (place in the Global Custom CSS Rule box)
@media screen and (min-width:768px) {
/* Set overall width */
ul.sm.wvrx-menu ul, ul.wvrx-menu ul {width:400px;}
/* Spread over two columns & top border */
ul.sm.wvrx-menu ul > li, ul.wvrx-menu ul > li {
float:left !important;width:50%;border-top:1px solid black;
}
/* First columns clear and right border */
ul.sm.wvrx-menu ul > li:nth-of-type(2n+1),
ul.wvrx-menu ul > li:nth-of-type(2n+1) {
clear:both;border-right:1px solid black;
}
}
5) Increase space between Menu items
Note: There is an option to increase desktop menu item on non smart menus, but it only adds space on one side
To increase the space on both sides of menu items, add the rules below in the Global Custom CSS Rule box
/* changes right left padding to 2em */
.wvrx-menu > li > a {padding-left:2em;padding-right:2em;}
/* adds 2em to the existing .5em for the menu with sub menu arrow */
.menu-hover.menu-arrows .has-submenu > a {padding-right:3em;}
/* shifts the arrow so space is added right of it */
.menu-hover.menu-arrows .toggle-submenu::after {right:2.5em;}
6) Shifting off screen Sub (Sub) Menu left
Submenus always open to the right of their parent. If the Menu parent is already on the right side of the page, the sub menus may open partially off screen.
“Plus” Smart Menus will take care of shifting them so they remain inside the page.
I you do not have “Plus”, you can shift their positioning to the left of the parent using CSS.
First you need to inspect you page to find the class of the SubMenu item. It will be something like menu-item-xxx
Then Use the rule below (place in the Global Custom CSS Rule box)
.is-desktop #menu-item-xxxx .sub-menu {left:auto;right:0px;}
7) Limit width or wrap text of Sub Menus
To just let them wrap and adjust the size to the largest word use.
.is-desktop .wvrx-menu li li {white-space:normal;}
If you wish to also fix their width, make it.
.is-desktop .wvrx-menu li li {white-space:normal;width:150px;}
7) Menu Bars default edges margin & padding
By default weaver Xtreme adds some left margin and some right padding on the menu bars, so that on left aligned menu, the first menu Item is not against the edge, nor is the last one on right aligned menus.
If you need your menu items to be flushed (left or right, you can remove these with the rule below (place in the Global Custom CSS Rule box)
ul.wvrx-menu {margin-left:0px;}
.is-desktop .menu-alignright {padding-right:0px;}
8) Control the wrapping of Menu Add HTML areas
If the menu items and the menu add HTML area(s) do not fit on one line, one of two things will happen.
- If menu bar is aligned left, the menu items will wrap around the add html area.
- If menu bar is aligned right or center, the menu items will stack under the add html area.
If you want a different behavior like side by side without wrapping or stacked, or stacked instead of wrapping, you can use one of the following 3 methods.
1- Side by side % width:
Set a width for the Menu and Add HTML area using a % with the rules below.
Keep total width + margins at 100%.
Use right or left in depending which area you are targeting
Replace #SpecificMenuId by your menu ID as explained at the top of this tutorial
.is-desktop #SpecificMenuId .wvrx-menu-right {
width:29%;margin-left:1%;margin-right:1%;
}
.is-desktop #SpecificMenuId .wvrx-menu {
width:69%;
}
2- Side by Side fixed width for the HTML area:
Set a fixed width for the Add HTML area with the value you need, and put a corresponding margin on the menu block (using width value plus margin values).
For an Add HTML left area, the rules are:
Replace #SpecificMenuId by your menu ID as explained at the top of this tutorial
The second margin-right is the sum of the Width and the R/L margin above
.is-desktop #SpecificMenuId .wvrx-menu-left {
width:200px;margin-left:10px;margin-right:10px;
}
.is-desktop #SpecificMenuId .wvrx-menu {
margin-left:220px;
}
For an Add HTML right area, the rules are:
Replace #SpecificMenuId by your menu ID as explained at the top of this tutorial
The second margin-right is the sum of the Width and the R/L margin above
.is-desktop #SpecificMenuId .wvrx-menu-right {
width:200px;margin-left:10px;margin-right:10px;
}
.is-desktop #SpecificMenuId .wvrx-menu {
margin-right:220px;
}
3- Stacked (only needed for left aligned menus):
Putting the Add HTML area above the menu bar by simply un-floating the Add HTML area with the rule below.
Replace #SpecificMenuId by your menu ID as explained at the top of this tutorial
.is-desktop #SpecificMenuId .wvrx-menu-html {
float:none;
}