{"id":6143,"date":"2022-10-07T16:43:35","date_gmt":"2022-10-07T13:43:35","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=6143"},"modified":"2026-10-08T10:56:30","modified_gmt":"2026-10-08T07:56:30","slug":"menu-desktop","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/menu-desktop\/","title":{"rendered":"Menu &#8211; Desktop"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acbff2514f65&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acbff2514f65\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/10\/Screenshot-2022-10-07-at-16.23.06.png\" alt=\"Desktop Menu element displayed inside a Blocksy header\" class=\"wp-image-6146\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The Menu \u2013 Desktop element in action.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Menu<\/strong> element adds your website&#8217;s primary navigation to the desktop header. It can display any WordPress menu you have created, including nested menu items that open inside configurable dropdowns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To configure it, open the <strong>Customiser \u2192 Header<\/strong>, add or select a <strong>Menu<\/strong> element in one of the desktop header rows, and choose the menu that should be displayed.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6acbff2516d64&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6acbff2516d64\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"2060\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/10\/Screenshot-2026-10-08-at-10.55.41.png\" alt=\"\" class=\"wp-image-15267\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Menu \u2013 Desktop configuration options.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h3 class=\"wp-block-heading\">Select Menu<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose which WordPress menu should be rendered by the element. Menus can be created and organised from <strong>WordPress Dashboard \u2192 Appearance \u2192 Menus<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When <strong>Default<\/strong> is selected, Blocksy uses the menu assigned to the corresponding WordPress menu location. You can also select a specific menu directly when you do not want the element to follow the assigned location.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Top-Level Options<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These controls affect the first level of navigation items that remains visible directly inside the header.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Style<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose from four visual styles for the top-level menu links:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Style 1<\/strong> \u2013 displays the links without an additional decorative effect.<\/li>\n\n\n\n<li><strong>Style 2<\/strong> \u2013 adds an animated underline effect to the links.<\/li>\n\n\n\n<li><strong>Style 3<\/strong> \u2013 highlights links using a background Color.<\/li>\n\n\n\n<li><strong>Style 4<\/strong> \u2013 uses an animated border effect around the links.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Items Spacing<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Adjust the horizontal distance between the individual top-level menu items.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Stretch Menu<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Enable <strong>Stretch Menu<\/strong> to distribute the menu items across the available horizontal space occupied by the element instead of relying only on the configured item spacing.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Collapse Non Fitting Items<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Enable <strong>Collapse Non Fitting Items<\/strong> to automatically move top-level menu entries into a <strong>More<\/strong> dropdown when there is not enough horizontal space to display the entire menu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Disable this option if you want all menu entries to remain visible regardless of the available space. In this case, make sure your header layout provides enough room for the complete menu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dropdown Options<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When your WordPress menu contains child items, these settings control how the resulting dropdown menus behave and appear.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Interaction Type<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how visitors open dropdown menus:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hover<\/strong> \u2013 reveals the dropdown when the pointer moves over its parent menu item.<\/li>\n\n\n\n<li><strong>Click<\/strong> \u2013 requires the visitor to explicitly activate the parent item before its dropdown is opened.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Items Hover Effect<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Choose how individual links inside a dropdown react when they are hovered:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Simple<\/strong> \u2013 applies a minimal hover treatment without an additional background shape.<\/li>\n\n\n\n<li><strong>Solid Color<\/strong> \u2013 applies a background Color across the hovered menu item.<\/li>\n\n\n\n<li><strong>Boxed Color<\/strong> \u2013 places the hovered item inside a more compact highlighted shape.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Reveal Effect<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Control the animation used when a dropdown becomes visible:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Default<\/strong> \u2013 reveals the dropdown using Blocksy&#8217;s standard transition.<\/li>\n\n\n\n<li><strong>Inner Reveal<\/strong> \u2013 animates the dropdown container and its contents independently.<\/li>\n\n\n\n<li><strong>Opacity<\/strong> \u2013 fades the dropdown in and out.<\/li>\n\n\n\n<li><strong>Simple<\/strong> \u2013 displays the dropdown using a minimal transition.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Dropdown Size &amp; Spacing<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Fine-tune the dimensions and positioning of the dropdown menus. You can control their <strong>width<\/strong> together with the <strong>horizontal<\/strong> and <strong>vertical<\/strong> spacing relative to the parent menu item.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Menu element adds your website&#8217;s primary navigation to the desktop header. It can display any WordPress menu you have created, including nested menu items that open inside configurable dropdowns. To configure it, open the Customiser \u2192 Header, add or select a Menu element in one of the desktop header rows, and choose the menu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6168,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6143","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","doc_categories-header-elements"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8},"post_title_panel":"","has_hero_section":"default","423c851bb4693da18de132618de65f2b":"","hero_section":"type-1","hero_elements":[{"id":"custom_title","enabled":true,"heading_tag":"h1","title":"Home"},{"id":"custom_description","enabled":true,"description_visibility":{"desktop":true,"tablet":true,"mobile":false}},{"id":"custom_meta","enabled":true,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":true,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true}},{"id":"breadcrumbs","enabled":false}],"545c56136e8b5ad0ef26b21e8c9adef2":"","hero_alignment1":"CT_CSS_SKIP_RULE","hero_margin":40,"hero_alignment2":"center","hero_vertical_alignment":"center","c1139832deeb2ab5206a5b9a47d78410":"","hero_structure":"narrow","98d8da63ed3d73c3456fab435996641f":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"page_title_image_size":"full","parallax":{"desktop":false,"tablet":false,"mobile":false},"b8a2e61c2ce6a806cc06ef3cb21840e4":"","hero_height":"250px","pageTitleFont":{"family":"Default","variation":"Default","size":"30px","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageMetaFont":{"family":"Default","variation":"n6","size":"12px","line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_font_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_background_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"breadcrumbsFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"breadcrumbsFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"initial":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"pageTitleBackground":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--paletteColor6)"}}},"pageTitlePadding":{"top":"50px","bottom":"50px","left":"auto","right":"auto","linked":true},"63cf1f80de2f2a409e33c8437c178c17":"","page_structure_type":"default","7669433a82c62c53fb73ee166b10676a":"","content_style_source":"inherit","content_style":"wide","vertical_spacing_source":"inherit","content_area_spacing":"both","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"content_background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--paletteColor8)"}}},"content_boxed_shadow":{"inherit":false,"blur":18,"spread":-6,"v_offset":12,"h_offset":0,"inset":false,"enable":true,"color":{"color":"rgba(34, 56, 101, 0.04)"}},"content_boxed_border":{"width":1,"style":"none","color":{"color":"rgba(44,62,80,0.2)"}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"boxed_content_spacing":{"desktop":{"top":"40px","bottom":"40px","left":"40px","right":"40px","linked":true},"tablet":{"top":"35px","bottom":"35px","left":"35px","right":"35px","linked":true},"mobile":{"top":"20px","bottom":"20px","left":"20px","right":"20px","linked":true}},"df0e9146848a67d0167de0ed52a2d7e3":"","disable_featured_image":"no","disable_share_box":"no","disable_author_box":"no","disable_posts_navigation":"no","61660d338b4182bbaa14745356149043":"","disable_related_posts":"no","disable_header":"no","disable_footer":"no","0194b4d9975cd050f6ad291cb9e48dcd":"","header_footer_scripts_panel":"","header_scripts":"","af665fed3b04989401cc8cb40829d17d":"","header_after_body_scripts":"","0f856bbf0050634b569d2b12a637e89a":"","footer_scripts":"","docs_item_badge":"","1bb89b1ff44ad4a80a7ad541fea8191b":"","0e0e5442afcb6f209e4d262b424ff9ea":"","629571013bfcdb99dd1ad88336a4b4ea":"","ba61de3284a5421de8ff4494ecda6b35":"","4c5b3b7b66e64747d2e0759ad7e6c8c7":"","34106d0ebc22cb7529020a52471f2f1b":"","20e72ae6eff1e2c12f541f9c84f80d28":"","795ae9235550415ddd7a5cda477a32ce":"","1aabaa575e73c904c3b7add1495d8426":"","4a25b4e7bc617c35f91968dfee4eecba":"","1a325a09433b1055bf513f0f27787e64":"","67346856162c943b088dcd7144b1d752":""},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6143","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=6143"}],"version-history":[{"count":4,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6143\/revisions"}],"predecessor-version":[{"id":15268,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6143\/revisions\/15268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/6168"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6143"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}