{"id":6317,"date":"2025-10-24T15:47:11","date_gmt":"2025-10-24T15:47:11","guid":{"rendered":"https:\/\/nmi.cool\/webdev\/?page_id=6317"},"modified":"2025-10-24T16:00:28","modified_gmt":"2025-10-24T16:00:28","slug":"order-off-the-navigation-menu-25f","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/order-off-the-navigation-menu-25f\/","title":{"rendered":"Order off the (navigation) menu"},"content":{"rendered":"\n
\"Menu
Photo by Sunrise Photos.<\/a><\/figcaption><\/figure>\n\n\n\n

WordPress navigation<\/h2>\n\n\n\n

You’ve installed a WordPress site. You’ve added and styled a few pages, and now you decide to visit your site and admire your beautiful work for the first time. But, your beautiful pages, where are they? Don’t those links just automatically appear on your site?<\/p>\n\n\n\n

Well, no. There’s still more work to do! WordPress utilizes a combination of Templates and the Site Editor<\/strong> to help you organize and style your Navigation Menu<\/strong>. Like many WordPress features, the interface takes a little bit of time to get familiar with.<\/p>\n\n\n\n

The first step is to add the appropriate Pages to your Navigation Menu. <\/p>\n\n\n\n

To get started, visit your WordPress site’s dashboard, click “Appearance,” and then “Editor.” You’ll land on the Site Editor’s main menu. Editing your navigation menu starts here.<\/p>\n\n\n\n

\"\"
The Navigation section is your first stop.<\/figcaption><\/figure>\n\n\n\n

Click on Navigation. This brings you to a page that displays your Navigation Menus. The Pages currently in your Navigation Menu will be listed below. <\/p>\n\n\n\n

\"\"
This Menu has four pages \u2013 Home, Shop, Blog, About.<\/figcaption><\/figure>\n\n\n\n

In this section of the Editor, you can change the order of the pages, but to add or remove a page from the menu, you’ll need to click on the three vertical dots next to the Navigation heading and select Edit.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

From here, you can add pages to your menu by clicking on the plus sign, or use the Block Editor in the Settings Panel to add or remove pages, as well as change the order.<\/p>\n\n\n\n

Styling Navigation<\/h2>\n\n\n\n

This is a little trickier. Styling how a navigation menu – alignment, positioning, text display, the works \u2013 requires targeting and editing the Header block. Depending on your theme, you can access the Header by editing a Template that contains the Navigation Menu.<\/p>\n\n\n\n

Target the Header block by using the Document Overview feature (The icon looks like a stair step) to view the Page blocks as a List.<\/p>\n\n\n\n

\"\"
Click on the Document Overview icon at the end of the row.<\/figcaption><\/figure>\n\n\n\n

In List View, you can see how blocks are grouped together to create the content display you see on your site. Click on arrows to expand the collapsed blocks to find any block you want to edit. <\/p>\n\n\n\n

\"\"
Select a Header design to begin customizing it.<\/figcaption><\/figure>\n\n\n\n

Click on Header. In the Block Editor, you’ll see several design options available in your Theme that display a combination of your Site Icon, Site Name, and Navigation. Select one that most closely resembles how you want your Navigation to look. <\/p>\n\n\n\n

\"\"
Select the Navigation block and change the style using the Style Editor.<\/figcaption><\/figure>\n\n\n\n

From there, use List View to target specific blocks that you want to customize using the Block and Style Editors in the Settings Panel. For example, if you want to change your Menu’s font type or font color, click on Navigation and select the Style icon (the duo-toned circle!) to access the Style Editor. <\/p>\n\n\n\n

Once you’re done editing, hit Save. Ta da! You’ve customized your Navigation Menu.<\/p>\n\n\n\n

A word about navigation<\/h2>\n\n\n\n

While this isn’t your first navigation rodeo, it’s worth reiterating the importance of navigation. Arguably, navigation is one of the most important features of your site. It orients users. It’s a map telling users what to expect and how to get there. It tells users where they are on the site at any given time. <\/p>\n\n\n\n

WordPress offers a lot of help using the Site Editor to change Navigation Menus. Check it out for yourself:<\/p>\n\n\n\n

Site Editor Navigation<\/a><\/h3>\n\n\n\n

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

WordPress navigation You’ve installed a WordPress site. You’ve added and styled a few pages, and now you decide to visit your site and admire your beautiful work for the first time. But, your beautiful pages, where are they? Don’t those links just automatically appear on your site? Well, no. There’s still more work to do! […]<\/p>\n","protected":false},"author":24,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6317","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=6317"}],"version-history":[{"count":5,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6317\/revisions"}],"predecessor-version":[{"id":6329,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6317\/revisions\/6329"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=6317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}