Skip to content
    Documentation Ocean Pro Theme

    Navigation (Menus)

    Help your visitors find what they're looking for with navigation menus. Manage your menu links and labels here, then go to your template to choose which menu to use in your content.

    Navigation Menus

    Create menus and mega menus easily and without learning any strange codes or labels.

    ocean-mega-menu

    Where menus are created in the HubSpot CMS

    The menus in the HubSpot CMS are separated from the page editor, so in the editor, either in the headers or footers, you will only be able to choose the previously created menus.

    So the first thing is to create all the menus that we will need, although at the beginning we may not have the pages, this menu can be edited since you have created all the pages, this helps you to visually complete the header of your page.


    Steps to create a menu

    Step 1:  Go to HubSpot Navigation
    In that section you will see the menus.

    navigation
    Step 2: Click on Create menu, place the internal name to identify it, example: Main menu, footer menu, etc.

    name_menu

    Step 3: Now add all the necessary items that the menu require.

    If the page does not exist yet, simply click on Actions and select item without link. This can be changed later.

    item-menu

    To add more elements, click on Add menu item and then choose if it goes below or if you want to add child elements to it.

    To add more elements click on Add menu under the last element.
    If you want to add child elements to the services button example, click Actions on the services element and select add child element below.
     
    add-child-menu
    The child elements of a menu item are displayed as follows:
     
    child-menu

    The menu items say No link because the pages are not there yet and it is the way we can view the menu, otherwise if we choose draft pages or empty links the menu item will not be displayed.

    When you already have the pages, you return and in actions you change the type to Page or link as the case may be.

    replace-with-page

    Step 4: Click Publish, each time you apply settings you must click Publish.

    On the left side of the publish button you have the Actions button to rename the internal name of the menu, clone it, discard the recent changes you made, delete it or review the history of published settings.

    actions-publish-menu

    Step 5: Add the other menus if necessary to the footer by clicking on the name of the first one and adding a new menu.

    more-menus

    Step 6: With the menus created, you can add them to the header and footer very easily.

    Select menu in global modules

    With the menus created, you can add them to the header and footer very easily.
     
    To access a global element, simply enter a page created with the Ocean Child Theme and go to the content tab on the left sidebar of the editor, then click on the Ocean Header.
    edit-page
     
    You still click on the Contents tab and choose Ocean Header.
     
    Ocean-Header
     
    You open Menu and choose the previously created Menu, you have the option to move how many child elements can be displayed.