  {"id":872,"date":"2023-11-01T15:29:29","date_gmt":"2023-11-01T19:29:29","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=872"},"modified":"2024-09-18T20:31:29","modified_gmt":"2024-09-19T00:31:29","slug":"site-navigation","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-3-organizing-your-website\/site-navigation\/","title":{"rendered":"Site Navigation"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Site Navigation\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Module 3.1 \u2013 Advanced: Site Organization: Site Navigation<\/p>\n\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#step-by-step\" class=\"font-medium hover:underline\">\n                        Step-By-Step\n                    <\/a>\n                <\/div>\n\n                                        <div class=\"space-y-1\">\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.1\n                    <\/span>\n\n                    <a href=\"#add-a-page-to-your-menu\" class=\"font-medium hover:underline\">\n                        Add a page to your menu\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.2\n                    <\/span>\n\n                    <a href=\"#arrange-menu-items\" class=\"font-medium hover:underline\">\n                        Arrange menu items\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.3\n                    <\/span>\n\n                    <a href=\"#rename\" class=\"font-medium hover:underline\">\n                        Rename a navigation item\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.4\n                    <\/span>\n\n                    <a href=\"#remove-a-page-from-the-navigation-menu\" class=\"font-medium hover:underline\">\n                        Remove a page from the navigation menu\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#video-tutorial\" class=\"font-medium hover:underline\">\n                        Video Tutorial\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#try-it-out\" class=\"font-medium hover:underline\">\n                        Try it Out!\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<p>The navigation menu is an essential element of your site. A good menu allows users to navigate through your website easily enabling them to find important information quickly.<\/p>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-By-Step<\/h2>\n\n\n\n<h3 id=\"add-a-page-to-your-menu\" class=\"wp-block-heading\">Add a page to your menu<\/h3>\n\n\n\n<p>1. From the Main Navigation Panel, hover over&nbsp;<strong>Appearance<\/strong>&nbsp;and click&nbsp;<strong>Menus<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"295\" height=\"101\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-02-at-09.59.08.png\" alt=\"Add a menu item\" class=\"wp-image-893\" style=\"aspect-ratio:2.9207920792079207;width:271px;height:auto\"\/><\/figure>\n\n\n\n<p>2. On the left-hand side of your screen, you will see a list of pages on your site.<\/p>\n\n\n\n<p>Check off the page(s) you would like to add to the menu. You can find your pages using&nbsp;<strong>Most Recent<\/strong>,&nbsp;<strong>View All,<\/strong>&nbsp;or&nbsp;<strong>Search<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"265\" height=\"360\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-02-at-10.02.42.png\" alt=\"Menu screenshot\" class=\"wp-image-895\" style=\"aspect-ratio:0.7361111111111112;width:243px;height:auto\"\/><\/figure>\n\n\n\n<p>3. Click&nbsp;<strong>Add to Menu.&nbsp;<\/strong>The added page(s) will appear at the bottom of the list.<\/p>\n\n\n\n<h3 id=\"arrange-menu-items\" class=\"wp-block-heading\">Arrange menu items<\/h3>\n\n\n\n<p>1. Drag and drop a menu item to move it up or down the navigation<\/p>\n\n\n\n<p>2. To make a page a sub-item (or <em class=\"myprefix-text-italic\">child<\/em>) of the page above it, indent the child page by dragging it to the right. You can display up to three levels in the menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"141\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-02-at-10.05.34.png\" alt=\"Arranging Menu Items\" class=\"wp-image-896\" style=\"aspect-ratio:2.971631205673759;object-fit:contain;width:434px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-02-at-10.05.34.png 419w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-02-at-10.05.34-320x108.png 320w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/figure>\n\n\n\n<p>3. Click&nbsp;<strong>Save Menu<\/strong>&nbsp;to save your changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"rename\">Rename a navigation item<\/h3>\n\n\n\n<p> By default, the navigation label is the name of the page. However, there may be times you&#8217;d like to change it to something shorter.<\/p>\n\n\n\n<p>1. Scroll down to the menu item you wish to remove and click the arrow beside it to open the menu item settings.<\/p>\n\n\n\n<p>2. Click in the text box underneath the <strong class=\"myprefix-text-bold\">Navigation Label<\/strong>. Type in a new name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"488\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-18-at-10.42.05@2x.png\" alt=\"Changing navigation label\" class=\"wp-image-2175\" style=\"width:399px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-18-at-10.42.05@2x.png 850w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-18-at-10.42.05@2x-320x184.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-18-at-10.42.05@2x-512x294.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-18-at-10.42.05@2x-768x441.png 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n<p>3. Click&nbsp;<strong>Save Menu<\/strong>&nbsp;to save your changes.<\/p>\n\n\n\n<h3 id=\"remove-a-page-from-the-navigation-menu\" class=\"wp-block-heading\">Remove a page from the navigation menu<\/h3>\n\n\n\n<p>1. Scroll down to the menu item you wish to remove and click the arrow beside it to open the menu item settings.<\/p>\n\n\n\n<p>2. Click&nbsp;<strong>Remove<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"385\" height=\"239\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-02-at-10.12.55.png\" alt=\"Remove menu item\" class=\"wp-image-899\" style=\"aspect-ratio:1.610878661087866;width:384px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-02-at-10.12.55.png 385w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-02-at-10.12.55-320x199.png 320w\" sizes=\"auto, (max-width: 385px) 100vw, 385px\" \/><\/figure>\n\n\n\n<p>3. Click&nbsp;<strong>Save Menu<\/strong>&nbsp;to save your changes.<\/p>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/rbxPbPYTJ1Q\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/div>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-site-navigation\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript &#8211; Site Navigation\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-site-navigation\">\n            \n\n<p>Hello and welcome to module 3 of our advanced cuTheme training series. This video is all about site navigation and creating your menu.<\/p>\n\n\n\n<p>Having an intuitive menu is important because it allows all of your users to navigate across your website and easily find important information.<\/p>\n\n\n\n<p>To set up your menu, log into your site, and in the backend, hover over Appearance over here at the left and then click&nbsp;<strong>Menus<\/strong>.<\/p>\n\n\n\n<p>Here you will see your website\u2019s entire menu structure over here at the right. Note that if it\u2019s a brand-new site, there will be nothing over here yet on the left-hand side of the screen.<\/p>\n\n\n\n<p>You\u2019ll see your options for content that you can add to the menu. Check off the pages that you want to add to the menu. We\u2019ll add a couple here. And you can view them by most recent (most recently created) all of your pages, or you can search for a particular page. Which is very handy if you have a large site with a number of pages.<\/p>\n\n\n\n<p>Once you check off the pages you want to add to the menu, click&nbsp;<strong>Add to Menu<\/strong>&nbsp;here on the right, and by default, they\u2019ll be added to the very bottom of your menu. To move an item up and down, simply drag and drop it to wherever you would like it to go within your menu. You can also make one item a sub-menu item of another by dragging it over to the right. Now this wide image block is a sub-item of our block library. You can go three levels deep in the menu on cuTheme.<\/p>\n\n\n\n<p>Clicking on the arrow will expand your options and give you the choice to change your navigation label. By default, this will be the name of your page. But it\u2019s often handy to shorten that if you want to keep your menu nice, simple and clear.<\/p>\n\n\n\n<p>To remove an item, simply click&nbsp;<strong>Remove<\/strong>&nbsp;down here at the left. And then don\u2019t forget once you have made your changes to click&nbsp;<strong>Save Menu.<\/strong>&nbsp;&nbsp;<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out!<\/h2>\n\n\n\n<p>Now that you have learned how to set up your site navigation, time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a new page to your menu.<\/li>\n\n\n\n<li>Change the order of your items.<\/li>\n\n\n\n<li>Change the hierarchy of your menu so that it has at least one main menu item, one second-level item, and one third-level item.<\/li>\n\n\n\n<li>Shorten the navigation label for one of your menu items.<\/li>\n\n\n\n<li>Delete an item from your menu.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-3-organizing-your-website\/best-practices\/\">Next: Menu Best Practices<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The navigation menu is an essential element of your site. A good menu allows users to navigate through your website easily enabling them to find important information quickly. Step-By-Step Add a page to your menu 1. From the Main Navigation Panel, hover over&nbsp;Appearance&nbsp;and click&nbsp;Menus. 2. On the left-hand side of your screen, you will see [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":530,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[11],"class_list":["post-872","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=872"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/872\/revisions"}],"predecessor-version":[{"id":4294,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/872\/revisions\/4294"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/530"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=872"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}