Skip to content
    Documentation Ocean Pro Theme

    Global Header Settings

    Configuring the header in Ocean Pro in HubSpot

    Global Header

    Learn how you can set the global header for your website in Ocean Theme

    header_ocean

    About the Ocean Pro Global Header

    The Ocean Pro header is made up of the custom Ocean Header module, which has multiple customization options.
     
    You don't need to clone any modules for any language or else if you create a child, each child theme you've created will have its own header with the settings you've made.
     

    Ocean Header Settings

    Step 1: To edit the global header it is necessary to access the page editor from any page created with Ocean, click on the Contents tab and Ocean Header.

    edit-page

    The custom Ocean Header module, like all Ocean Pro modules, uses the two CMS Hub tabs, the content tab and the styles tab.

    Ocean Header Content

    The content tab has elements such as text, links, images, videos among other elements, the styles tab contains options for colors, sizes, background images, spaces, borders, gradients, among others, according to each module.

    content-styles
     
     
     
    In Ocean THEME the content options are the following:
     
    content_header

    Layout:

    • Classic: This option is the common one that almost all sites require
    • Mega Menu: This option adds the content block to easily create a mega menu
    • Landing page: The Ocean Header module can be used locally and this configuration is ideal for when used locally.
    • Landing page without menu: Like the previous one, you can choose this option to remove the menu.

    In addition to layout, there are these options:

    • Top Bar: Add links with an icon on the right side.

    • Logo: If your account already has the logo configured here, it will appear, but you can change it in case the background of the header is a dark color.

      • There are two fields: full color logo or white logo.

    • Menu: Choose the menu and the number of visible child elements.

    • Mega Menu: Add a mega menu to a parent menu item that has child items.
    • Search: The search button and quick links, you can decide not to show the search button or the quick links. You have in configuration several key elements that you need for the search engine.

    • Button: You can add a button or call to action

    • Language switcher: In the same way you can decide that the language selector is in the header or hide it if you consider that it is not necessary.

    In the style tab you can change the style of the visible elements.

    Ocean Header Styles

    Important: The settings you make here will override the ones you have configured in Theme Configuration in the More settings > Ocean Header section

    style_header

    The options in style change the look, for example in Layout you can choose how wide you want the header to be, you want it to be full or in a reduced size.

    layout_header

    You can always preview your settings before publishing them.

    Header Classic

    menu_01

    Header Top Bar

    menu_top_bar

    Header no buttonmenu_center_no_button

    Header Menu no transparent

    menu_no_transparent

    Header mega menu max width

    mega_menu_fit

    Header mega menu full width

    mega_menu_full

    Header glassmorphism

    mega_menu_glass

    Header Quicklinks

    quicklinks_search

    Anything you would like us to add, feel free to let me know.