How to use text instead of a logo

The importance of the header

From branding to navigation, search and other functionalities, the header plays a very important role in User Experience. Within the first few seconds of the interaction with a website, the user will determine the type of website. Is it an eCommerce site or a blogging platform? A general view of the site’s design and the overall user experience will be established.

A study conducted by the NN/g found that users tend to remember more brands whose logos are placed on the left side of a page than those who are placed on the center or right side.

All our themes include settings to adjust your website logo within an easy to use control panel (Theme Options).

Setting the logo

As we understand and value the importance of branding we give access to a big variety of settings for that:

1. Primary settings: Theme Options -> Branding. 
   Based on your header settings, this is the place where you can set the logo for the default or transparent header, on both desktop and mobile devices.
   
2. Different Logo on Mobile: Theme Options – Branding
   Some logos look good on large desktop headers, but when shrunk down to fit the small mobile header, it can sometimes look illegible. We included an option to upload a separate logo file for mobile.
   
3. Mobile Extra Settings: Theme Options -> Header -> Mobile Menu -> Use Secondary Logo.  
   Here you can set the logo that will be displayed in the menu overlay on mobile (based on overlay background you may need to use the light logo instead of the dark one).
   
4. Hamburger Menu Extra Settings: Theme Options -> Header -> Menu -> Full Screen Menu Logo. 
   If one of the hamburger menu layouts is the way to go for you we provided support for the logo displayed there too.
   

Changing from image-based logo to text

If for some reason you don’t want to use this default behavior we provided a list of filters that can be used with child theme to help replace the logo with any content needed.

uicore-logo ( default logo )

add_filter( 'uicore-logo', function(){
 return '<a href="#" class="my-custom-logo">Site Title</a>';
});

uicore-mobile-menu-logo (logo displayed on mobile menu)

add_filter( 'uicore-mobile-menu-logo', function(){
     return '<a href="#" class="my-custom-logo">Site Title</a>'; 
});

uicore-desktop-menu-logo (fullscreen hamburger menu)

add_filter( 'uicore-desktop-menu-logo', function(){
 return '<a href="#" class="my-custom-logo">Site Title</a>';
});

Some complex examples

Using this approach combined with transparent header can require a little more work in order to achieve it.

1. Add this to your child theme ( at the end of functions.php)

add_filter( 'uicore-logo', function(){
  $new_logo_markup = '<a href="' . esc_url($logo_link) . '" rel="home">';
  $new_logo_markup .= '<span class="my-custom-logo">Brisk Theme</span>';
  $new_logo_markup .= '</a>';
  return $new_logo_markup;
});

2. Let’s add some custom css (Theme Options -> Custom -> Custom CSS)

.my-custom-logo {
    font-size: 24px;
    font-family: var(--e-global-typography-uicore_secondary-font-family);
    color: var(--e-global-color-uicore_headline);
    line-height:var(--uicore-header--logo-h);  /* Theme Options -> Header -> Logo Height */
    transition: all .3s ease;   /* use this if you want to aimate the change of color */
}

3. If you have a transparent header you can set the color after scroll with .uicore-scrolled class

.uicore-scrolled .my-custom-logo {
    color: var(--e-global-color-uicore_accent);
}

Conclusion

A logo is critical to your website’s brand identity. UiCore Themes come with intuitive settings to upload and customize your logo on all possible locations within your website.