Last active
December 6, 2017 17:11
-
-
Save norewp/7601a4781f41be7fc98c1b62a0354825 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
function nore_home_logo() { | |
$centered_logo = ''; | |
$handle = 'nore-style'; | |
$custom_logo_id = get_theme_mod( 'custom_logo' ); | |
$logo_render = wp_get_attachment_image_src( $custom_logo_id , 'full' ); | |
$centered_logo .= 'header .main-navigation ul > li.my-site-logo a {background-image: url(' . esc_url( $logo_render[0] ) . ');}'; | |
wp_add_inline_style( $handle, $centered_logo ); | |
} | |
add_action( 'wp_enqueue_scripts', 'nore_home_logo', 200 ); |
Your CSS would be something like this - adjust for your needs but leave this text-indent: -9999em;
as is (important)
.main-navigation ul > .my-site-logo a {
background-position: center center;
background-repeat: no-repeat;
text-indent: -9999em;
width: 150px;
height: 150px
}
Note: This is a theme specific but the idea is the same for all menus. For Elementor you'll need to inspect your custom header to get the right CSS elements to target!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to use....
#1: Add the above code into your child theme's functions.php
#2: Create a menu via Appearance > Menu to include the Home link - move this link in the middle of your menu (Important)
#3: Add the class
my-site-logo
to the Home link and saveNow visit the Customizer and upload your site logo and this will render in place of the Home link. Style it to your needs and you have yourself a centered logo your single menu!