Logo

Overview

One of the first steps you will take when setting up your site is adding your own logo. From the main theme options, you can upload and set the logo that will then get displayed on the front end. It’s easy to set and re-set your logo and you may want to play with the sizing of your image to get the desired front-end result.

Preparing your Image

We recommend using a .png image with a maximum size of 340px wide by 156px tall. In this section, let’s take a look at various options Enfod has to offer and many ways to customize your logo.

Upload your logo

Go to the Enfold options from your WordPress admin and from the Theme Options panel look for the Logo section: Enfold Options > Logo

If you choose to have a transparent header another logo for the transparent header can be added from Enfold > Header > Transparency options > Transparency Logo

Responsive Images

Since 4.8.2 responsive images (e.g. for retina screens) are supported. Make sure to upload an image dimension from which WordPress can create the necessary scrset and sizes attributes. Please keep in mind that you must select “Full Size” for image size unless you add the attachment ID.

SVG Files

Since 4.8.6.4 (in beta) Enfold supports svg files.

Administrators may upload svg files to the media library. Enfold also supports paths to local filesystem or URLs that are not in the media library (not recommended for security reasons, must start with http:// or https://). If Enfold cannot read the content of this URL on page load, it will render the URL in an IMG tag as a fallback. File content is parsed and added inline starting with the first svg tag. preserveAspectRatio is set for this to be responsive according to logo location.

Nesting of svg is allowed.

Code Snippet

How to use the snippets?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

CSS reference

The logo element can be custom styled using the CSS class names below:

 
/* logo container holds logo and menu */
.av-logo-container .inner-container {  }

/* .logo contains the logo image enclosed in an anchor tag*/
.logo {  }

/* Logo link */
.logo a {  }

/* Logo image */
.logo img {  }

Customization

Custom logo size

This is usually helpful to set up a wide banner logo. Add a logo and set custom width and height using the below CSS and theme options.

Update the width in the below CSS
Update the height from Enfold Options > Header > Header size > Custom pixels

/*  Custom size logo  

 Update the width in the below code and height from the Enfold > Header > Header size */

#top .logo ,
#top .logo a {  
  width: 588px;
 }

@media only screen and (max-width: 767px) {
#top .logo ,
#top .logo a {  
  max-width: 60% !important;
  width: 60% !important;
  height: auto;
 }}

Space above and below the logo

If you like to add some whitespace above and below the logo please use the CSS below.

/*Add space around the logo*/

#header_main {
  /* Increase the top and bottom space */
    padding: 20px 0;
}

#top #main {
  /* If the header overlap your content adjust the padding top value */
    padding-top: 130px;
}

Logo in h1

To wrap your logo element in h1 tag please use the code below in your functions.php

add_filter('avf_logo_headline','avia_new_logo_span');
function avia_new_logo_span(){
$output = "h1";
return $output; 
}

Image logo with subtext

You can add subtext to your logo by adding following code to Functions.php file of your child theme in Appearance > Editor

The code below will wrap your subtext in a H1 tag, we will add custom CSS to style it.

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= '<h1>Company Name</h1>';
    return $sub;
}

And if you would like to display your site title, you can use following code

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
    $sub .= get_bloginfo('name');
    return $sub;
}

Subtext style and position

Add subtext to the right of the logo


/* CSS - Subtext on right */

#top .logo,
#top .logo a {
  overflow: visible;
}

/* Subtext styling */
.logo .subtext h1 {
  font-size: 20px;
    font-weight: 600;
}

.logo .subtext {
  position: absolute;
    top: 50%;
    right: 0;
    transform: translate(120%, -50%);
    z-index: 999;
}

Add subtext to the left of the logo

/* CSS - Subtext on the left */

#top .logo,
#top .logo a {
  overflow: visible;
}

/* Subtext styling */
.logo .subtext h1 {
  font-size: 20px;
    font-weight: 600;
}

.logo .subtext {
  position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-120%, -50%);
    z-index: 999;
}

Add subtext below the logo

/* CSS - Subtext below the logo */
/* 
If your subtext is overflowing outside the header 
please increase the header height from
Enfold > Header > Header size > Custom pixels 
*/

#top .logo,
#top .logo a {
  overflow: visible;
}

/* Subtext styling */
.logo .subtext h1 {
  font-size: 20px;
    font-weight: 600;
}

.logo .subtext {
  z-index: 999;
}
/* Reduce the logo height to make space for the subtext below */
#top #header .logo img {  
  max-height: 70%!important;
  margin-top: 10px;
}

/* OPTIONAL CHOICE : Change position of subtext when scrolled */
#top #header.header-scrolled .logo img {  
  max-height: 100%!important;
}
#top #header.header-scrolled .logo .subtext {
  position: absolute;
    top: 50%;
    right: 0;
    transform: translate(120%, -50%);
}

Text logo with subtext

To replace the default enfold image logo with your text logo please add the code below to your function.php

//-------------------------------
// function - Text Logos
//-------------------------------
add_filter('avf_logo_final_output', 'avf_text_logo_final_output');

function avf_text_logo_final_output($logo) {
  $link     = apply_filters('avf_logo_link', home_url('/'));
  $logotext = "LOGO TEXT";
  $subtext  = "A CUSTOM SUBTEXT";
  $subtext  = "<span class='subtext'>$subtext</span>";
  $logo     = "<span class='logo'><h1><a href='".$link."'>".$logotext.$subtext."</a></h1></span>";

  return $logo;
}

To style the text logo and subtext please use the below CSS

/* Text logo styling */

#top .logo,
#top .logo a {  
  overflow: visible;
}

#top .logo {  
  background: gold;
    display: flex;
    align-items: center;
    padding: 15px;
}
#top .logo .subtext {
    font-size: 18px;
    color: #be0027;    
    position: absolute;
    width: 100%;
    left: 0;
    top: 25px;
}

/* Hide subtext on scroll */
#header.header-scrolled-full .subtext {
  display: none;
}

Change the logo image on some pages

It sometimes happens that you need to show one logo on your front page and a different logo on other pages. In that case, you can modify the logo image path with the help of a filter function that you can either add to your theme’s functions.php file or even better, your child themes function.php file

The following snippet will use the default logo set in theme options, but on the front page, the logo image path will be replaced with a different one.

// Change Logo image
add_filter('avf_logo','av_change_logo_img');

function av_change_logo_img($img)
{
    if( is_front_page() )
    {
        $img = "logo-home.png";
    }
    if( is_page('contact') )
    {
        $img = "logo-contact.png";
    }
    return $img; 
}

Change the logo link on some pages

The logo by default, link to the homepage. If you choose to change the logo link to an external page. Please modify the URL value in the below code and add it to the functions.php file.

The following snippet will link the logo to custom URL set for each page.

// Change Logo link
add_filter('avf_logo_link','av_change_logo_link');

function av_change_logo_link($link)
{
    if( is_front_page() )
    {
        $link = "http://kriesi.at";
    }
    if( is_page('contact') )
    {
        $link = "http://google.com";
    }
    return $link; 
}

Use a different logo on mobile

If you would like to display a different logo on mobile, please add following code to Functions.phpfile in Appearance > Editor

add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(wp_is_mobile() )
    {
    $logo = "http://www.kriesi.at/wp-content/themes/kriesi/images/logo.png";
    }
    return $logo;
}

How to hide the logo?

To remove the default enfold logo please use the code below in functions.php

//-------------------------------
// Remove the logo
//-------------------------------

add_filter('avf_logo_final_output', 'avia_remove_default_logo', 10, 6);
function avia_remove_default_logo($logo, $use_image, $headline_type, $sub, $alt, $link){
return '';
}

Hide Logo image: To hide the logo image using CSS.

/* Hide logo image */
#header .logo img {
    display:none;
}

Hide logo image and logo area: To hide both the logo image and logo area so you can display only the menu items please use the CSS code below.

/* Hide logo in desktop */

#header .logo,
#header.av_logo_center .av-logo-container,
#header.av_top_nav_header .av-logo-container,
#header.av_bottom_nav_header .av-logo-container,
#main .av-logo-container {
  display: none;
}

/* Hide logo in mobile*/

@media only screen and (max-width: 767px) {
#main .av-logo-container {
  display: block;
}
#header .logo,
#main .logo {
  display: none!important;
}}

Add multiple logos

To add additional logos please perform the below steps:

1. Remove the large logo image from Enfold > Theme Options > Logo.

2. Add the code below to your functions.php file (Remove the previous function code before adding this code).
NOTE: Edit the / with the logo link in the below code after href=”/”.

//-------------------------------
// Additional Logos
//-------------------------------
function add_logos($logo) {
  if(is_page(home)){
  
  $logo .= '<a class="first-logo" href="/"><img src="https://www.domain.com/logo-1.png"/></a>';
  $logo .= '<a class="second-logo" href="/"><img src="https://www.domain.com/logo-2.png"/></a>';
  $logo .= '<a class="third-logo" href="/"><img src="https://www.domain.com/logo-3.png"/></a>';
  }
  return $logo;
}
add_filter('avf_logo_final_output', 'add_logos');

3. Add the CSS below to your site:

 
/* Additional Logo Styles */
#top .first-logo {
    float: left;
    display: inline-block!important;
    position: absolute;
    left: 0;
}

#top .second-logo {
  left: 50%;
  transform: translateX(-50%);
  display: inline-block!important;
  position: absolute;
}

#top .third-logo {
    float: right;
    display: inline-block!important;
    position: absolute;
    right: 0;
}

Overlap logo and page content

To overlap the logo over the page content please use the CSS below.
NOTE: Please adjust the height values to suit your design.

/* CSS - Logo overlap content */

#top .logo,
#top .logo a{
  overflow: visible;
}

.logo img {
    height: 180%;
    max-height: 180px !important;
}

Change logo on hover

To change the logo on hover please update the logo URL in the below code and add it to your CSS styles.

/*Add your own logo on hover:*/

.logo a:hover img {
opacity: 0;
}

.logo a:hover {
background: url(https://domain.com/folder/hover-logo.png) no-repeat;
}