{"id":1690,"date":"2026-05-31T12:52:02","date_gmt":"2026-05-31T12:52:02","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&p=1690"},"modified":"2026-06-11T15:17:20","modified_gmt":"2026-06-11T15:17:20","password":"","slug":"navigation","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/navigation\/","title":{"rendered":"Navigation"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Application<\/h2>

Determine what the navigation looks like in your theme. The navigation also includes the expanded state when the learner clicks on the menu. This is adopted from the navigation entries and does not need to be set separately.<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Find navigation overview<\/h2>

To customize your navigation, click on the seventh item \u201eNavigation\u201c.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Navigation<\/div>\n
Select Navigation to see more settings.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Backgrounds Overview<\/h2>

In the navigation overview, you will find the settings for position, style, progress, and color. We explain what these settings mean and how to adjust them here in a step-by-step guide.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t
\n \n
\n
\n
\n 1 <\/div>\n
\n
Position<\/div>\n
Decide whether your navigation is placed on the left or at the top.<\/div>\n <\/div>\n <\/div>\n
\n
\n 2 <\/div>\n
\n
Style<\/div>\n
Decide whether your navigation has a Classic or Float style.<\/div>\n <\/div>\n <\/div>\n
\n
\n 3 <\/div>\n
\n
Progress<\/div>\n
Set whether your progress is displayed with lines or areas<\/div>\n <\/div>\n <\/div>\n
\n
\n 4 <\/div>\n
\n
Color<\/div>\n
Choose the color of your navigation. If you need a new color, create a new color in the background settings.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 1 \u2013 Position<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Links<\/h1>

Click on \u201eLeft\u201c to position your navigation on the left.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Up<\/h1>

Click \u201eTop\u201c to position your navigation at the top.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

<\/div>\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 2 \u2013 Style<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Classic - Links<\/h1>

Set the positioning to \u201eLeft\u201c and then to \u201eClassic\u201c so that your navigation gets the classic style and is on the left.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Classic - Top<\/h1>

Set the positioning to \u201eTop\u201c and then to \u201eClassic\u201c so that your navigation adopts the Classic style and is located at the top.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Float - Links<\/h1>

Simply switch the style to \u201eFloat\u201c using the segmented control so that your navigation floats above the content.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Float - Links<\/h1>

Simply change the style to \u201eFloat\u201c using the segmented control so that your navigation floats above the content on the left.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

<\/div>\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 3 \u2013 Progress<\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Linen<\/h1>

Click on \u201eLines\u201c to display progress with lines.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Area<\/h1>

Click \u201eArea\u201c to display progress in area.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

<\/div>\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Step 4 \u2013 Adjust navigation color<\/h2>

Set the color of your navigation. The available colors are all the colors you set under the \u201eBackgrounds\u201c item.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t

Color 1<\/h1>

Click on your first saved background to select the color.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Color 2<\/h1>

Click on your second saved background to select the color.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t

Color 3<\/h1>

Click on a dark background to set the navigation to a dark color.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

<\/div>\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

Anwendung Bestimme, wie die Navigation bei deinem Theme aussieht. Zur Navigation geh\u00f6rt auch der ausgeklappte Zustand, wenn der Lerner auf das Men\u00fc klickt. Dieser wird von den Eingaben der Navigation \u00fcbernommen und muss nicht separat eingestellt werden. Navigation \u00dcbersicht finden Um deine Navigation anzupassen, klicke auf den siebten Punkt \u201eNavigation\u201c. 1 Navigation W\u00e4hle Naviagation aus, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[20],"doc_tag":[],"class_list":["post-1690","docs","type-docs","status-publish","hentry","doc_category-theme-builder"],"year_month":"2026-09","word_count":349,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Theme Builder","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/theme-builder\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=1690"}],"version-history":[{"count":58,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1690\/revisions"}],"predecessor-version":[{"id":3410,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/1690\/revisions\/3410"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=1690"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=1690"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=1690"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}