Nav Bar Mapping

Written By Lynae Of-Howl

In this lesson we are going to:

  • Sketch out a plan for your navigation bar (aka nav. bar)

  • Strip down your site template & give it new bones

  • Add your logo to the site header & adjust header settings

Creating a Roadmap for Copy Writing

Exercise 1: Draft Your Nav. Bar

Grab a pencil and paper, and sketch out a mapping of your nav. bar. You want to keep your main 'categories' concise, avoid have too too many items across the top. Can anything be combined with a shared navigation category? Do these things make sense together or do they need to stand alone?

Examples of Nav. Bars with Dropdown Options

(I also invite you to go surf the web and see how your favorite sites have mapped out their navigation menus.)

Notice how all of the above nav. bars have clear and concise categories for their dropdown menus.

Below, Mud & Miracles, has no dropdown menus because their site offerings are simple enough to each stand alone on their nav. bar.

The Hag School is a nav. bar example where we see a lot of categories in the header, with a lot of dropdown options. That is because they are well-established in their business and following, and offering a lot of programs. However, the categories are still concise in how they group together, taking someone exactly where they need to go.

Adjusting Your Website Navigation Bar

What you should know after this step:

  • Understand the difference between 'Main Pages' and 'Not Linked Pages', and how to add them.

  • Page types: Folders (to create a dropdown menu in your nav. bar), regular pages, blog, store, etc..

  • Page settings: adding a 'social image' for a page, password protect a page, enable or disable a page, add SEO

  • Link types: link to a page on your site, a URL somewhere else on the web, direct to your email address, or to a file you have uploaded

  • How to add a low-maintenance 'coming soon' dropdown to a nav. bar folder category

Resource: Check out a useful SEO writing article for SquareSpace HERE


Action Steps:

  • Strip down your templates sample pages

  • Add in your own pages to create your own unique nav. bar menu

Adjusting Your Website Header + Adding a Logo

What you should know after this step:

  • How to download your logo, with a transparent background, from Canva

  • How to upload your logo to the header

  • How to add a 'mobile specific' logo, if you want that to be different

  • How to adjust header style

  • How to adjust header elements: button links, social icons and cart

  • How to save your design work, then view what you've done in 'full screen mode'

Action Steps:

  • Add your logo to the header

  • Adjust your heading styles and elements as you like them

  • Get comfortable in header settings, saving your work and viewing it in 'full screen mode'

 
Lynae Of-Howl https://ritualcreative.co
Previous

Write & Refine Your Copy
Next

Copy Needs