How do I setup my navigation menu?

pocket_header_background.png

The navigation menu is where public galleries & external links will live for website visitors.  There are some options here so let's get started!

Quick Jump

 

1. Accessing Home Page Navigation Menu

  • Click on the Website link in the left toolbar or Edit portfolio in Launchpad.
  • Find the Home page and click Edit Gallery.

Navigating_Website_Social.jpg

Editing_Home_Header_Social.jpg

  • Hover over the Navigation Menu and click on Edit Menu

Navigation_Edit_Menu.jpg

2. Breaking Down Navigation Menu Style

  • First option under Menu Style is Default vs Custom
    • Default Menu: is the navigation menu that will show up on every page.
    • Custom Menu: is a custom navigation menu for the gallery being edited ONLY!
      • There can be as many custom menus as there are pages/galleries.  Custom menus do not save and will have to be setup each time.

Default_Custom_Menu.jpg

  • Second option under Menu Style is Animated Menu.
  • Animated Menu: Instead of listed links an animated menu will condense the links into an icon.  When the icon is clicked by a user the navigation menu will fly in from the left, right or full page depending on the settings.
  • If Animated Menu is turned on there will be an Animated Styles option.

Turning_On_Animated_Menu.jpg

  • As stated there are three options for an animated menu.  Left flyout, right flyout, and full page flyout.

Animated_Menu_Styles.jpg

  • Below is an example of a full screen flyout.

Full_Screen_Flyout_Animated_Menu.jpg

  • Non Animated menus have a lot of options explained here...
    • Position: There are three options for the position of the Navigation Header.  In this example it's set to Top Position.
    • Text Alignment: Choose from left, middle, or right text alignment.
    • Background Color: This option will set the background color behind the images.
    • Text Spacing: This option will adjust the spacing between the links.
    • Opacity: This option will allow the opacity to be set on the Navigation Menu.
    • Size: This option will adjust the size of the Navigation Menu.
    • Margin: This option will adjust the margin inside the Navigation Menu.  Bringing the content closer to the middle or further out on the edges.
    • Show Home In Menu: Show or hide the home page in the menu links.
    • Show Blog In Menu: Show or hide the blog page in the menu links.

Navigation_Menu_Workspace.jpg

3. Navigation Menu Font

  • Inside of the Edit Menu workspace click on Font to adjust the navigation menu font.
    • Font Style: choose the font style.
    • Font Weight: choose the font weight.
    • Font Size: choose the font size.
    • Font Color: choose the font color.
    • Hover Color: choose the color of the links when someone hovers over them.

Navigation_Menu_Font.jpg

4. Navigation Menu Links

  • Inside of the Edit Menu workspace click on Links to organize or add links to the navigation menu.
    • Reorder: click and drag the links to reorder them in the navigation menu.
    • Add External Links: Add external links to another blog, company or social media site.
    • Rename Links: rename the public facing links from this menu.

Navigation_Menu_Links.jpg

 

5. Sub Menu Navigation Links

  • To make a sub menu the link must be already made.
  • Then drag that link a little to the right and under the Main Menu Link.
  • There will be a little line that indicated it will be a Sub Menu Link displayed in the image below.

Dragged_Sub_Menu_Navigation.jpg

  • Below is what it will look like expanded on the live site.  Simply click on and off to see the link hide and show.

Final_Product_Sub_Menu.jpg

Articles in this section

Was this article helpful?
0 out of 0 found this helpful
Share
  • PRO EDU

    Check out PRO EDU's extensive library of visual arts education and tools to bring you to the next level of PRO

Comments

0 comments

Please sign in to leave a comment.