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.