{"title":"Customizing Phlox Header Menu","id":35965,"link":"https:\/\/env.averta.net\/en\/step\/customizing-phlox-header-menu\/","parent":[59905,35053],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36001 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/headermenu-1.png\" alt=\"headermenu\" width=\"315\" height=\"212\" \/><\/p>\n<p>In the customizer, you can find many options to personalize the header menu of your website. The header menu contains different layouts, skins, and some customizations for submenus.<\/p>\n<p>To access the header?menu options:<\/p>\n<ol>\n<li style=\"font-weight: 400;\">Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click?<\/span><b>Appearance<\/b><span style=\"font-weight: 400;\"> on the <\/span><b>Dashboard<\/b><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Then click?<\/span><b>Customize<\/b><\/li>\n<li style=\"font-weight: 400;\">Navigate?<strong>Header &gt;?Header Menu<\/strong><\/li>\n<\/ol>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>You can change Header Layout to Horizontal or Vertical. To know more about available options for header section, please read <a href=\"https:\/\/env.averta.net\/en\/step\/customizing-phlox-header-section\/?b=35894,35894\" title=\"Customizing Phlox Header Section\">this article<\/a>.<\/p>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/irSajN7JXQQ?rel=0\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3 style=\"clear: both;\">Header Submenu Skins and Effects<\/h3>\n<p>Here you can set one of the six available <strong>Horizontal<\/strong>?<strong>Header Submenu Skins<\/strong>.<\/p>\n<table>\n<tbody>\n<tr>\n<th style=\"text-align: center;\">Skin<\/th>\n<th style=\"text-align: center;\">Preview<\/th>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Paradox<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35976 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/paradox.png\" alt=\"paradox\" width=\"262\" height=\"109\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35980\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/paradoxpreview.png\" alt=\"paradoxpreview\" width=\"552\" height=\"310\" \/><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Paradox-Vertical-Menu.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-51120\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Paradox-Vertical-Menu.jpg\" alt=\"\" width=\"680\" height=\"387\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Paradox-Vertical-Menu.jpg 680w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Paradox-Vertical-Menu-300x171.jpg 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Paradox-Vertical-Menu-128x72.jpg 128w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Paradox-Vertical-Menu-304x173.jpg 304w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Classic<\/p>\n<p>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35978 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/classic.png\" alt=\"classic\" width=\"262\" height=\"109\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35981\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/classicpreview.png\" alt=\"classicpreview\" width=\"552\" height=\"310\" \/><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Dark Transparent<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35984 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/darktransparent.png\" alt=\"darktransparent\" width=\"262\" height=\"109\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35986\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/darktransparentpreview.png\" alt=\"darktransparentpreview\" width=\"552\" height=\"310\" \/><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Dark-Transparent-Vertical-Menu.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-51121\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Dark-Transparent-Vertical-Menu.jpg\" alt=\"\" width=\"680\" height=\"411\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Dark-Transparent-Vertical-Menu.jpg 680w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Dark-Transparent-Vertical-Menu-300x181.jpg 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Dark-Transparent-Vertical-Menu-286x173.jpg 286w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Divided<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35987 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/divided.png\" alt=\"divided\" width=\"262\" height=\"109\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35988\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/dividedpreview.png\" alt=\"dividedpreview\" width=\"592\" height=\"310\" \/><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Divided-Vertical-Menu.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-51122\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Divided-Vertical-Menu.jpg\" alt=\"\" width=\"682\" height=\"374\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Divided-Vertical-Menu.jpg 682w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Divided-Vertical-Menu-300x165.jpg 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Divided-Vertical-Menu-315x173.jpg 315w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?Center Paradox<\/p>\n<p style=\"text-align: left;\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35989 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/centerparadox.png\" alt=\"centerparadox\" width=\"262\" height=\"109\" \/><\/p>\n<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35990\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/centerparadoxpreview.png\" alt=\"centerparadoxpreview\" width=\"552\" height=\"310\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?Modern Paradox<\/p>\n<p style=\"text-align: left;\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-35991 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/modernparadox.png\" alt=\"modernparadox\" width=\"262\" height=\"109\" \/><\/p>\n<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35993\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/modernparadoxpreview.png\" alt=\"modernparadoxpreview\" width=\"552\" height=\"310\" \/><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Modern-Paradox-Vertical-Menu.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-51123\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Modern-Paradox-Vertical-Menu.jpg\" alt=\"\" width=\"676\" height=\"375\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Modern-Paradox-Vertical-Menu.jpg 676w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Modern-Paradox-Vertical-Menu-300x166.jpg 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Modern-Paradox-Vertical-Menu-128x72.jpg 128w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Modern-Paradox-Vertical-Menu-312x173.jpg 312w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>You can apply &#8220;<em>fade&#8221;<\/em> or &#8220;<em>fade and move&#8221;<\/em> effect to the submenu through <strong>Sub-menu Animation Effect<\/strong>. Or if you do not want an effect for the submenu, choose <em>none<\/em>.<\/p>\n<hr \/>\n<h3 style=\"clear: both;\">Submenu Animation Effect<\/h3>\n<p>The submenus can animate while opening.<\/p>\n<table>\n<tbody>\n<tr>\n<th style=\"text-align: center;\">Submenu animation effect<\/th>\n<th style=\"text-align: center;\">Preview<\/th>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">None<\/p>\n<\/td>\n<td><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/NoFade.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-59066\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/NoFade.gif\" alt=\"\" width=\"600\" height=\"377\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Fade<\/p>\n<\/td>\n<td><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/FadeTrim.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-59068\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/FadeTrim.gif\" alt=\"\" width=\"600\" height=\"375\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Fade &amp; Move<\/p>\n<\/td>\n<td><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/FadeAndMoveTrim.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-59069\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/FadeAndMoveTrim.gif\" alt=\"\" width=\"600\" height=\"376\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>Header Submenu Indicator and Splitter<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36000 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/indicator-splitter.png\" alt=\"indicator-splitter\" width=\"273\" height=\"264\" \/><\/h3>\n<p>By switching?on the &#8220;Display Submenu Indicator&#8221; option, an indicator arrow will appear beside those?menu items that have submenu.<\/p>\n<p>You can also easily divide the menu items by switching on the?<strong>Display Menu Splitter <\/strong>option.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3>Header Submenu Location<\/h3>\n<p>The submenu can be located <em>below header<\/em> or <em>below header menu items<\/em>.<\/p>\n<table>\n<tbody>\n<tr>\n<th style=\"text-align: center;\">Sub-menu Location<\/th>\n<th style=\"text-align: center;\">Preview<\/th>\n<\/tr>\n<tr>\n<td>\n<p style=\"text-align: center;\">Below Header<\/p>\n<p>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36004 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/belowheader-4.png\" alt=\"belowheader\" width=\"265\" height=\"110\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36006 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/belowheader-preview.png\" alt=\"belowheader-preview\" width=\"570\" height=\"330\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?Below Header?Menu Items<\/p>\n<p style=\"text-align: left;\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36005 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/belowheadermenuitems.png\" alt=\"belowheadermenuitems\" width=\"265\" height=\"110\" \/><\/p>\n<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36007 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/belowheadermenuitems-preview.png\" alt=\"belowheadermenuitems-preview\" width=\"570\" height=\"316\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>Vertical Header Menu<\/h3>\n<p>After changing header layout (in <a href=\"http:\/\/env.averta.net\/en\/step\/customizing-phlox-header-section\">Header Section<\/a>) to Vertical, some options will be appear on the header menu customizations:<\/p>\n<p>&nbsp;<\/p>\n<h4>Display Vertical Menu Footer<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-vertical-menu.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-59073 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-vertical-menu-e1536146739993.png\" alt=\"\" width=\"303\" height=\"496\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-vertical-menu-e1536146739993.png 303w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-vertical-menu-e1536146739993-183x300.png 183w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-vertical-menu-e1536146739993-106x173.png 106w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/a><\/h4>\n<p>To add footer to the vertical menu, switch on this option.<\/p>\n<h4>Display Searchbox Border<\/h4>\n<p>By enabling this option, you can add a border on the bottom of the searchbox.<\/p>\n<h4>Display Vertical Menu Copyright Text<\/h4>\n<p>A copyright text will appear at the bottom of the vertical menu if you enable this option.<\/p>\n","type":"solution"}