The Logo & Site Identity Component - Neve Header / Footer Builder

📝Note: This component is part of the Neve Header / Footer Builder.

The Logo & Site Identity component increases your website's credibility by displaying a unique profile.

🧰Using the Component

1

A dd the  component into the header, by  clicking on the ➕ button.

2

Open the component's  settings to customize it, by clicking on the ⚙️ icon.

📝 Note: There are two instances ( in the PRO version ) available for this component: Logo & Site Identity and Logo & Site Identity 1.

🔮Customizing the Component

There are three panels with customizing options for this component, which allow you to create the desired header / footer:

⚙️General Panel

When you  click on the ⚙️ icon, the General tab will appear on the left side. It consists of many options regarding the component.

Display

If you want to change the logo position, select one of the four possible appearances you can choose from: 

• just the logo
• logo followed by the site identity
• site identity followed by the logo
• logo and site identity one below the other

Logo

To upload the logo, just click on the “Change Logo” and select your new logo.

Site Title 

Insert the website's title into the corresponding field.

You can also choose to hide the site's title, by disabling the option Show Site Title.

Site Tagline

Insert the website's tagline into the corresponding field.

You can also choose to hide the site's tagline, by disabling the option Show Site Tagline.

Remove the link from the Logo & Site identity

By default, the Logo & Site Identity component is linking to the homepage of the site. 

To remove this link, find the  Disable Homepage Link option and click on it to enable it.

Logo max width

In order to change the size of the logo, use the slider of the Logo max width option.

• select the new width option (in pixels). 
  • by clicking on the small Desktop / Tablet / Mobile icons near the option, you get to change the width based on each device, meaning you can have different sized logos on different devices.
  • you can undo the changes, by clicking on the reset button.

📝 Note: By changing the size of the logo, the height of the row will be automatically adjusted.

Site Icon (Favicon)

Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. 

• Site Icons should be square and at least 512 × 512 pixels.

To upload a Site Icon, click on the Select site icon button and upload your image.

 📐Layout Panel

The layout options allow the following adjustments:

• Alignment - it will change the alignment of the tagline, with three available options: left / center / right  ( Desktop | Tablet | Mobile ).
• Padding and Margin - available in PX, EM, REM, and %, with a link button that helps establish the same dimension for all the directions  ( Desktop | Tablet | Mobile ).

🖌Style Panel

Customize the Logo & Site Identity component by changing the text color. You can choose from Neve's Global colors, to keep the same color pallet, or pick your custom color. Apart from this, you can adjust the site title font size.

📝Note: Check this doc about Global Colors in Neve for further details.

🗂 Useful Resources

Two Logos

• It is also possible to create a website using two different logos, and here is a video.

Shrinking Header

• It can be combined with the Sticky header option to obtain a shrinking effect for the header.

SVG file as Logo

• You can upload SVG files as logos. Here is a dedicated doc about how to do this.

Translating the logo in Neve

• You can translate Neve's logo using the Polylang plugin. Here is dedicated documentation about this.

Palette Switch - Logo Mode

The Palette Switch component gives you the opportunity to adapt the logo & site identity component, to fit both light and dark modes. 

📝 Note: You will be able to see the changes only if you use the Palette Switch in the header / footer builder.

Before adding the Palette Switcher, there is nothing changed, except for the title that appears on hover:

After adding the Palette Switcher a new toggle will appear under the logo:

If you disable the option to use one logo for both modes, a new logo will appear and it can be different from the one set for the light mode:

💡Result

• Light Mode

• Dark Mode

🎥 Video - how to create a Custom Header