Close

Account

Documentation

Forum

Menu

Header Option

On JNews : Header Option, there are several section options that you will find:

  1. Header – Layout Tipe
  2. Header – Additional Setting
  3. Header – Logo
  4. Header – Top Bar Setting
  5. Header – Top Bar Style
  6. Header – Menu Setting
  7. Header – Menu Sytle
  8. Header – Mega Menu Style
  9. Heaedr – Search Style

Info

If you’re not familiar with JNews Customizer yet, you might need to check our Customizer Overview.

 

1. Header – Layout Tipe


In this part, you can choose header layout for your website.

  • Header Layout
    Choose a desired layout for header. We provide 7 kinds of header for the best website’s look.

 

2. Header – Additional Setting


In this part, you can setup additional settings for the header. Each header layout will have different additional setting. It means that when you change the header layout type, Header – Additional Setting will also change into related header layout.

Header 1 – Additional Setting

These options below will appear if you’re using Header Layout – Style 1.

  1. Show Header Top Bar
    Turn off this option to hide top bar on the header.
  2. Logo Spacing
    Adjust logo spacing. You can also use px/em (spacing unit).
  3. Middle Bar Background Color
    Set background color of the middle bar.
  4. Middle Bar Background Image
    Set image background of the middle bar.
  5. Background Repeat
    Set background repeat of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  6. Background Position
    Set background position of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  7. Attachment background
    Set background attachment of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  8. Background Size
    Set background size of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.

 

Header 2 – Additional Setting

These options below will appear if you’re using Header Layout – Style 2.

  1. Show Header Top Bar
    Turn off this option to hide top bar on the header.
  2. Logo Spacing
    Adjust logo spacing. You can also use px/em (spacing unit).
  3. Middle Bar Background Color
    Set background color of the middle bar.
  4. Middle Bar Background Image
    Set image background of the middle bar.
  5. Background Repeat
    Set background repeat of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  6. Background Position
    Set background position of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  7. Attachment background
    Set background attachment of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  8. Background Size
    Set background size of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.

 

Header 3 – Additional Setting

These options below will appear if you’re using Header Layout – Style 3.

  1. Show Header Top Bar
    Turn off this option to hide top bar on the header.
  2. Logo Spacing
    Adjust logo spacing. You can also use px/em (spacing unit).
  3. Menu Height
    Set height of the menu.

 

Header 4 – Additional Setting

These options below will appear if you’re using Header Layout – Style 4.

  • Logo Spacing
    Adjust logo spacing. You can also use px/em (spacing unit).

 

Header 5 – Additional Setting

These options below will appear if you’re using Header Layout – Style 5.

  1. Show Header Top Bar
    Turn off this option to hide top bar on the header.
  2. Logo Spacing
    Adjust logo spacing. You can also use px/em (spacing unit).
  3. Middle Bar Background Color
    Set background color of middle bar.
  4. Middle Bar Background Image
    Set background color of the middle bar.
  5. Background Repeat
    Set background repeat of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  6. Background Position
    Set background position of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  7. Attachment background
    Set background attachment of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  8. Background Size
    Set background size of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.

 

Header 6 – Additional Setting

These options below will appear if you’re using Header Layout – Style 6.

  1. Show Header Top Bar
    Turn off this option to hide top bar on the header.
  2. Logo Spacing
    Adjust logo spacing. You can also use px/em (spacing unit).
  3. Show Middle Bar Social
    Turn on this option to show social icon on the middle bar.
  4. Show Middle Bar Cart
    Turn on this option to show cart button on the middle bar. Please note, this option will appear and work if you’re using WooCommerce plugin.
  5. Show Middle Bar Account Button
    Turn on this option to show account button on the middle bar.
  6. Social Style
    Choose social style. Please note, this option will appear and work if you enable Show Middle Bar Social option on above.
  7. Middle Bar Background Color
    Set background color of the middle bar.
  8. Middle Bar Background Image
    Set image background of the middle bar.
  9. Background Repeat
    Set background repeat of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  10. Background Position
    Set background position of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  11. Attachment background
    Set background attachment of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  12. Background Size
    Set background size of the middle bar. Please note, this option will appear and work if you set Middle Bar Background Image option on above.
  13. Middle Bar Text Color
    Set text color of the middle bar.
  14. Cart Border Color
    Set border color of the cart.
  15. Submenu Arrow Icon Color
    Set color of arrow icon on submenu.
  16. Submenu Background
    Set background color of the submenu.
  17. Submenu Text Color
    Set text color of the submenu.
  18. Submenu Border Color
    Set border color of the submenu.
  19. Submenu Hover Background Color
    Set hover background color of the submenu.

 

Header 7 – Additional Setting

These options below will appear if you’re using Header Layout – Style 7.

  1. Show Header Top Bar
    Turn off this option to hide top bar on the header.
  2. Logo Spacing
    Adjust logo spacing. You can also use px/em (spacing unit).
  3. Menu Height
    Set height of the menu.
  4. Show Middle Bar Social
    Turn on this option to show social icon on the middle bar.

 

3. Header – Logo


In this part, you can setup logo for the header.

  1. Header Logo
    Set logo for the header.
  2. Header Logo Retina
    Set retina logo for the header.
  3. Header Logo Alt
    Insert alternate text for the header logo.
  4. Sticky Menu Logo
    Set logo for the sticky menu.
  5. Sticky Menu Logo Retina
    Set retina logo for the sticky menu.
  6. Sticky Menu Alt
    Insert alternate text for the sticky menu logo.
  7. Mobile Device Logo
    Set logo for mobile device.
  8. Mobile Device Logo Retina
    Set retina logo for mobile device.
  9. Mobile Device Alt
    Insert alternate text for mobile device logo.

 

4. Header – Top Bar Setting


In this part, you can setup top bar setting on the header.

  1. Force Top Bar Into Full Width
    Turn on this option to force top bar into fullwidth. Please note, this option will appear and work if you enable Boxed Layout option and not using Header Layout – Style 7.
  2. Social Icon Position on Top Bar
    Adjust the position of social icon on the top bar.
  3. Menu Position on Top Bar
    Adjust the position of menu on the top bar.
  4. Date Position on Top Bar
    Adjust the position of date on the top bar.
  5. Date Format for Header
    Set date format for header on the top bar. For more detail about date format, please refer to Developer Codec.
  6. Show Cart on Top Bar
    Turn on this option to show cart on the top bar. Please note, this option will appear if you’re using WooCommerce plugin.
  7. Show Search on Top Bar
    Turn on this option if to show search on the top bar.
  8. Top Bar Search Type
    Choose search appearance type. Please note, this option will appear if you’re enable Show Search on Top Bar option on above.
  9. Show Account Icon on Top Bar
    Turn on this option to show login or register icon and account icon on the top bar. Please note, especially for register need to enabled from WordPress admin. For more complete information above enable register you can follow this link.

 

5. Header – Top Bar Style


In this part, you can setup top bar style setting on the header.

  • Top Bar Scheme
    Choose scheme type for the top bar.

This option below will appear if you’re choose Custom Style on Top Bar Scheme option on above.

  1. Background Color
    Set background color of the top bar.
  2. Text Color
    Set text color of the top bar.
  3. Menu Hover Color
    Set hover color of the top bar menu.
  4. Drop Arrow Color
    Set drop arrow color of the top bar.
  5. Border Bottom
    Set border bottom color of the top bar.
  6. Side Border
    Set side border color of the top bar.
  7. Submenu Background
    Set submenu background color of the top bar.
  8. Submenu Text Color
    Set submenu text color of the top bar.
  9. Submenu Background Hover Color
    Set submenu background hover color of the top bar.
  10. Submenu Border Color
    Set submenu border color of the top bar.

 

6. Header – Menu Setting


In this part, you can setup menu setting on the header.

  1. Menu Following Mode
    Choose menu appearance mode of the navigation bar.
  2. Menu Style
    Choose menu style of the navigation bar.
  3. Force Menu Bar Into Full Width
    Turn on this option to force menu bar into fullwidth. Please note, this option will appear and work if you’re enable Boxed Layout option and not using Header Layout – Style 7.
  4. Boxed Navbar
    Turn on this option to make boxed navigation bar. Please note, this option will appear and work if you’re not using Header Layout – Style 7.
  5. Fit Width Navbar
    Turn on this option to make navigation bar have fit width effect. Please note, this option will appear and work if you’re not using Header Layout – Style 7.
  6. Navbar Border
    Turn on this option to make navigation bar has border around it.
  7. Navbar Shadow
    Turn on this option to make navigation bar has shadow around it.
  8. Navbar Show Search Button
    Turn on this option to show search button on navigation bar.
  9. Search Style
    Choose style for search box on the navigation bar. Please note, this option will appear and work if you’re enable Navbar Show Search Button option on above.
  10. Navbar Show Cart button
    Turn on this option to show cart button on the navigation bar. Please note, this option will appear and work if you’re using WooCommerce plugin and not using Header Layout – Style 6.

 

7. Header – Menu Sytle


In this part, you can setup menu style setting on header.

  • Menu Scheme
    Choose scheme type for the navigation bar.

This option below will appear if you’re choose Custom Style on Menu Scheme option on above.

  1. Menu Background Color
    Set background color of the menu.
  2. Menu Text Color
    Set text color of the menu.
  3. Menu Hover Line Color
    Set hover line color of the menu.
  4. Menu Hover Background Color
    Set hover background color of the menu.
  5. Menu Hover Text Color
    Set hover text color of the menu.
  6. Menu Border Color
    Set border color of the menu.
  7. Submenu Arrow Icon Color
    Set arrow icon color of the submenu.
  8. Submenu Background Color
    Set background color of the submenu.
  9. Submenu Text Color
    Set text color of the submenu.
  10. Submenu Hover Background Color
    Set hover background color of the submenu.
  11. Submenu Hover Text Color
    Set hover text color of the submenu.
  12. Submenu Border Color
    Set border color of the submenu.

 

8. Header – Mega Menu Style


In this part, you can setup mega menu style setting on the header.

  1. Subcategory News Feed Background Color
    Set background color of the subcategory news feed.
  2. Subcategory News Feed Border Color
    Set border color of the subcategory news feed.
  3. Subcategory News Feed Text Color
    Set text color of the subcategory news feed.
  4. Subcategory News Feed Hover Text Color
    Set hover text color of the subcategory news feed.
  5. Subcategory News Feed Hover Background Color
    Set hover background color of the subcategory news feed.
  6. News Feed Background Color
    Set background color of the news feed.
  7. News Feed Overlay Background Color
    Set overlay background color of the news feed.
  8. News Feed Preloader Color
    Set preloader color of the news feed.
  9. News Feed Text Color
    Set text color of the news feed.
  10. Tags Heading Color
    Set color of the tags heading.
  11. Tags List Color
    Set color of the tag list.
  12. Separator Border Color
    Set border color of the separator.
  13. Nav Arrow Color
    Set color of the arrow navigation.
  14. Nav Arrow Background Color
    Set background color of the arrow navigation.
  15. Nav Arrow Border Color
    Set border color of the arrow navigation.
  16. Nav Arrow Hover Color
    Set hover color of the arrow navigation.
  17. Nav Arrow Hover Background Color
    Set hover background color of the arrow navigation.
  18. Nav Arrow Hover Border Color
    Set hover border color of the arrow navigation.
  19. Nav Arrow Disabled Color
    Set color of the arrow navigation when disabled.
  20. Nav Arrow Disabled Background Color
    Set background color of the arrow navigation when disabled.
  21. Nav Arrow Disabled Border Color
    Set border color of the arrow navigation when disabled.

The following option below will appear if you’re using WooCommerce plugin.

  1. Cart Drop Background Color
    Set background color of the cart drop.
  2. Cart Drop Text Color
    Set text color of the cart drop.
  3. Product Quantity Text Color
    Set text color of the product quantity.
  4. Cart Drop Border Color
    Set border color of the cart drop.
  5. Cart Drop Button Background Color
    Set background color of the cart drop button.
  6. Cart Drop Button Text Color
    Set text color of the cart drop button.
  7. Cart Drop Button Background Hover Color
    Set background hover color of the cart drop button.
  8. Cart Drop Button Text Hover Color
    Set text hover color of the cart drop button.

 

9. Header – Search Style


In this part, you can setup search style setting on header. Also, the following option below will separate based on search style type.

Search Modal Style

These options below will works for Search Modal Style.

  1. Search Modal Color
    Set color of the search modal style.
  2. Search Modal Input Placeholder Color
    Set input placeholder color of the search modal style.
  3. Search Modal Background Color
    Set background color of the search modal style.

 

Search Popup Drop Style

These options below will work for Search Popup Drop Style.

  1. Search Background Color
    Set background color of the search popup drop style.
  2. Search Border Color
    Set border color of the search popup drop style.
  3. Search Input Background Color
    Set input background color of the search popup drop style.
  4. Search Input Border Color
    Set input border color of the search popup drop style.
  5. Search Input Text Color
    Set input text color of the search popup drop style.


Search No Expand

These options below will works for Search No Expand Style.

  1. Search Input Background Color
    Set input background color of the search no expand style.
  2. Search Input Border Color
    Set input border color of the search no expand style.
  3. Search Input Text Color
    Set input text color of the search no expand style.
  4. Search Input Placeholder Color
    Set input placeholder color of the search no expand style.