Close

Search

Account

Documentation

Forum

Menu

Announcement How To Install Template Kit
Next
Prev
close

Install & Update

General Guidelines

Customize Option & Style

Built In Plugins

FAQ

  1. Home
  2. JNews
  3. Customize Option & Style

Header Option

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

    1. Header – Builder & Layout
    2. Header – Desktop Option
    3. Header – Sticky Option
    4. Header – Mobile Option
    5. Header – Mobile Drawer Option
    6. Header – Logo
    7. Header – Top Bar Menu
    8. Header – Main Menu
    9. Header – Social Icon
    10. Header – Date
    11. Header – Search Icon
    12. Header – Search Form
    13. Header – Account
    14. Header – Navigation Icon
    15. Header – Cart Icon
    16. Header – Cart Detail
    17. Header – Language Switcher
    18. Header – HTML Element
    19. Header – Button Element
    20. Header – Vertical Menu
    21. Header – Dark Mode

 

Info

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

 

1. Header – Builder & Layout

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

  • Starter Layout
    Choose a desired layout for header. We provide 7 kinds of header for the best website’s look.
Notice
  • We will reset all options inside header builder panel when you click one of the starter layout
  • You can modify your header using header builder like normal after choosing header builder layout.

 

2. Header – Desktop Option

In this part, you can setup several options for desktop navigation.

  • Dekstop Header Width
    Choose header container width that you want to use.

Dekstop Header – Topbar

  1. Top Bar Height
    Set height size of top bar height.
  2. Top Bar Scheme
    Choose scheme that you want to use for top bar.
  3. Background Color
    Set background color for top bar.
  4. Border Bottom
    Set border bottom color for top bar.
  5. Side Border
    Set side border color for top bar.
  6. Default Text Color
    Set default text color for top bar.
  7. Default Link Color
    Set default link color for top bar.
  8. Top Bar Border – Top Height
    Set border top height for top bar.
  9. Top Bar Border – Top Color
    Set border top color for top bar.

Dekstop Header – Middle Bar

  1. Middle Bar Height
    Set middle bar height.
  2. Middle Bar Scheme
    Choose scheme for middle bar.
  3. Middle Bar Background Color
    Set background color for middle bar.
  4. Middle Bar Background Image
    Set background image for middle bar.
  5. Background Repeat
    Set background repeat for middle bar. Please note, this option will appear and work if you set Middle Bar Background option.
  6. Background Position
    Set background position for middle bar. Please note, this option will appear and work if you set Middle Bar Background option.
  7. Attachment Background
    Set background attachment for middle bar. Please note, this option will appear and work if you set Middle Bar Background option.
  8. Background Size
    Set background size for middle bar. Please note, this option will appear and work if you set Middle Bar Background option.
  9. Middle Bar Border – Bottom Height
    Set border bottom height for middle bar.
  10. Middle Bar Border – Bottom Color
    Set border bottom color for middle bar.
  11. Default Text Color
    Set default text color for middle bar.
  12. Default Link Color
    Set default link color for middle bar.

Desktop Header – Bottom Bar

  1. Bottom Bar Height
    Set height size of bottom bar.
  2. Boxed Navbar
    Turn on this option to make bottom bar have boxed layout.
  3. Fit Width Navbar
    Turn on this option to make bottom bar have fit width effect.
  4. Navbar Border
    Turn on this option to add border for bottom bar.
  5. Navbar Shadow
    Turn on this option to add shadow for bottom bar.
  6. Menu Scheme
    Choose menu scheme for bottom bar.
  7. Bottom Bar Background Color
    Set background color for bottom bar.
  8. Border Color
    Set border color for bottom bar.
  9. Default Text Color
    Set default text color for bottom bar.
  10. Default Link Color
    Set default link color for bottom bar.
  11. Border Top Height
    Set border top height for bottom bar.
  12. Border Top Color
    Set border top color for bottom bar.
  13. Border Bottom Height
    Set border bottom height for bottom bar.
  14. Border Bottom Color
    Set border bottom color for bottom bar.

 

3. Header – Desktop Sticky Option

In this part, you can setup several options for desktop sticky navigation.

Sticky Bar Setting

  1. Menu Following Mode
    Choose menu following mode for sticky bar.
  2. Header Sticky Width
    Set sticky bar width.
  3. Sticky Bar Height
    Set sticky bar height.
  4. Boxed Navbar
    Turn on this option to make sticky bar have boxed layout.
  5. Fit Width Navbar
    Turn on this option to make sticky bar have fit width effect.
  6. Navbar Border
    Turn on this option to add border on sticky bar.
  7. Navbar Shadow
    Turn on this option to add shadow on sticky bar.

Sticky Bar Style

  1. Menu Scheme
    Choose menu scheme for sticky bar.
  2. Sticky Bar Background Color
    Set background color for sticky bar.
  3. Border Color
    Set border color for sticky bar.
  4. Default Text Color
    Set default text color for sticky bar.
  5. Default Link Color
    Set default link color for sticky bar.
  6. Border Bottom Height
    Set border bottom height for sticky bar.
  7. Border Bottom Color
    Set border bottom color for sticky bar.

4. Header – Mobile Option

In this part, you can setup several options for mobile navigation.

  • Menu Following Mode
    Choose menu following mode for mobile navigation.
  • Mobile Background Color
    Set background color for mobile browser.

Mobile Header – Top Bar

  1. Top Bar Scheme
    Set top bar scheme.
  2. Top Bar Background Color
    Set background color for top bar.
  3. Default Text Color
    Set default text color for top bar.
  4. Default Link Color
    Set default link color for top bar.

Mobile Header – Middle Bar

  1. Middle Bar Scheme
    Choose middle bar scheme.
  2. Middle Bar Height
    Set middle bar height.
  3. Background Color
    Set background color for middle bar.
  4. Default Text Color
    Set default text color for middle bar.
  5. Default Link Color
    Set default link color for middle bar.
  6. Bottom Bar Border Height
    Set border height for bottom bar.
  7. Mobile Top Bar Border – Top Color
    Set border top color for mobile menu top bar.

Mobile Header – Below Header Menu

  1. Enable Below Header Menu
    Show below header menu on mobile view
  2. Below Header Menu
    Choose a menu to set in below header menu
  3. Menu Style
    Choose below header menu style
  4. Background Color
    Set background color for below header menu.
  5. Text Color
    Set text color for below header menu.
  6. Border Top Height
    Set top border to separate header and menu.
  7. Border Top Color
    Set top border color.
  8. Enable Gradient
    Set gradient background color for below header menu.

 

5. Header – Mobile Drawer Option

In this part, you can setup several options for mobile drawer navigation.

  1. Drawer Scheme
    Choose drawer scheme.
  2. Background Color
    Set background color for mobile drawer.
  3. Overlay Color
    Set overlay color for mobile drawer.
  4. Mobile Drawer Background Image
    Set background image for mobile drawer.
  5. Background Repeat
    Set background repeat. Please note, this option will appear and work if you set Mobile Drawer Background Image option.
  6. Background Position
    Set background position. Please note, this option will appear and work if you set Mobile Drawer Background Image option.
  7. Attachment Background
    Set attachment background. Please note, this option will appear and work if you set Mobile Drawer Background Image option.
  8. Background Size
    Set background size. Please note, this option will appear and work if you set Mobile Drawer Background Image option.

 

6. Header – Logo

In this part, you can setup several options for logo.

  1. Header Logo
    Upload an image as logo for header.
  2. Header Logo Retina
    Upload a retina image as retina logo for header.
  3. Logo Spacing
    Insert logo spacing. You can use px or em unit.
  4. Header Logo Alt
    Insert alternate text for header logo.
  5. Sticky Menu Logo
    Upload an image as logo for sticky menu.
  6. Sticky Menu Logo Retina
    Upload a retina image as retina logo for sticky menu.
  7. Sticky Menu Alt
    Insert alternate text for sticky menu logo.
  8. Mobile Device Logo
    Upload an image as logo for mobile device.
  9. Mobile Device Logo Retina
    Upload a retina image as retina logo for mobile device.
  10. Mobile Device Logo Alt
    Insert alternate text for mobile device logo.

 

7. Header – Top Bar Menu

In this part, you can setup several options for top bar menu.

Dektop – Top Bar Menu

  1. Text Color
    Set text color for top bar menu.
  2. Menu Hover Color
    Set menu hover color.
  3. Drop Arrow Color
    Set drop arrow color.
  4. Submenu Background
    Set background color for top bar submenu.
  5. Submenu Text Color
    Set text color for top bar submenu.
  6. Submenu Background Hover Color
    Set background hover color for top bar submenu.
  7. Submenu Border Color
    Set border color for top bar submenu.

 

8. Header – Main Menu

In this part, you can setup several options for main menu.

Main Menu Style

  1. Menu Style
    Choose menu style.
  2. Menu Text Color
    Set menu text color.
  3. Menu Hover Line Color
    Set menu line color when hover
  4. Menu Hover Background Color 4
    Set menu background color when menu hover. Please note, this option will appear and work if you choose Style 4 on Menu Style option.
  5. Menu Hover Text Color
    Set menu text color when menu hover.

Main Submenu Style

  1. Submenu Arrow Icon Color
    Set submenu arrow icon color.
  2. Submenu Background Color
    Set background color for submenu.
  3. Submenu Text Color
    Set submenu text color.
  4. Submenu Hover Background Color
    Set hover background color for submenu.
  5. Submenu Hover Text Color
    Set hover text color for submenu.
  6. Submenu Border Color
    Set border color for submenu.

Mega Menu

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

 

9. Header – Social Icon

In this part, you can setup several options for header social icon.

Social – Desktop Header

  1. Social Icon Type
    Choose social icon type.
  2. Icon Color
    Set icon color.
  3. Background Color
    Set icon background color.

Social – Mobile Drawer

  • Icon Color
    Set icon color.

 

10. Header – Date

In this part, you can setup several options for header date.

  1. Date format for Header
    Set date format for header. For more detail about date format, please refer to Developer Codec.
  2. Text Color
    Set text color for date.
  3. Background Color
    Set background color for date.

 

11. Header – Search Icon

In this part, you can setup several options for search icon.

Desktop – Search Icon

  1. Search Style
    Choose your navbar search style.
  2. Search Icon Color
    Set color of search icon.

Desktop – Popup Drop Style

  1. Search Background Color
    Set search background color.
  2. Search Border Color
    Set search border color.
  3. Search Input Background Color
    Set search input background color.
  4. Search Input Border Color
    Set search input border color.
  5. Search Icon Color
    Set search icon color.
  6. Search Input Text Color
    Set search input text color.
  7. Search Placeholder Color
    Set search placeholder color.

Desktop – Live Results

  1. Background Color
    Set live results background color.
  2. Border Color
    Set live results border color.
  3. Text Color
    Set live results text color.

Desktop – Modal Style

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

Mobile – Search Icon

  • Search Icon Color
    Set search icon color for mobile.

Mobile – Popup Drop Style

  1. Search Background Color
    Set search background color.
  2. Search Border Color
    Set search border color.
  3. Search Input Background Color
    Set search input background color.
  4. Search Input Border Color
    Set search input border color.
  5. Search Icon Color
    Set search icon color.
  6. Search Input Text Color
    Set search input text color.
  7. Search Placeholder Color
    Set search placeholder color.

 

12. Header – Search Form

In this part, you can setup several options for search form.

  • Search Form Style
    Choose search form style that you want to use.
  • Form Width
    Set search input form width in percentage.

Search Form Color Options

  1. Search Input Background Color
    Set search input background color.
  2. Search Input Border Color
    Set search input border color.
  3. Search Icon Color
    Set search icon color.
  4. Search Input Text Color
    Set search input text color.
  5. Search Input Placeholder Color
    Set search input placeholder color.

Live Results Color Options

  1. Background Color
    Set background color for live results.
  2. Border Color
    Set border color for live search results.
  3. Text Color
    Set text color for live search results.

 

13. Header – Account

In this part, you can setup several options for header account.

  1. Text Color
    Set account text color.
  2. Submenu Background
    Set top bar submenu background color.
  3. Submenu Text Color
    Set top bar submenu text color.
  4. Submenu Background Hover Color
    Set top bar submenu background hover color.
  5. Submenu Border Color
    Set top bar submenu border color.

 

14. Header – Navigation Icon

In this part, you can setup several options for navigation icon.

  1. Desktop Navigation Icon Color
    Set nav icon color for desktop navigation.
  2. Mobile Navigation Icon Color
    Set nav icon color for mobile navigation.

 

15. Header – Cart Icon

In this part, you can setup several options for cart icon.

  • Cart Icon Color
    Set cart icon color

Cart Drop Style

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

 

16. Header – Cart Detail

In this part, you can setup several options for cart detail.

  • Cart Icon Color
    Set cart icon color for cart detail element.
  • Cart Text Color
    Set cart text color for cart detail element.

Cart Drop Style

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

 

17. Header – Language Switcher

In this part, you can setup several options for language switcher.

  1. Text Color
    Set text color for language switcher.
  2. Background Color
    Set background color for language switcher.

 

18. Header – HTML Element

In this part, you can setup several options for HTML element.

  1. Mobile HTML
    Insert html or shortcode element.
  2. HTML Element 1
    Insert html or shortcode element.
  3. HTML Element 2
    Insert html or shortcode element.
  4. HTML Element 3
    Insert html or shortcode element.
  5. HTML Element 4
    Insert html or shortcode element.
  6. HTML Element 5
    Insert html or shortcode element.

 

19. Header – Button Element

In this part, you can setup several options for button element.

Button 1

  1. Button Text
    Insert button text.
  2. Font Icon Class
    Insert font icon for button.
  3. Button Link
    Insert button url link.
  4. Button Style
    Set button style.
  5. Background Color
    Set background color for the button.
  6. Background Hover Color
    Set background hover color for the button.
  7. Text Color
    Set text colot for the button.
  8. Border Color
    Set border color for the button.

Button 2

  1. Button Text
    Insert button text.
  2. Font Icon Class
    Insert font icon for button.
  3. Button Link
    Insert button url link.
  4. Button Style
    Set button style.
  5. Background Color
    Set background color for the button.
  6. Background Hover Color
    Set background hover color for the button.
  7. Text Color
    Set text colot for the button.
  8. Border Color
    Set border color for the button.

Button 3

  1. Button Text
    Insert button text.
  2. Font Icon Class
    Insert font icon for button.
  3. Button Link
    Insert button url link.
  4. Button Style
    Set button style.
  5. Background Color
    Set background color for the button.
  6. Background Hover Color
    Set background hover color for the button.
  7. Text Color
    Set text colot for the button.
  8. Border Color
    Set border color for the button.

 

20. Header – Vertical Menu

In this part, you can setup several options for vertical menu.

Vertical Menu 1

  1. Choose Vertical Menu
    Choose menu for the vertical menu.
  2. Top Bar Border Top Height
    Set border top height.
  3. Top Bar Border Top Color
    Set border top color.
  4. Link Color
    Set link color for the vertical menu.

Vertical Menu 2

  1. Choose Vertical Menu
    Choose menu for the vertical menu.
  2. Top Bar Border Top Height
    Set border top height.
  3. Top Bar Border Top Color
    Set border top color.
  4. Link Color
    Set link color for the vertical menu.

Vertical Menu 3

  1. Choose Vertical Menu
    Choose menu for the vertical menu.
  2. Top Bar Border Top Height
    Set border top height.
  3. Top Bar Border Top Color
    Set border top color.
  4. Link Color
    Set link color for the vertical menu.

Vertical Menu 4

  1. Choose Vertical Menu
    Choose menu for the vertical menu.
  2. Top Bar Border Top Height
    Set border top height.
  3. Top Bar Border Top Color
    Set border top color.
  4. Link Color
    Set link color for the vertical menu.

 

21. Header – Dark Mode

Configure your site’s dark mode options. You can drag the Dark Mode element to the header (if you choose to use the toggle option) to ensure visitors can toggle dark mode.

The options are as follows.

  1. User Toggle Button (Light)
    Light site & allow the user to switch to dark mode.
  2. User Toggle Button (Dark)
    Dark site & allow the user to switch to light mode.
  3. User Toggle Button (Auto)
    Auto switch to dark mode based on device theme & allow the user to switch mode.
  4. Full Dark Mode
    Make your site using dark mode as the default scheme.
  5. Night Time Only
    Auto switch to dark mode between 6 pm to 6 am.
  6. Use Device Theme
    Auto switch to dark mode based on device theme.

Dark mode will be disabled while you are editing in Elementor/ WPBakery.

Created in Denpasar, Bali by Jegtheme. 2022