Header HTML

The header builder ( found in  Appearance > Customize > Header ) has three rows in which you can easily select and arrange the available components you can find while hovering over each division of the rows.

Consists of an area that allows HTML code and shortcodes.

Add a Header HTML

 Just click on the ➕ symbol and a list of components will appear. From there you can add the HTML component.

To open the customizing options, just click on the ⚙️ icon inside the Search Icon component. This will open the Search Icon panel on the left side, from where you can customize the component.

⚙️ General

• Appearance > Customize > Header > HTML > General

Add your custom Header HTML

The component allows for HTML code and shortcodes.

Dynamic Tags are another way of adding content to the HTML component. Dynamic Tags draws content from the website, or from the current page/post, changing dynamically according to the Page or Post it’s on. To get access to the Dynamic Tags click on the three dots shaped like a triangle.

📝 Note: Want to add social icons in the header? Check out how you can do it using the HTML component.

 📐Layout

• Appearance > Customize > Header > HTML > Layout

In the  Layout tab, you also have access to advanced positioning options like:

• Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).
• Margin - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions  ( Desktop | Tablet | Mobile ).
•  Alignment - left / center / right, inside the header builder available space for the Menu Icon component.
  • Desktop | Tablet | Mobile 

📝 Note: Neve has only one HTML component included in the header builder. Two extra HTML components are part of Neve Pro's Header Booster module.

🖌 Style

• Appearance > Customize > Header > HTML > Style

In this area you can style the text and typography:

• setting colors for Text - with the option to choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button.
The typography subpanel found in the Style tab offers the following options:
• Transform - None / Capitalise / Lowercase / Uppercase
• Weight - None / 100 to 900
• Font Size, Line Height (in PX / EM), Letter Spacing ( in PX) -  along with a reset button ( Desktop | Tablet | Mobile ).

📝 Note: The Text Color option does not apply to links in the HTML component. To change the color of the links go to Appearance > Customize > Colors & Backgrounds > Links.