{"id":1553,"date":"2020-12-13T20:58:44","date_gmt":"2020-12-13T18:58:44","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=1553"},"modified":"2024-01-05T15:34:36","modified_gmt":"2024-01-05T13:34:36","slug":"header-builder-menus","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-builder\/header-builder-menus\/","title":{"rendered":"Header Builder Menus"},"content":{"rendered":"\n<p>Blocksy comes with an outstanding support for WordPress menus. It supports both menu locations and also displaying individually picked menus that aren&#8217;t assigned to any location.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2020\/12\/CleanShot-2020-12-13-at-21.03.04@2x-1024x618-1.png\" alt=\"\" class=\"wp-image-1560\"\/><figcaption class=\"wp-element-caption\">Menu options in Blocksy 1.7.56<\/figcaption><\/figure>\n\n\n\n<p>When you are on the <strong>Default <\/strong>option &#8212; it uses a location. Otherwise the header item will use the menu item that you select. <\/p>\n\n\n\n<p><strong>Location<\/strong> based matching for menus is enabled by default is that is the common thing to do for themes and is also very intuitive for people that are coming from a theme that doesn&#8217;t have a Header Builder incorporated.<\/p>\n\n\n\n<p>Blocksy&#8217;s Header Builder comes with 3 items that are capable of rendering menus:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Menu 1<\/li>\n\n\n\n<li>Menu 2<\/li>\n\n\n\n<li>Offcanvas Menu<\/li>\n<\/ul>\n\n\n\n<p><strong>Menu 1<\/strong> and <strong>Menu 2<\/strong> can only be rendered on the desktop view of the header, while <strong>Offcanvas Menu<\/strong> can be rendered only in the offcanvas drawer (both mobile and desktop).<\/p>\n\n\n\n<p>This separation is implemented because these items render the items hierarchy very differently and thus have different styling options based on that.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"responsive-desktop-menu\">Responsive desktop menu<\/h4>\n\n\n\n<p>For desktop menus, Blocksy implements a very neat feature which hides the items that don&#8217;t fit on screen automatically in a dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1308\" style=\"aspect-ratio: 3064 \/ 1308;\" width=\"3064\" controls src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2020\/12\/CleanShot-2020-12-13-at-21.17.46.mp4\"><\/video><\/figure>\n\n\n\n<p>This feature is enabled out of the box and is working <em>very<\/em> reliably and its detection system is very good, as long as you don&#8217;t make any CSS modifications to the header layout. When you start changing the mechanism of laying out the header items &#8212; the algorithm for detecting empty spaces will get confused and it won&#8217;t detect the items widths correctly.<\/p>\n\n\n\n<p>Although a very rare case, this happens sometimes and in such cases you can disable the desktop menu responsiveness with the help of this snippet of code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter(\n  'blocksy:header:menu:has-responsive-desktop-menu',\n  '__return_false'\n);<\/code><\/pre>\n\n\n\n<p>It&#8217;s not advised to disable this unless you know what you are doing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blocksy comes with an outstanding support for WordPress menus. It supports both menu locations and also displaying individually picked menus that aren&#8217;t assigned to any location. When you are on the Default option &#8212; it uses a location. Otherwise the header item will use the menu item that you select. Location based matching for menus [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[121],"class_list":["post-1553","documentation","type-documentation","status-publish","hentry","doc_categories-header-builder"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=1553"}],"version-history":[{"count":1,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1553\/revisions"}],"predecessor-version":[{"id":9073,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1553\/revisions\/9073"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=1553"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=1553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}