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
Code Snippet
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;
}