Logo
Basic Site Setup

Set up the Header

The header in UiCore themes can be customized entirely in Theme Options (Theme Options - Header). There are plenty of options to choose from, so feel free to experiment. Below are the most common settings for setting up the header:

Header Types

You can choose between two header types, each with its own set of options. Mobile header has the same formatting regardless of the type you choose for desktop screens.

Classic Header:

Left Header:

Go to Theme Options - Branding. Before uploading your company logo, take some time to prepare the files for best display on all devices, including HiDPI (retina) screens. If you don't have access to an image editor like Adobe Photoshop, use a free online tool like https://pixlr.com/editor/

Important: to avoid any display issues, make sure your logo files:
  • don't have extra margins (white space); it's recommended to crop the file to artwork bounds
  • are saved as transparent PNG (or PNG 24)
  • have appropriate dimensions (display height shouldn't exceed header height); this is to avoid slow loading times
  • the recommended size is 3x the actual display size; for example, if the desired logo size is 120x30px, upload a file of 360x90px; this way, your logo will look crisp even on HiDPI devices (latest phones and tablets)

The files that need to be uploaded are:

  • Primary Logo: this is the main logo that will be used on all header types
  • Secondary Logo (optional): this logo will only be used on transparent headers (if option is active); in some cases, this logo will use white or inverted colors for proper display on dark backgrounds
  • Mobile Logo (optional): use this if your logo looks too small on mobile devices or you simply want to use a different (condensed) version; if left blank, Primary Logo will be used
  • Secondary Mobile Logo (optional): same purpose as Mobile Logo, but for transparent headers
  • Favicon: this is the icon you see on your browser tab, phone/tablet home screen, or bookmark; to fit all devices, the recommended file size is 196x196px

Adjusting logo size:

  • For desktop devices, go to Theme Options - Header - Logo Height
  • For mobile devices, go to Theme Options - Header - Mobile Logo Height
Tip: There are dozens of settings in Theme Options and scrolling through them could be slow at first, that's why we introduced the search bar on top. Try it out!

Header Styling

Go to Theme Options - Header - Header Style. Here you can set the header color, height (padding), border, logo height, and content alignment.

Go to Theme Options - Header - Menu. Typography and color options are available here.

Extras

Go to Theme Options - Header - Header Extras. Use this to add extra features to the header, like a call to action button, social icons, search, or custom widgets.

Overwrite header settings on pages

Everything you set in Theme Options will be used as global settings throughout your website. Some options though can be overwritten on individual pages, using Page Options (bottom of your page editor):

Last updated on 8/30/2023, 11:58:56 AM
Was this page useful?
Create the Menu
Set up the Footer
UiCOre PRO Wordpress Theme

Introducing UiCore PRO

Unlimited websites in a single subscription.

"This is one of the best themes I've ever used."

Anterblackbird, USA