{"id":7825,"date":"2026-02-02T00:00:00","date_gmt":"2026-02-01T23:00:00","guid":{"rendered":"https:\/\/sitedu.de\/?post_type=docs&#038;p=7825"},"modified":"2026-02-11T19:02:16","modified_gmt":"2026-02-11T18:02:16","password":"","slug":"how-to-edit-your-menu-navbar","status":"publish","type":"docs","link":"https:\/\/sitedu.de\/en\/docs\/how-to-edit-your-menu-navbar\/","title":{"rendered":"How to edit your Menu (NavBar)"},"content":{"rendered":"<p class=\"wp-block-paragraph\">The element Menu is responsible for adding navigation to your website, which allows users to easily move through subpages. In your template, we have already added this navigation for you.<\/p>\n\n\n\n<div style=\"position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);\"><iframe loading=\"lazy\" allowfullscreen=\"\" mozallowfullscreen=\"\" webkitallowfullscreen=\"\" playsinline=\"\" allow=\"autoplay; fullscreen; picture-in-picture\" src=\"https:\/\/kommodo.ai\/embed\/recordings\/5J977ornBWwOKZ5f0kBl?onlyRecording=1\" width=\"100%\" height=\"100%\" style=\"border: 0px; position: absolute; inset: 0px;\"><\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Add menu item<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In order to edit a menu, right-click on it and select \u201cEdit content\u201d. To add a link to your menu use the \u201cAdd button\u201d field. Change the tab to \u201cLinked to\u201d. In the \u201cPage name\u201d field enter a name that will be displayed as a new Menu item. The \u201cLink to\u201d field allows you to choose a link type you would like to create:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Do Nothing<\/strong>: Creates a menu element without a click action. This option is particularly useful when building a two-level menu. When a user hovers on this element, it unrolls showing the second part of the menu.<\/li>\n\n\n\n<li><strong>Go to a page<\/strong>: Creates a menu element which after clicking transfers users to a certain subpage on your website.<\/li>\n\n\n\n<li><strong>Scroll page to selected object:<\/strong> This function is primarily designed for the advanced mode of the editor. You can reach out to us to enable it. It creates a menu element, which after clicking transfers users to a certain element on the chosen page. Select \u201cgo to object on page\u201d, choose subpage and element on it. If you don&#8217;t know the name of the selected element, click on it and read its name from layers panel (the element shows up in green color).<\/li>\n\n\n\n<li><strong>Go to an article:<\/strong> Creates a menu element which after clicking transfers users to a certain newspage on your website.<\/li>\n\n\n\n<li><strong>Other<\/strong>: Creates a customized menu element such as:\n<ul class=\"wp-block-list\">\n<li><strong>URL address<\/strong>: a menu element which after clicking transfers users to a website of your choice. Type the URL address in the \u201cWebsite address\u201d section and decide whether it should open in a new browser window.<\/li>\n\n\n\n<li><strong>Call phone number<\/strong>: runs default calling application like Skype on users&#8216; computer or automatically dials mobile phone number of your choice on users&#8216; phone.<\/li>\n\n\n\n<li><strong>Send E-Mail:<\/strong> opens default mailbox application like Mailbox (Windows 10) on user&#8217;s computer or Gmail on user&#8217;s mobile phone and automatically puts a recipient e-mail address of your choice.<\/li>\n\n\n\n<li><strong>View or download file: <\/strong>Allows the user to download an image or a file of your choice.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Remove Page from Menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. In order to remove a subpage from the menu, click the \u201cedit\u201d button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Then click the \u201cremove\u201d button. Done, subpage removed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change Pages&#8216; order in Menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To change pages&#8216; order, just drag it and place it where you want it in your menu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add subpages to Menu<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In order to add elements to the second level of menu, sort the elements&#8216; list and place it \u201cunder\u201d the first level button.<\/p>\n\n\n\n<div style=\"position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);\"><iframe loading=\"lazy\" allowfullscreen=\"\" mozallowfullscreen=\"\" webkitallowfullscreen=\"\" playsinline=\"\" allow=\"autoplay; fullscreen; picture-in-picture\" src=\"https:\/\/kommodo.ai\/embed\/recordings\/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1\" width=\"100%\" height=\"100%\" style=\"border: 0px; position: absolute; inset: 0px;\"><\/iframe><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Mode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In advanced mode, you have more options for your menu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change Menu type: horizontal\/vertical\/mobile<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To change menu type in the website builder, select in the element edition panel \u201cMenu type\u201d and choose amongst horizontal, vertical and mobile. The direction of menu rollout you may select in the \u201cSubmenu\u201d tab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change Menu style<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In order to change menu style, all you would have to do is to click one time on it. In the side edition panel, set attributes like in any other element. You may change background color, visibility, borders etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Change the Menu button style<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Normal State<\/strong> \u2014 to change the style of a single menu button, double-click on it. The blue frame will appear and in the Settings panel you will be able to edit a single button&#8217;s style and its content.<\/li>\n\n\n\n<li><strong>State: Hover<\/strong> \u2014 to change the style of a single menu button when a user hovers over it, select in the Settings panel \u201cState: Hover\u201d and adjust the button&#8217;s style and content accordingly.<\/li>\n\n\n\n<li><strong>State active<\/strong> \u2014 a state of the linked subpage which is currently open. In order to edit this state, select in the Settings panel \u201cState: Active\u201d and adjust style and content.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Make one menu button look different from others<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want one menu button to look different from others, double-click on it and in the Settings panel select \u201cSame button design\u201d and untick a \u201cUse default level style\u201d box.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From now on, every change made to this button will not cause the changes in the other buttons (in style or content).<\/p>","protected":false},"excerpt":{"rendered":"<p>The element Menu is responsible for adding navigation to your website, which allows users to easily move through subpages. In your template, we have already added this navigation for you. Add menu item In order to edit a menu, right-click on it and select \u201cEdit content\u201d. To add a link to your menu use the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_eb_attr":"","_eb_data_table":"","footnotes":""},"doc_category":[503],"doc_tag":[],"knowledge_base":[481],"class_list":["post-7825","docs","type-docs","status-publish","hentry","doc_category-content-design","knowledge_base-website-builder"],"year_month":"2026-07","word_count":703,"total_views":"1","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"SiteDu.de","author_nicename":"cyzdk","author_url":"https:\/\/sitedu.de\/en\/account\/cyzdk\/"},"doc_category_info":[{"term_name":"Content &amp; Design","term_url":"https:\/\/sitedu.de\/en\/docs\/website-builder\/content-design\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Website Builder","term_url":"https:\/\/sitedu.de\/en\/docs\/website-builder\/","term_slug":"website-builder"}],"knowledge_base_slug":["website-builder"],"_links":{"self":[{"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/docs\/7825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/comments?post=7825"}],"version-history":[{"count":1,"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/docs\/7825\/revisions"}],"predecessor-version":[{"id":7826,"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/docs\/7825\/revisions\/7826"}],"wp:attachment":[{"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/media?parent=7825"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/doc_category?post=7825"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/doc_tag?post=7825"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/sitedu.de\/en\/wp-json\/wp\/v2\/knowledge_base?post=7825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}