The default header in UiCore Themes can be configured from Theme Options → Header. It is lightweight, optimized for performance, and fully integrated with the theme.
If you need a custom header layout that cannot be achieved with the built-in options, you can create one using Theme Builder.
Below is an overview of all available header settings and components.
Logo
Navigate to Theme Options → Branding to upload and manage your logo files.
Logo File Recommendations
To ensure the best visual quality and performance:
- Remove any unnecessary whitespace around the logo by cropping it to the artwork bounds.
- Use a format that supports transparency, such as WEBP or PNG.
- Avoid excessively large image dimensions to maintain fast loading times.
- Export the logo at approximately 3× its display size for crisp rendering on HiDPI screens.
For example, if the logo is displayed at 149 × 36px, export it at 447 × 108px.
If you do not have access to image editing software, you can use a free online editor such as Pixlr.
Available Logo Files
- Primary Logo – The default logo used across the website.
- Secondary Logo (optional) – Used on transparent headers. Typically a white or inverted version designed for dark backgrounds. If not provided, the Primary Logo is used.
- Mobile Logo (optional) – A dedicated logo for mobile devices. Useful when the desktop logo appears too small or when using a simplified version. If not provided, the Primary Logo is used.
- Secondary Mobile Logo (optional) – Used on transparent mobile headers. If not provided, the Mobile Logo is used.
- Favicon – The icon displayed in browser tabs, bookmarks, and mobile home screens. The recommended size is 196 × 196px.
Adjusting Logo Size
- Desktop logo height: Theme Options → Header → Logo Height
- Mobile logo height: Theme Options → Header → Mobile Logo Height
Header Style
This section controls the overall layout and appearance of the header.
Header Layout
Choose from several predefined layouts:
Classic
Creative
Center Creative
Classic Center
Left Header
Hamburger Classic
Hamburger Center
Hamburger Creative
Header Background
Set a solid color, gradient, or image as the header background.
For modern glass-style designs, combine a transparent background with the Blur Filter option.
Header Padding
Controls the vertical spacing inside the header.
For example, a value of 24px adds 24px of padding above and below the logo.
Logo Height
Controls the logo height on desktop devices.
Mobile logo height can be configured separately.
Header Border
Adds a customizable border to the bottom of the header.
Header Shadow
Adds a shadow below the header for increased visual separation.
Transparent Header
Enables a transparent header across the website.
When enabled:
- The transparent version is displayed before scrolling.
- After scrolling, the standard header is loaded automatically.
- The header overlays the page content instead of appearing above it.
- The Secondary Logo is used automatically if one is assigned.
- Additional options become available for transparent header menu colors and borders.
Wide Header
Displays the header at full browser width instead of inside a contained layout.
Pill Style
Adds a pill-shaped background around selected header elements.
Available styles:
Simple
Compact
Menu
Logo and Menu
Enabling this option also unlocks:
- Pill Border Radius
- Pill Top Spacing
Sticky Header
Keeps the header fixed at the top of the screen while scrolling.
Smart Sticky
Available only when Sticky Header is enabled.
The header hides while scrolling down and reappears when scrolling up or when the end of the page is reached.
Change Height on Scroll
Available only when Sticky Header is enabled.
Allows different padding values before and after scrolling, creating a shrinking or expanding header effect.
Entrance Animation
Controls the animation displayed when the page loads.
Available settings:
- Type: Fade, Fade Down, Fade Up, None
- Items Animation Duration: Slow, Normal, Fast
- Animation Delay
- Delay Between Elements
Header Extras
Additional elements can be added to the header from this section.
Call to Action Button
Adds a button to the header using the global button styles configured in Theme Options → Buttons.
Available settings:
- Call to Action Size
- Button Text
- Button Link
- Link Target
Button sizes:
- Small
- Medium
- Large
- Full Height
Side Drawer
Adds a sliding panel that can be opened using a hamburger icon.
Available settings:
- Side Drawer Background
- Side Drawer Text
- Side Drawer Toggle (Click or Hover)
- Side Drawer Position (Left or Right)
Search
Adds a search icon to the header.
Clicking the icon opens a fullscreen search overlay.
[image]
Social Icons
Displays social media icons in the header.
Icons become available automatically when social links are configured in Theme Options → Social.
Enable Widget Area (Desktop Screens Only)
Adds a custom widget area to the desktop header.
To customize its content, navigate to:
Appearance → Widgets → Header Custom Area
This area can be used for:
- Additional buttons
- Contact information
- Custom text
- Other widgets not available through Header Extras
Menu
This section controls the appearance and behavior of navigation menus.
Menu Hover Interaction
Select a hover effect for menu items:
- Focus
- Button
- Underline
- Text Flip
- Magnet Button
Menu Interaction Color
Sets the color used by hover effects.
Highlight Current Page
Highlights the currently active page using the hover color or selected interaction effect.
Focus Hover Item
Applies the Focus effect independently, allowing it to be combined with other hover interactions.
Menu Typography
Configure typography and colors for menu items.
When using a transparent header, separate color controls are available for the transparent state.
Menu Item Spacing
Adjust the spacing between menu items.
Reducing spacing allows more menu items to fit inside the header.
Menu Alignment
Available options:
- Left
- Center
- Right
Dropdown Menu Trigger
Choose how dropdown menus are opened:
- Hover
- Click
Dropdown Animation Type
Available animations:
- None
- Fade
- Fade Up
- Fade Down
- Fade Left
- Scale Down
- Rotate
- Scale Bg
- Website Blur
Scale Bg enlarges the header area to accommodate dropdown content.
Website Blur blurs the page content while keeping the header in focus.
Dropdown Background Color
Sets the dropdown menu background color.
Dropdown Menu Typography
Configure typography and colors for dropdown menu items.
Mobile Menu
This section contains settings specific to mobile devices.
Mobile Header Layout
Choose between:
- Default
- Center
Mobile Hamburger Style
Available styles:
- Default
- Classic
- Minimalist
- Creative
- Text
Mobile Icon Size
Available sizes:
- Small
- Medium
- Large
Mobile Pill Style
Enables pill styling for the mobile header independently from the desktop header.
The mobile pill border radius can be adjusted separately.
Mobile Header Extra Content
Display additional elements in the mobile header.
Available options:
- None
- Call to Action
- Search
- Cart
- Search & Cart
- Socials
- Custom Area
The Cart option is available only when WooCommerce is active.
Mobile Menu Padding
Controls the vertical padding of the mobile header.
If left empty, the desktop header padding is used.
Mobile Logo Height
Controls the logo height on mobile devices.
Mobile Navigation Breakpoint
Defines the screen width at which the mobile menu replaces the desktop menu.
Mobile Sticky Header
Enables sticky behavior on mobile devices independently from desktop settings.
Mobile Menu Background
Set a solid color, gradient, or image as the mobile menu background.
Use Secondary Logo
Displays the Secondary Mobile Logo inside the mobile menu panel.
This is useful when a different logo variation is needed inside the expanded menu.
Mobile Menu Typography
Configure typography and colors for mobile menu items.
Mobile Menu Alignment
Available options:
- Left
- Center
- Right
Enable Widget Area (Mobile Screens Only)
Adds the Header Custom Area widget area inside the mobile menu panel.
Customize its content from:
Appearance → Widgets → Header Custom Area
Mobile Menu Entrance Animation
Choose how the mobile menu panel appears.
Available options:
- Fade
- Slide Along
- Slide on Top
- Expand
Mobile Dropdown Animation Type
Controls submenu behavior within the mobile menu.
Available options:
- Slide
- Expand
Slide moves the parent menu aside and reveals the submenu.
Expand opens the submenu below its parent item.
When using the Slide animation, you can also customize the Back Button Text.
