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:
- Open the Newsy → Theme Options → Header → Header Builder Option
- Choose header type (e.g. Desktop)
- Use drag & drop interface to move header elements between rows
- Click on an element (e.g. Logo) to open its settings panel
- 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).
- To reposition rows, mouse hover to rows.
-
To change row/cell properties, click the
icon.
-
To move a row, just drag & drop
it.
Manage Cells
The header layout rows has 3 cells (left, middle, right).
- Align: place items to left, center, right.
- 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:
- Open the Newsy → Theme Options → Header → Header Presets
- Click one of the available Compositions.
- Adjust your header.
- Save changes
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
-
Header Background Color
Select header wrapper color. This will set background color for all header bars. -
Header Background Image
Select header wrapper background image. This will set background image for all header bars. -
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
-
Row Style
Base css style for the row. You can add specific colors and spaces for row. -
Row Height
Set height size of top bar height.
- Mid Bar
-
Row Style
Base css style for the row. You can add specific colors and spaces for row. -
Row Height
Set height size of mid bar height.
- Bottom Bar
-
Row Style
Base css style for the row. You can add specific colors and spaces for row. -
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.
-
Sticky Type
Choose sticky effect or disable sticky header.
-
Row Style
Base css style for the row. You can add specific colors and spaces for row. -
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.
-
Row Style
Base css style for the row. You can add specific colors and spaces for row. -
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.
-
Logo Type
Choose logo type. Text or Image.
Text Logo
-
Text Logo
Set site name here for logo text.
-
Text Logo Typography
Set typography for logo text.
Image Logo
-
Logo Image
Upload an image as logo. -
Logo 2x Image
Upload a retina image as retina logo. -
Logo Dark Image
Upload an image as logo for dark scheme.
-
Logo Dark 2x Image
Upload a retina image as retina logo for dark scheme.
-
Text Logo
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.
-
Logo Type
Choose logo type. Text or Image.
Text Logo
-
Text Logo
Set site name here for logo text.
-
Text Logo Typography
Set typography for logo text.
Image Logo
-
Logo Image
Upload an image as logo. -
Logo 2x Image
Upload a retina image as retina logo. -
Logo Dark Image
Upload an image as logo for dark scheme.
-
Logo Dark 2x Image
Upload a retina image as retina logo for dark scheme.
-
Text Logo
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.
-
Logo Type
Choose logo type. Text or Image. -
Text Logo
-
Text Logo
Set site name here for logo text.
-
Text Logo Typography
Set typography for logo text.
Image Logo
-
Logo Image
Upload an image as logo. -
Logo 2x Image
Upload a retina image as retina logo. -
Logo Dark Image
Upload an image as logo for dark scheme.
-
Logo Dark 2x Image
Upload a retina image as retina logo for dark scheme.
-
Text Logo
Header: Main Menu
In this part, you can setup several options for main menu.
-
Activate Responsive More Menu?
Choose to enable responsive more menu.
-
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.
-
Date format
Set date format for header. For more detail about date format, please refer to Developer Codec. -
Text Typography
Set typography and color for date.
Header: Search From
In this part, you can setup several options for search form.
-
Search Form Style
Choose search form style that you want to use. -
Search Form Width
Set search input form width in percentage. -
Search Input Background Color
Set search input background color. -
Search Input Border Color
Set search input border color. -
Search Icon Color
Set search icon color. -
Search Input Text Color
Set search input text color. -
Search Button Color
Set search button color.
Header: Search Button
In this part, you can setup several options for search icon.
-
Search Button Icon Color
Set color of search icon. -
Search Button Hover Icon Color
Set hover color of search icon. -
Search Button Background Color
Set color of search button background color. -
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.
-
Select Social Icons
Choose social icons.
-
Social Icons Style
Choose social icon style. -
Social Icons Background Color
Set icon background color. - Social Icons Color
Set icon color.
Header: Menu Handler
In this part, you can setup several options for navigation menu handler icon.
-
Menu Handler Lines Color
Set nav icon color for navigation menu handler. -
Menu Handler Lines Hover Color
Set nav icon hover color for navigation menu handler. -
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
- Button Text
Insert button text. -
Button Icon
Insert font icon for button. - Button Link
Insert button url link. - Button Style
Set button style. -
Background Color
Set background color for the button. -
Background Hover Color
Set background hover color for the button. -
Text Color
Set text colot for the button. -
Text hover Color
Set text hover color for the button. -
Border Color
Set border color for the button. -
Border Hover Color
Set border hover color for the button.
Header: Ads
In this part, you can setup several options for Header Ads element.
- Ad 1
Select ad element. - Ad 2
Select ad element.
Header: Html Elements
In this part, you can setup several options for HTML element.
-
HTML Element 1
Insert html or shortcode element. -
HTML Element 2
Insert html or shortcode element. -
HTML Element 3
Insert html or shortcode element. -
HTML Element 4
Insert html or shortcode element. -
HTML Element 5
Insert html or shortcode element.