{"title":"Configuring Menu General Options in Phlox","id":35603,"link":"https:\/\/env.averta.net\/en\/step\/configuring-menu-general-options-in-phlox\/","parent":[35053],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-36785\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/menus.png\" alt=\"menus\" width=\"450\" height=\"270\" \/>Phlox provides additional features?for <strong>Navigation and Menu<\/strong>. These options?include three <b><a href=\"https:\/\/env.averta.net\/en\/step\/available-menu-locations-in-phlox\/?b=35659,35659\" title=\"Available Menu Locations in Phlox\">menu locations<\/a><\/b>, different navigation types such as <strong><a href=\"https:\/\/env.averta.net\/en\/step\/adding-phlox-burger-menu-to-the-header\/?b=35671,35671\" title=\"Adding Phlox Burger Menu to the Header\">burger menu<\/a><\/strong> with different styles, <strong><a href=\"https:\/\/env.averta.net\/en\/step\/configuring-phlox-mobile-menu-options\/?b=35675,35675\" title=\"Configuring Phlox Mobile Menu Options\">mobile menu<\/a><\/strong> for smaller screen sizes, and <strong><a href=\"https:\/\/env.averta.net\/en\/step\/creating-a-megamenu\/?b=35657,35657\" title=\"Creating a Megamenu\">megamenu<\/a><\/strong> which?displays multiple columns of menu items inside one?sub-menu.<\/p>\n<p>These options can be managed through WordPress menu settings page, besides, you can find many other navigation styling options in WordPress customizer.<\/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\/porrf6QgjuU?rel=0\" frameborder=\"0\" encrypted-media\" allowfullscreen><\/iframe><\/div>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>To know how to?create a menu and be familiar with menu structures,?you can find useful information <a href=\"https:\/\/codex.wordpress.org\/WordPress_Menu_User_Guide\">here<\/a>.<\/p>\n<hr \/>\n<h3>Additional Menu Options<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-35722\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/additional-features.png\" alt=\"additional-features\" width=\"305\" height=\"503\" \/><\/h3>\n<p>In the WordPress menu page (Dashboard &gt; Appearances &gt; Menu) you can simply expand the item to find these additional options.<\/p>\n<ul>\n<li><strong>Submenu as Megamenu: <\/strong>Check this option to transform the classic?submenu to a megamenu layout.?(Check out <a href=\"https:\/\/env.averta.net\/en\/step\/creating-a-megamenu\/?b=35657,35657\" title=\"Creating a Megamenu\">this article<\/a>?to read more.)<\/li>\n<\/ul>\n<ul>\n<li><b>Disable Link:?<\/b>?This option removes the link of the menu item.<\/li>\n<\/ul>\n<ul>\n<li><b>Hide Label:?<\/b>This option removes the label of navigation (the name). It is useful when you want to have only an icon for your navigation.<\/li>\n<\/ul>\n<ul>\n<li><b>Icon:?<\/b>This option adds an icon beside the menu item.<\/li>\n<\/ul>\n<ul>\n<li><strong>Icon Alignment:<\/strong><em>?<\/em>You can change the alignment of the icon by this option. There are four positions: left, right, top, and bottom.\n<div>\n<div id=\"attachment_35807\" style=\"width: 130px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-35807\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35807 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/about-iconleft-1.png\" width=\"120\" height=\"70\" \/><p id=\"caption-attachment-35807\" class=\"wp-caption-text\">Left Alignment<\/p><\/div>\n<div id=\"attachment_35806\" style=\"width: 130px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-35806\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35806 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/about-iconright-1.png\" width=\"120\" height=\"70\" \/><p id=\"caption-attachment-35806\" class=\"wp-caption-text\">Right Alignment<\/p><\/div>\n<div style=\"clear: both;\"><\/div>\n<div id=\"attachment_35767\" style=\"width: 100px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-35767\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35767 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/about-boticon.png\" alt=\"about-boticon\" width=\"90\" height=\"70\" \/><p id=\"caption-attachment-35767\" class=\"wp-caption-text\">Bot Alignment<\/p><\/div>\n<div id=\"attachment_35770\" style=\"width: 100px\" class=\"wp-caption alignleft\"><img aria-describedby=\"caption-attachment-35770\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-35770 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/about-topicon.png\" alt=\"about-topicon\" width=\"90\" height=\"70\" \/><p id=\"caption-attachment-35770\" class=\"wp-caption-text\">Top Alignment<\/p><\/div>\n<\/div>\n<\/li>\n<li style=\"clear: both;\"><strong>Hide on Desktop:?<\/strong>Check this option to hide the?menu item on desktop devices.<\/li>\n<\/ul>\n<ul>\n<li style=\"clear: both;\"><strong>Hide on Tablet:?<\/strong>Check this option to hide the menu item on tablets.<\/li>\n<\/ul>\n<ul>\n<li style=\"clear: both;\"><strong>Hide on Mobile:?<\/strong>Check this option to hide the menu item on mobiles.<\/li>\n<\/ul>\n<ul>\n<li style=\"clear: both;\"><strong>Custom Style:?<\/strong>This option is for those who want to write a custom CSS style.<\/li>\n<\/ul>\n","type":"solution"}