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. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add menu item</h2>In order to edit a menu, right-click on it and select “Edit content”. To add a link to your menu use the “Add button” field. Change the tab to “Linked to”. In the “Page name” field enter a name that will be displayed as a new Menu item. The “Link to” field allows you to choose a link type you would like to create: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Do Nothing: 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><li value="2" class="PlaygroundEditorTheme__listItem">Go to a page: Creates a menu element which after clicking transfers users to a certain subpage on your website.</li><li value="3" class="PlaygroundEditorTheme__listItem">Scroll page to selected object: 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 “go to object on page”, choose subpage and element on it. If you don'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><li value="4" class="PlaygroundEditorTheme__listItem">Go to an article: Creates a menu element which after clicking transfers users to a certain newspage on your website.</li><li value="5" class="PlaygroundEditorTheme__listItem">Other: Creates a customized menu element such as:</li><li value="6" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL address: a menu element which after clicking transfers users to a website of your choice. Type the URL address in the “Website address” section and decide whether it should open in a new browser window.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number: runs default calling application like Skype on users' computer or automatically dials mobile phone number of your choice on users' phone.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send E-Mail: opens default mailbox application like Mailbox (Windows 10) on user's computer or Gmail on user's mobile phone and automatically puts a recipient e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">View or download file: Allows the user to download an image or a file of your choice.</li></ul></li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Remove Page from Menu</h2>1. In order to remove a subpage from the menu, click the “edit” button. 2. Then click the “remove” button. Done, subpage removed. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Change Pages' order in Menu</h2>To change pages' order, just drag it and place it where you want it in your menu. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add subpages to Menu</h2>In order to add elements to the second level of menu, sort the elements' list and place it “under” the first level button. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Advanced Mode</h2>In advanced mode, you have more options for your menu. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu type: horizontal/vertical/mobile</h3>To change menu type in the website builder, select in the element edition panel “Menu type” and choose amongst horizontal, vertical and mobile. The direction of menu rollout you may select in the “Submenu” tab. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu style</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change the Menu button style</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Normal State — 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's style and its content. </li><li value="2" class="PlaygroundEditorTheme__listItem">State: Hover — to change the style of a single menu button when a user hovers over it, select in the Settings panel “State: Hover” and adjust the button's style and content accordingly.</li><li value="3" class="PlaygroundEditorTheme__listItem">State active — a state of the linked subpage which is currently open. In order to edit this state, select in the Settings panel “State: Active” and adjust style and content.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Make one menu button look different from others</h3>If you want one menu button to look different from others, double-click on it and in the Settings panel select “Same button design” and untick a “Use default level style” box. From now on, every change made to this button will not cause the changes in the other buttons (in style or content).

Learn how to edit your menu in SiteDu.de builder

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 “Edit content”. To add a link to your menu use the “Add button” field. Change the tab to “Linked to”. In the “Page name” field enter a name that will be displayed as a new Menu item. The “Link to” field allows you to choose a link type you would like to create:

* ****Do Nothing****: 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.
* ****Go to a page****: Creates a menu element which after clicking transfers users to a certain subpage on your website.
* ****Scroll page to selected object:**** 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 “go to object on page”, choose subpage and element on it. If you don'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).
* ****Go to an article:**** Creates a menu element which after clicking transfers users to a certain newspage on your website.
* ****Other****: Creates a customized menu element such as:
* * ****URL address****: a menu element which after clicking transfers users to a website of your choice. Type the URL address in the “Website address” section and decide whether it should open in a new browser window.
  * ****Call phone number****: runs default calling application like Skype on users' computer or automatically dials mobile phone number of your choice on users' phone.
  * ****Send E-Mail:**** opens default mailbox application like Mailbox (Windows 10) on user's computer or Gmail on user's mobile phone and automatically puts a recipient e-mail address of your choice.
  * ****View or download file:****Allows the user to download an image or a file of your choice.

## Remove Page from Menu

1\. In order to remove a subpage from the menu, click the “edit” button.

2\. Then click the “remove” button. Done, subpage removed.

## Change Pages' order in Menu

To change pages' order, just drag it and place it where you want it in your menu.

## Add subpages to Menu

In order to add elements to the second level of menu, sort the elements' list and place it “under” the first level button.

">

## Advanced Mode

In advanced mode, you have more options for your menu.

### Change Menu type: horizontal/vertical/mobile

To change menu type in the website builder, select in the element edition panel “Menu type” and choose amongst horizontal, vertical and mobile. The direction of menu rollout you may select in the “Submenu” tab.

### Change Menu style

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.

### Change the Menu button style

* ****Normal State**** — 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's style and its content.
* ****State: Hover**** — to change the style of a single menu button when a user hovers over it, select in the Settings panel “State: Hover” and adjust the button's style and content accordingly.
* ****State active**** — a state of the linked subpage which is currently open. In order to edit this state, select in the Settings panel “State: Active” and adjust style and content.

### Make one menu button look different from others

If you want one menu button to look different from others, double-click on it and in the Settings panel select “Same button design” and untick a “Use default level style” box.

From now on, every change made to this button will not cause the changes in the other buttons (in style or content).

<h1 class="PlaygroundEditorTheme__h1" dir="ltr">How to edit your Menu in SiteDu.de builder</h1><div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div>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. In order to edit a menu, right-click on it and select “Edit content”. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add menu item</h2>To add a link to your menu use the “Add button” field. Change the tab to “Linked to”. In the “Page name” field enter a name that will be displayed as a new Menu item. The “Link to” field allows you to choose a link type you would like to create: <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Do Nothing</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Go to a page</h3>Creates a menu element which after clicking transfers users to a certain subpage on your website. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Scroll page to selected Object</h3>Creates a menu element, which after clicking transfers users to a certain element on the chosen page. Select “go to object on page”, choose subpage and element on it. If you don't know a name of the selected element, click on it and read its name from layers panel (the element shows up in green color). <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Go to an article</h3>Creates a menu element which after clicking transfers users to a certain newspage on your website. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Other</h3>Creates a customized menu element such as:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL address: a menu element which after clicking transfers users to a website of your choice. Type the URL address in the “Website address” section and decide whether it should open in a new browser window.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number: runs default calling application like Skype on users' computer or automatically dials mobile phone number of your choice on users' phone.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send E-Mail: opens default mailbox application like Mailbox (Windows 10) on user's computer or Gmail on user's mobile phone and automatically puts a recipient e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">View or download file: Allows the user to download an image or a file of your choice.</li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add subpages to Menu</h2>To add a subpage to your menu, move it from the right window where you can see all the subpages to the middle window where you will see all the subpages already included in the selected menu. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Remove subpage from Menu</h3>1. In order to remove a subpage from menu click the “edit” button. 2. Then click the “remove” button. Done, subpage removed. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change subpages' order in Menu</h3>To change subpages' order, just drag a subpage from the middle window and place it where you want it in your menu. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Build a two-level menu</h3>In order to add elements to the second level of menu, sort the elements' list and place it “under” the first level button. Change the Menu button label To change the button label in Menu, enter the Menu editor and click “edit” next to the selected subpage. Then in the “Name” window enter a name you want to see on the Menu button and click “Save”. In the Menu Button Info tab you can also set whether you want the link to open in the same tab or in a new one after clicking on it. You may see the original title of the website to which the button leads to here. Menu settingsIn elements' edition panel select “Menu settings” to see additional features. Add webpages - each new subpage added to your website will be automatically added to menu. If you don't want any subpages to be automatically added to menu, untick the box. Spacing - set spaces in pixels between menu buttons. Menu type horizontal/vertical/mobile - set menu type: horizontal, vertical and mobile. Read a detailed guide on how to create a mobile/hamburger menu. Submenu - choose in which direction menu should roll out (top/bottom/auto). Menu alignment - here you can set the Menu alignment. Change Menu styleChange Menu type: horizontal/vertical/mobileTo change menu type in WebWave website builder, select in the element edition panel “Menu type” and choose amongst horizontal, vertical and mobile. The direction of menu rollout you may select in the “Submenu” tab. Change Menu styleIn 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. Change the Menu button styleNormal State - 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's style and its content. State: Hover - to change a style of a single menu button when a user hovers over it, select in the Settings panel “State: Hover” and adjust button's style and content accordingly. State active - a state of the linked subpage which is currently open. In order to edit this state, select in the Settings panel “State: Active” and adjust style and content. One menu button looks different than othersIf you want one menu button to look different than others, double click on it and in the Settings panel select “Same button design” and untick a “Use default level style” box. From now on, every change made to this button will not cause the changes in the other buttons (in style or content).

How to edit your Menu in SiteDu.de builder

<h1 class="PlaygroundEditorTheme__h1" dir="ltr">How to edit your Menu in SiteDu.de builder</h1><div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div>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. In order to edit a menu, right-click on it and select “Edit content”. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add menu item</h2>To add a link to your menu use the “Add button” field. Change the tab to “Linked to”. In the “Page name” field enter a name that will be displayed as a new Menu item. The “Link to” field allows you to choose a link type you would like to create: <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Do Nothing</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Go to a page</h3>Creates a menu element which after clicking transfers users to a certain subpage on your website. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Scroll page to selected Object</h3>Creates a menu element, which after clicking transfers users to a certain element on the chosen page. Select “go to object on page”, choose subpage and element on it. If you don't know a name of the selected element, click on it and read its name from layers panel (the element shows up in green color). <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Go to an article</h3>Creates a menu element which after clicking transfers users to a certain newspage on your website. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Other</h3>Creates a customized menu element such as:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL address: a menu element which after clicking transfers users to a website of your choice. Type the URL address in the “Website address” section and decide whether it should open in a new browser window.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number: runs default calling application like Skype on users' computer or automatically dials mobile phone number of your choice on users' phone.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send E-Mail: opens default mailbox application like Mailbox (Windows 10) on user's computer or Gmail on user's mobile phone and automatically puts a recipient e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">View or download file: Allows the user to download an image or a file of your choice.</li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Remove PAge from Menu</h2>1. In order to remove a subpage from menu click the “edit” button. 2. Then click the “remove” button. Done, subpage removed. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Pages' order in Menu</h3>To change pages' order, just drag it and place it where you want it in your menu. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add subpages to Menu</h2>In order to add elements to the second level of menu, sort the elements' list and place it “under” the first level button. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Advanced Mode</h2>In the advanced mode, you have more options for your menu. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu type: horizontal/vertical/mobile</h3>To change menu type in the website builder, select in the element edition panel “Menu type” and choose amongst horizontal, vertical and mobile. The direction of menu rollout you may select in the “Submenu” tab. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu style</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change the Menu button style</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Normal State — 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's style and its content. </li><li value="2" class="PlaygroundEditorTheme__listItem">State: Hover — to change the style of a single menu button when a user hovers over it, select in the Settings panel “State: Hover” and adjust the button's style and content accordingly.</li><li value="3" class="PlaygroundEditorTheme__listItem">State active — a state of the linked subpage which is currently open. In order to edit this state, select in the Settings panel “State: Active” and adjust style and content.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Make one menu button look different from others</h3>If you want one menu button to look different from others, double-click on it and in the Settings panel select “Same button design” and untick a “Use default level style” box. From now on, every change made to this button will not cause the changes in the other buttons (in style or content).

<h1 class="PlaygroundEditorTheme__h1" dir="ltr">How to edit your Menu in SiteDu.de builder</h1><div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div>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. In order to edit a menu, right-click on it and select “Edit content”. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add menu item</h2>To add a link to your menu use the “Add button” field. Change the tab to “Linked to”. In the “Page name” field enter a name that will be displayed as a new Menu item. The “Link to” field allows you to choose a link type you would like to create: <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Do Nothing</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Go to a page</h3>Creates a menu element which after clicking transfers users to a certain subpage on your website. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Scroll page to selected Object</h3>Creates a menu element, which after clicking transfers users to a certain element on the chosen page. Select “go to object on page”, choose subpage and element on it. If you don't know a name of the selected element, click on it and read its name from layers panel (the element shows up in green color). <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Go to an article</h3>Creates a menu element which after clicking transfers users to a certain newspage on your website. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Other</h3>Creates a customized menu element such as:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL address: a menu element which after clicking transfers users to a website of your choice. Type the URL address in the “Website address” section and decide whether it should open in a new browser window.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number: runs default calling application like Skype on users' computer or automatically dials mobile phone number of your choice on users' phone.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send E-Mail: opens default mailbox application like Mailbox (Windows 10) on user's computer or Gmail on user's mobile phone and automatically puts a recipient e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">View or download file: Allows the user to download an image or a file of your choice.</li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Remove PAge from Menu</h2>1. In order to remove a subpage from menu click the “edit” button. 2. Then click the “remove” button. Done, subpage removed. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Pages' order in Menu</h3>To change pages' order, just drag it and place it where you want it in your menu. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add subpages to Menu</h2>In order to add elements to the second level of menu, sort the elements' list and place it “under” the first level button. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Advanced Mode</h2>In the advanced mode, you have more options for your menu. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu type: horizontal/vertical/mobile</h3>To change menu type in the website builder, select in the element edition panel “Menu type” and choose amongst horizontal, vertical and mobile. The direction of menu rollout you may select in the “Submenu” tab. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu style</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change the Menu button style</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Normal State — 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's style and its content. </li><li value="2" class="PlaygroundEditorTheme__listItem">State: Hover — to change the style of a single menu button when a user hovers over it, select in the Settings panel “State: Hover” and adjust the button's style and content accordingly.</li><li value="3" class="PlaygroundEditorTheme__listItem">State active — a state of the linked subpage which is currently open. In order to edit this state, select in the Settings panel “State: Active” and adjust style and content.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Make one menu button look different from others</h3>If you want one menu button to look different from others, double-click on it and in the Settings panel select “Same button design” and untick a “Use default level style” box. From now on, every change made to this button will not cause the changes in the other buttons (in style or content).

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. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add menu item</h2>In order to edit a menu, right-click on it and select “Edit content”. To add a link to your menu use the “Add button” field. Change the tab to “Linked to”. In the “Page name” field enter a name that will be displayed as a new Menu item. The “Link to” field allows you to choose a link type you would like to create: <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Do Nothing</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Go to a page</h3>Creates a menu element which after clicking transfers users to a certain subpage on your website. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Scroll page to selected Object</h3>Creates a menu element, which after clicking transfers users to a certain element on the chosen page. Select “go to object on page”, choose subpage and element on it. If you don't know a name of the selected element, click on it and read its name from layers panel (the element shows up in green color). <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Go to an article</h3>Creates a menu element which after clicking transfers users to a certain newspage on your website. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Other</h3>Creates a customized menu element such as:<ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL address: a menu element which after clicking transfers users to a website of your choice. Type the URL address in the “Website address” section and decide whether it should open in a new browser window.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number: runs default calling application like Skype on users' computer or automatically dials mobile phone number of your choice on users' phone.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send E-Mail: opens default mailbox application like Mailbox (Windows 10) on user's computer or Gmail on user's mobile phone and automatically puts a recipient e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">View or download file: Allows the user to download an image or a file of your choice.</li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Remove PAge from Menu</h2>1. In order to remove a subpage from menu click the “edit” button. 2. Then click the “remove” button. Done, subpage removed. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Pages' order in Menu</h3>To change pages' order, just drag it and place it where you want it in your menu. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add subpages to Menu</h2>In order to add elements to the second level of menu, sort the elements' list and place it “under” the first level button. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Advanced Mode</h2>In the advanced mode, you have more options for your menu. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu type: horizontal/vertical/mobile</h3>To change menu type in the website builder, select in the element edition panel “Menu type” and choose amongst horizontal, vertical and mobile. The direction of menu rollout you may select in the “Submenu” tab. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu style</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change the Menu button style</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Normal State — 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's style and its content. </li><li value="2" class="PlaygroundEditorTheme__listItem">State: Hover — to change the style of a single menu button when a user hovers over it, select in the Settings panel “State: Hover” and adjust the button's style and content accordingly.</li><li value="3" class="PlaygroundEditorTheme__listItem">State active — a state of the linked subpage which is currently open. In order to edit this state, select in the Settings panel “State: Active” and adjust style and content.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Make one menu button look different from others</h3>If you want one menu button to look different from others, double-click on it and in the Settings panel select “Same button design” and untick a “Use default level style” box. From now on, every change made to this button will not cause the changes in the other buttons (in style or content).

How to edit your Menu in the SiteDu.de builder

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. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/5J977ornBWwOKZ5f0kBl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add menu item</h2>In order to edit a menu, right-click on it and select “Edit content”. To add a link to your menu use the “Add button” field. Change the tab to “Linked to”. In the “Page name” field enter a name that will be displayed as a new Menu item. The “Link to” field allows you to choose a link type you would like to create: <ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Do Nothing: 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><li value="2" class="PlaygroundEditorTheme__listItem">Go to a page: Creates a menu element which after clicking transfers users to a certain subpage on your website.</li><li value="3" class="PlaygroundEditorTheme__listItem">Scroll page to selected object: 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 “go to object on page”, choose subpage and element on it. If you don'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><li value="4" class="PlaygroundEditorTheme__listItem">Go to an article: Creates a menu element which after clicking transfers users to a certain newspage on your website.</li><li value="5" class="PlaygroundEditorTheme__listItem">Other: Creates a customized menu element such as:</li><li value="6" class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__nestedListItem"><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">URL address: a menu element which after clicking transfers users to a website of your choice. Type the URL address in the “Website address” section and decide whether it should open in a new browser window.</li><li value="2" class="PlaygroundEditorTheme__listItem">Call phone number: runs default calling application like Skype on users' computer or automatically dials mobile phone number of your choice on users' phone.</li><li value="3" class="PlaygroundEditorTheme__listItem">Send E-Mail: opens default mailbox application like Mailbox (Windows 10) on user's computer or Gmail on user's mobile phone and automatically puts a recipient e-mail address of your choice.</li><li value="4" class="PlaygroundEditorTheme__listItem">View or download file: Allows the user to download an image or a file of your choice.</li></ul></li></ul> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Remove PAge from Menu</h2>1. In order to remove a subpage from menu click the “edit” button. 2. Then click the “remove” button. Done, subpage removed. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Pages' order in Menu</h3>To change pages' order, just drag it and place it where you want it in your menu. <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Add subpages to Menu</h2>In order to add elements to the second level of menu, sort the elements' list and place it “under” the first level button. <div data-lexical-embed-block="<div style=&quot;position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);&quot;><iframe src=&quot;https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1&quot; allowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0px; position: absolute; inset: 0px;&quot;></iframe></div>"><div style="position: relative; width: 100%; height: 0px; overflow: hidden; padding-bottom: min(45.1%, 95vh);"><iframe src="https://media.textdude.de/embed/recordings/XQQFI1FA9bF7vrPSVEjl?onlyRecording=1" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" width="100%" height="100%" frameborder="0" style="border: 0px; position: absolute; inset: 0px;"></iframe></div></div> <h2 class="PlaygroundEditorTheme__h2" dir="ltr">Advanced Mode</h2>In the advanced mode, you have more options for your menu. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu type: horizontal/vertical/mobile</h3>To change menu type in the website builder, select in the element edition panel “Menu type” and choose amongst horizontal, vertical and mobile. The direction of menu rollout you may select in the “Submenu” tab. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change Menu style</h3>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. <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Change the Menu button style</h3><ul class="PlaygroundEditorTheme__ul"><li value="1" class="PlaygroundEditorTheme__listItem">Normal State — 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's style and its content. </li><li value="2" class="PlaygroundEditorTheme__listItem">State: Hover — to change the style of a single menu button when a user hovers over it, select in the Settings panel “State: Hover” and adjust the button's style and content accordingly.</li><li value="3" class="PlaygroundEditorTheme__listItem">State active — a state of the linked subpage which is currently open. In order to edit this state, select in the Settings panel “State: Active” and adjust style and content.</li></ul> <h3 class="PlaygroundEditorTheme__h3" dir="ltr">Make one menu button look different from others</h3>If you want one menu button to look different from others, double-click on it and in the Settings panel select “Same button design” and untick a “Use default level style” box. From now on, every change made to this button will not cause the changes in the other buttons (in style or content).

Got a builder package? Learn how to use it and how to edit your content

Was this article helpful?