Top Bar - Customizer
Default theme settings may differ if you have imported one of the OceanWP prebuilt website templates for WordPress. This is because these templates come with their own Customizer settings. However, the way you use the Customizer to adjust your website remains the same.
The OceanWP Customizer Top Bar panel enables you to enable, style and personalize the Top Bar area on your website.
The Top Bar is a website element displayed above the main header. It can contain a menu, social links and / or custom content, depending on your needs.
Using the Top Bar element on your website is completely optional.
Available Top Bar options include:
- Enable Top Bar,
- Enable Top Bar Full Width,
- Visibility,
- Top Bar Options section:
- General panel,
- Content panel,
- Social Menu panel,
- Typography and Colors section:
- Top Bar Content typography,
- Background color,
- Border color,
- Text color,
- Links color.
Enable Top Bar
The Enable Top Bar option enables you to choose whether or not to display the Top Bar element on your website.
Toggle the button to enable or disable the display of the Top Bar element.
You can manipulate the Top Bar element display on individual page level using the OceanWP (Metabox) Settings.
Enable Top Bar Full Width
The Enable Top Bar Full Width option enables you to display the Top Bar content from edge to edge of the screen.
By default, this option is disabled, and the Top Bar content equals your website's main container width applied in Customize > Site Style & Settings > Content Settings > Main Container Width.
Toggle the button to enable or disable the display of the Top Bar content from edge to edge.
Visibility
The Visibility option enables you to choose responsive display settings for the Top Bar element:
- Show on All Devices: display on desktop, tablet and mobile.
- Hide on Tablet: display on desktop and mobile, but hide on tablet.
- Hide on Mobile: display on desktop and tablet, but hide on mobile.
- Hide on Tablet and Mobile: display on desktop only.
General
The General panel in the Top Bar Options section enables you to choose the position (layout) of elements inside the Top Bar, as well as padding.
The General panel includes the following options:
Elements Positioning
The Elements Positioning enables you to choose the order of elements (layout) inside the Top Bar.
The Elements Positioning available options include:
- Left Content and Right Social: display content on the left, and the social menu on the right side.
- Right Content and Left Social: display the social menu on the left, and content on the right side.
- Centered Content and Social: display content and the social menu in the middle.
Padding (px)
The Padding (px) option enables you to add padding (spacing) to the Top Bar website element.
This option is always measured in pixels (px).
Content
The Content panel in the Top Bar Options section enables you to add content to the Top Bar (text, HTML, shortcodes, etc), or replace default content with a custom template.
The Content panel includes the following options:
- Content,
- Select Template (Custom Content section).
Content
The Content option enables you to add content to your Top Bar.
You can use text, HTML, shortcodes, or a combination of all.
If you don't want to display any content, simply delete the text from the Content box.
Select Template
The Select Template option enables you to choose a custom template created via WP Dashboard, OceanWP > My Library, and use it to replace the default Content option.
When it comes to custom templates (WP Dashboard, OceanWP > My Library), make sure each of the templates made is used once in the Customizer.
To deselect any custom template in the Customizer, simply choose the "Select" option.
Social Menu
The Social Menu panel in the Top Bar Options section enables you to add and style social links in the Top Bar.
The Social Menu panel includes the following options:
- Enable Social Menu,
- Social Menu Options panel,
- Social Links panel,
- Select Template (Custom Social section).
Enable Social Menu
The Enable Social Menu option enables you to choose whether or not you want to display social links in the Top Bar.
Toggle the button to enable or disable the display of the Top Bar social menu.
Social Menu Options
The Social Menu Options panel contains options that determine the behavior of the default Social Menu Links (not a custom template), as well as other personalization options.
The Social Menu Options panel includes the following:
- Links Target:
- New Tab: use this option if you want the social menu link to open in a new browser tab (recommended).
- Same Tab: use this option if you want the social menu link to open in the same browser tab as your website.
- Padding (px): enables you to adjust padding (spacing) between each side of the icon inside the social menu.
- Icon Size (Typography and Colors section): enables you to adjust the size of the Social Menu icons.
- Social Links color (Typography and Colors section): apply regular and hover color to Social Menu icons.
Social Links
The Social Links panel contains multiple options where you can add your social media links (URLs.
To display a social icon, simply add a full URL to a specific profile / page.
Select Template
The Select Template option enables you to choose a custom template created via WP Dashboard, OceanWP > My Library, and use it to replace the default Social Menu links.
When it comes to custom templates (WP Dashboard, OceanWP > My Library), make sure each of the templates made is used once in the Customizer.
To deselect any custom template in the Customizer, simply choose the "Select" option.
Top Bar Content
The Top Bar Content typography option enables you to adjust typography settings for the default Top Bar content (not custom template).
Background
The Background color option enables you to apply a color to the Top Bar background.
Border
The Border color option enables you to apply a color the Top Bar bottom border.
If you don't want to display a border, simply choose the same color as the Top Bar background color.
Text
The Text color option enables you to apply a color to the default Top Bar content (not custom template), as well as the Top Bar menu typography.
With OceanWP, you can assign a dedicated menu to your Top Bar.
Navigate to your WP Dashboard, Appearance > Menus, create a menu and assign it the Top Bar role.
Links
The Links color option enables you to apply a regular and hover color to the links in the Top Bar content, as well as the Top Bar menu links if a menu is displayed.
With OceanWP, you can assign a dedicated menu to your Top Bar.
Navigate to your WP Dashboard, Appearance > Menus, create a menu and assign it the Top Bar role.
This is the text example used in the Top Bar content, containing HTML for adding links:
Your Top Bar content goes here, and <a href="https://oceanwp.org">this is a link</a>
Found an error in this doc or believe it needs improvement?
Send us a prepurchase ticket, include the URL of the page, and add suggestions and more details about how we can make things better for you.
That's it!
Enjoy building your WordPress website with OceanWP!