Header Option

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

1. 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

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.

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 / Scrolling Mobile Menu

1. Enable Below Header Menu / Scrolling Mobile Menu
   Show below header menu on mobile view
2. Below Header Menu
   Choose a menu to set as below header menu / Scrolling mobile 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.