Header-related settings can be found at AppearanceCustomizeTheme SettingsHeader.
If no logo is added, your site title will be used. You can edit your site title from SettingsGeneralSite Title or AppearanceCustomizeSite IdentitySite Title. To add a logo click the Select File button below to the Logo heading.
Next, select an image from your Media Library or click the Upload Files tab to upload a new logo. Once you’ve selected your logo image, click the Choose File button.
The logo image height will be automatically restricted to 92px.
Below Logo Image you’ll find the Retina Logo field. Use this field to upload a double sized version of your logo, for use on high pixel density displays. If for example, your default logo is 92px x 92px, your Retina logo should then be 184px x 184px. This field must be used in conjunction with the default logo image.
When viewing your website on a high pixel density display, your regular logo will be replaced with your Retina logo. This ensures your logo remain crisp and prevents pixelating.
Ultra doesn’t display the site tagline by default. Enable the tagline setting to show yours below the logo.
The top bar is visible above the header. Left to right it consists of:
- A phone number field.
- An email field.
- A social icons menu.
- A regular links menu.
All fields are optional.
To add a phone number and email address go to AppearanceCustomizeTheme SettingsSite Text and fill out the Phone Number and Email Address fields. The phone number will have a tel protocol link added so if possible, add your link in international dialling code format. Tel protocol links allow call ready devices like a smartphone, tablet or call enabled computer to initiate a call when the link is clicked. The email address field will automatically add a mailto link that opens the users default email client.
To read more about Ultra’s social icons menu and regular top bar menu, please see the menu documentation page.
To de-activate the top bar, disable the AppearanceCustomizeTheme SettingsHeaderTop Bar setting. The top bar will be removed.
Display the header. Disable this option if you’d like to remove the header. This setting doesn’t impact the top bar.
The sticky header sticks the header to the top of the screen once a user has scrolled past it. This includes the logo, main menu and search icon if that is active. It doesn’t include the top bar. Disable this setting to turn the sticky header off.
Use the sticky header on mobile devices.
Once the header becomes sticky, it’s possible to set an opacity. 0.1 is 10%, and 1 is 100%; The default is 1.
As the header becomes sticky, it also shrinks scales, the logo/site title is smaller, and there is a reduction in header height. Disable this setting to turn scaling off.