Top Header Settings

This Panel has the options related to the Top Header Layout Settings. Navigate to OSHINE OPTIONS > TOP HEADER LAYOUT on your dashboard to find the options below.

Elements in a Top Header –

The elements of a Top Header are highlighted in the pictures below, which are – Header Style, Menu and Sub Menu, Header Widgets, Top bar and Bottom Bar. The individual options for each of these elements are explained below.

Header Style :

Navigate to OSHINE OPTIONS > TOP HEADER SETTINGS > HEADER STYLE

1. Header Wrap –

a. Wrapped Header
b. Full Width Header

This option is used to control the width of the Header. If you want the header to occupy the Full Screen Width, this option should be turned OFF. If you want the header to be wrapped, this options should be turned ON.

2. Top Header Style –

There are 12 different Top Header Styles available.

 
Menu Settings –
       3. Hamburger Style –

      This option determines the style of the hamburger. There are 6 different hamburger styles available.

      The below options are available if the header style is chosen from style 7 to style 12.

       4. Menu Style –

      There are 10 additional menu styles to enhance the header menu.

5. MENU BAR WIDTH –

This option is to set the width of the menu bar.

6. MENU LINK ANIMATION DIRECTION

This option determines the direction in which the menu link has to appear.

        7. MENU LINK HOVER STYLE

This option determines the hover style of the menu link. There are totally four different style available.

  • Underline
  • Color fill
  • Color fill with underline
  • Tail to the left
       8. MENU VERTICAL ALIGNMENT

This option sets the appearance of the vertical alignment of the menu .This determines whether the menu should appear at the bottom , top or center.

       9. MENU HORIZONTAL ALIGNMENT:

This option sets the appearance of the horizontal alignment of the menu. This determines whether the menu should appear at the bottom , top or center.

      10. STACK BACKGROUND COLOR –

Here you can set the backkground color for Page Stack Top menu style.

      11. Right Slidebar/Overlay Menu Background Color –

a. Top Overlay Menu
       b. Right Sliding Bar

The Background Color of the Right Sliding Menu / Top Overlay Menu can be set up here. The Right Sliding Menu can be enabled as one of the Widgets under the Header Widgets Panel Below.

      12. Right Slidebar/Overlay Menu Border Color –

The Border Color of the Right Sliding Menu / Top Overlay Menu can be set up here.

Submenu Settings :

       13. Submenu Background Color – Click here to preview SubMenu

The Background Color of the Top Bar Submenu can be set up here.

        14. Submenu Border Color –

The Border Color of the Top Bar Submenu can be set up here.

       15. WIDGET AREA

You can add Code Content in here that can be showcased in the Header as Widget. Example – Icons.

       16. Set Navigation Link Hover Color –

You can enable this option to set up a hover color for menu links.

       17. Navigation Link Hover Color –

You can select the menu link hover color here.

 

18. Enable Sticky Header  – Click here to preview Sticky Header

If Sticky Header is enabled, you will be able to see the Header Float along as you scroll the Page down. This is a Global option that will affect all pages. In addition to this, the option to Enable/Disable Sticky Header is available on every page in the Header and Hero Sections Metabox.

19. Semi Transparent Background Color – Click here for Preview

This option to enable Semi Transparent Header is available in each page under the Header and Hero Sections Metabox. The Background Color for the Semi Transparent should be set up here.

20. Header Border Color – Click here for Preview

Set up the Color and Style of the Border that will apply at the bottom of the Top Header

21. Header Border Wrap –

This option is used to control the width of the Header Border. If you want the Border to occupy the Full Screen Width, this option should be turned OFF. If you want the Border to be wrapped, this option should be turned ON.

Header Widgets :

Navigate to OSHINE OPTIONS > TOP HEADER SETTINGS > HEADER WIDGETS

1. Position of widgets in Header –

You can see the various Header Widgets that is available. To place a Widget in the Header, you simply have to drag the respective widget block from the ‘UNUSED’ panel to ‘RIGHT or ‘LEFT’ accordingly.

header_widgets

Note 1 – The instructions on configuring Text 1 , Text 2 and Code Content widgets is given in the following option.

Note 2 – The Widgets will take the Color that is set for the Navigation Text under OSHINE OPTIONS > TYPOGRAPHY > MAIN NAVIGATION MENU.

Note 3 – The Widgets positioned in the LEFT will be automatically hidden when viewed in Mobile Screens. This is to ensure the contents fit in the Small Screen Size.

Text and Code Widget Settings :

header_textcode_widgets

2. Text Area 1 –

You can add Text Content in here that can be showcased in the Header as Widget. Like Email or Phone Number.

3. Text Area 2 –

You can add Text Content in here that can be showcased in the Header as Widget. Like Email or Phone Number.

4. Code Content –

You can add Code Content in here that can be showcased in the Header as Widget. You can add a Shortcode as well. Example – Icon or Button. To paste a Shortcode, you need to Create it in the BE Page Builder in one of your pages, then click on the COPY icon in the Top Right Corner of the Module and Paste (cmd + V or ctrl + V) it here.

Search Widget Settings :
5. Header Search Widget Style –

There are 2 styles available in the theme Bar and Overlay Search.

6. Search Screen BG –

The Background Color of the Search Screen can be set up here. This is effective especially on the Overlay Type Search.

7. Search Text Color –

Text color on the Search Bar/Screen.

Cart Widget Settings – Click here to preview the Cart Widget
8. Header Cart Number Background Color –

The background color that is set here will be applied to the Number of Items in the Cart displayed in the Header Cart Widget.

9. Header Cart Number Text Color

The color that is set here will be applied to the Number of Items in the Cart displayed in the Header Cart Widget.

Header Top Bar :

Navigate to OSHINE OPTIONS > TOP HEADER SETTINGS > HEADER TOP BAR

This is an optional setting. The Top Bar can be used in addition to the Main Header. This is applicable only on Top Header Styles. This bar can be used to placed additional content, secondary menu, widgets etc.

1. Enable Top Bar –

The Bar will be enabled only if the option is checked.

2. Top Bar Background Color –

The Background Color of the Top Bar can be set up here.

3. TopBar Text Color –

The Text Color of the contents in the Top Bar can be set up here.

4. Top Bar Border (bottom) Color –

The Border Color, Style and Thickness for the Top Bar can be set up here. Border will be applied only at the Bottom.

5. Position of widgets in the Top Bar –

You can see the various Header Widgets that are available. To place a Widget in the Header, you simply have to drag the respective widget block from the ‘UNUSED’ panel to ‘RIGHT or ‘LEFT’ accordingly.

Note 1 – The Menu Links should be configured in the Dashboard under APPEARANCES > MENUS. Create a New Menu, add Links and assign it to the location called ‘Topbar Menu’ by checkboxes at the bottom and Save the Menu

Text and Code Widget Settings :

header_textcode_widgets

6. Text Area 1 –

You can add Text Content in here that can be showcased in the Header as Widget. Like Email or Phone Number.

7. Text Area 2 –

You can add Text Content in here that can be showcased in the Header as Widget. Like Email or Phone Number.

8. Code Content

You can add Code Content in here that can be showcased in the Top Bar. You can add a Shortcode as well. Example – Icon or Button. To paste a Shortcode, you need to Create it in the BE Page Builder in one of your pages, then click on the COPY icon in the Top Right Corner of the Module and Paste (cmd + V or ctrl + V) it here.

Header Bottom Bar :

Navigate to OSHINE OPTIONS > TOP HEADER SETTINGS > HEADER BOTTOM BAR

Note – The Bottom bar will appear along with the Main Header only if you have chosen the Header Style as Style 2 under the Header Style Panel.

1. Bottom Bar Background Color –

The Background Color for the Bottom Bar can be set up here .

2. Bottom Bar Border Color –

The Border Color, Style and Thickness for the Bottom Bar can be set up here. Border will be applied at the Top and Bottom.

 

Related Articles

Leave A Comment?

You must be logged in to post a comment.