### Getting Started

- Introduction
- Installing Theme
- Installing Plugins
- Theme Update
- Plugin Update
- Import Demos
- Child Theme
- Activating License

### Theme Options & Style

- Options Overview
- General
- Header
- Footer
- Homepage
- Post Page
- Categories
- Other Pages
- Colors & Typography
- Block & Modules
- Advertisement
- Advanced

### General Guidelines

- Single Post
- Page Templates
- Sidebar & Widgets
- Menus

### Plugins

- Plugins Overview
- Ak Framework
- Newsy Elements
- BuzzEditor
- Newsy Social Counter
- Newsy Social Share
- Newsy View Counter
- Newsy Fake Counter
- Newsy Reaction
- Newsy Voting
- Newsy AMP
- Newsy JSON-LD
- BuddyPress
- WooCommerce
- bbPress
- WordPress Social Login
- WPBakery Page Builder
- Elementor Page Builder

### FAQ

- How to Install WordPress
- Missing Stylesheet

### Extras

- Changelog
- Support
- License

# Header

The header theme area consists of various elements like logo, menu, or social icons. The theme offers the Header Builder so you have full control over the header composition.

## Header Builder

The header builder allows you to compose any header layout using an easy and intuitive drag & drop interface.

### Quick Start

To start building your header, please do as follows:

1. Open the Newsy → Theme Options → Header → Header Builder Option
2. Choose header type (e.g. Desktop)
3. Use drag & drop interface to move header elements between rows
4. Click on an element (e.g. Logo) to open its settings panel
5. Save changes

### Manage Rows

The header layout is divided into 3 rows (labeled as top, mid, bottom). Every row has 3 cells (left, middle, right).

1. To reposition rows, mouse hover to rows.
2. To change row/cell properties, click the icon.
3. To move a row, just drag & drop it.

### Manage Cells

The header layout rows has 3 cells (left, middle, right).

1. Align: place items to left, center, right.
2. Display: Grow is force cell size wide. Normal cell is takes items size.

## Header Presets

The builder offers a few pre-made header compositions for a quick start. Please do as follows to start working from a pre-defined layout:

1. Open the Newsy → Theme Options → Header → Header Presets
2. Click one of the available Compositions.
3. Adjust your header.
4. Save changes

Note:
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.

## Header Style

The header layout is divided into 3 rows (labeled as top, mid, bottom). Every row has 3 cells (left, middle, right).

### Header: Wrap Style

1. Header Background Color
   Select header wrapper color. This will set background color for all header bars.
2. Header Background Image
   Select header wrapper background image. This will set background image for all header bars.
3. Header Shadow?
   Enable shadow effect for header wrap.

### Header: Desktop Style

The desktop header layout is divided into 3 rows (labeled as top, mid, bottom). Set style and height for each bar in here.

- Top Bar

1. Row Style
   Base css style for the row. You can add specific colors and spaces for row.
2. Row Height
   Set height size of top bar height.

- Mid Bar

1. Row Style
   Base css style for the row. You can add specific colors and spaces for row.
2. Row Height
   Set height size of mid bar height.

- Bottom Bar

1. Row Style
   Base css style for the row. You can add specific colors and spaces for row.
2. Row Height
   Set height size of bottom bar height.

### Header: Sticky Bar Style

The sticky header layout labeled as sticky bar. Set style and height for sticky bar in here.

1. Sticky Type
   Choose sticky effect or disable sticky header.
2. Row Style
   Base css style for the row. You can add specific colors and spaces for row.
3. Row Height
   Set height size of sticky bar height.

### Header: Mobile Bar Style

The mobile header layout labeled as mobile bar. Set style and height for mobile bar in here.

1. Row Style
   Base css style for the row. You can add specific colors and spaces for row.
2. Row Height
   Set height size of mobile bar height.

## Header Elements

All available builder elements are listed below. Some elements require setup. Please refer to their configuration pages before using it inside the builder.

### Header: Logo

By default the theme displays the site title in the Header Theme Area. You can easily change it and display the logo image.

1. Logo Type
   Choose logo type. Text or Image.

   Text Logo

   1. Text Logo
      Set site name here for logo text.
   2. Text Logo Typography
      Set typography for logo text.

   Image Logo

   1. Logo Image
      Upload an image as logo.
   2. Logo 2x Image
      Upload a retina image as retina logo.
   3. Logo Dark Image
      Upload an image as logo for dark scheme.
   4. Logo Dark 2x Image
      Upload a retina image as retina logo for dark scheme.

### Header: Sticky Logo

By default the theme displays the main logo in the Sticky Header Theme Area. You can easily change it and display the sticky logo image.

1. Logo Type
   Choose logo type. Text or Image.

   Text Logo

   1. Text Logo
      Set site name here for logo text.
   2. Text Logo Typography
      Set typography for logo text.

   Image Logo

   1. Logo Image
      Upload an image as logo.
   2. Logo 2x Image
      Upload a retina image as retina logo.
   3. Logo Dark Image
      Upload an image as logo for dark scheme.
   4. Logo Dark 2x Image
      Upload a retina image as retina logo for dark scheme.

### Header: Mobile Logo

By default the theme displays the main logo in the Mobile Header Theme Area. You can easily change it and display the mobile logo image.

1. Logo Type
   Choose logo type. Text or Image.
2. Text Logo
   1. Text Logo
      Set site name here for logo text.
   2. Text Logo Typography
      Set typography for logo text.

   Image Logo

   1. Logo Image
      Upload an image as logo.
   2. Logo 2x Image
      Upload a retina image as retina logo.
   3. Logo Dark Image
      Upload an image as logo for dark scheme.
   4. Logo Dark 2x Image
      Upload a retina image as retina logo for dark scheme.

### Header: Main Menu

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

1. Activate Responsive More Menu?
   Choose to enable responsive more menu.
2. Fit Menu To Container?
   Extend the menu items up to the container.

### Header: Top Menu

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

### Header: Date

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

1. Date format
   Set date format for header. For more detail about date format, please refer to Developer Codec.
2. Text Typography
   Set typography and color for date.

### Header: Search From

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

1. Search Form Style
   Choose search form style that you want to use.
2. Search Form Width
   Set search input form width in percentage.
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 Button Color
   Set search button color.

### Header: Search Button

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

1. Search Button Icon Color
   Set color of search icon.
2. Search Button Hover Icon Color
   Set hover color of search icon.
3. Search Button Background Color
   Set color of search button background color.
4. Search Button Hover Background Color
   Set color of search button background color.

### Header: Social Icons

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

1. Select Social Icons
   Choose social icons.
2. Social Icons Style
   Choose social icon style.
3. Social Icons Background Color
   Set icon background color.
4. Social Icons Color
   Set icon color.

### Header: Menu Handler

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

1. Menu Handler Lines Color
   Set nav icon color for navigation menu handler.
2. Menu Handler Lines Hover Color
   Set nav icon hover color for navigation menu handler.
3. Menu Handler Text
   Set menu handler text. Eg: Menu

### Header: Buttons

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

Button 1-2-3

1. Button Text
   Insert button text.
2. Button Icon
   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. Text hover Color
   Set text hover color for the button.
9. Border Color
   Set border color for the button.
10. Border Hover Color
    Set border hover color for the button.

### Header: Ads

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

1. Ad 1
   Select ad element.
2. Ad 2
   Select ad element.

### Header: Html Elements

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

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

#### Content