theme development - Replace Home with image link inside custom header menu

What I want to achieve is a header menu like this:

Right now, I have this:

I am not far off. To get to where I am currently at, I followed these instructions and added some custom CSS. So I added the following in my functions.php:

<?php
  function register_my_menu() {
    register_nav_menu('header-menu',__( 'Header Menu' ));
  }

  add_action( 'init', 'register_my_menu' );
 ?>

And added this to header.php:

<?php
  wp_nav_menu(array('theme_location' => 'header-menu'));
?>

I now wish to do that last step of getting the .svg logo to appear instead of the Text Home.

How do I do that? I can't see any option for that. This is of course very common in premium themes, how exactly is it done? Is there a clean way? I can probably hack it by creating a left and a right menu (ignore the cart and login for now), and then bang my logo with static HTML between the two menus, but that solution feels very wrong to me.

Any help would be greatly appreciated.

What I want to achieve is a header menu like this:

Right now, I have this:

I am not far off. To get to where I am currently at, I followed these instructions and added some custom CSS. So I added the following in my functions.php:

<?php
  function register_my_menu() {
    register_nav_menu('header-menu',__( 'Header Menu' ));
  }

  add_action( 'init', 'register_my_menu' );
 ?>

And added this to header.php:

<?php
  wp_nav_menu(array('theme_location' => 'header-menu'));
?>

I now wish to do that last step of getting the .svg logo to appear instead of the Text Home.

How do I do that? I can't see any option for that. This is of course very common in premium themes, how exactly is it done? Is there a clean way? I can probably hack it by creating a left and a right menu (ignore the cart and login for now), and then bang my logo with static HTML between the two menus, but that solution feels very wrong to me.

Any help would be greatly appreciated.

• theme-development
• menus
• images
• svg

Share Improve this question asked Mar 8, 2019 at 22:26 J86J86 13599 bronze badges 2

• 1 You could give the Home nav item a custom CSS class then target that? Then it would be a 100% pure frontend development problem, and you'd be able to ask a much wider audience of people with a wider range of options, rather than limiting yourself to just WP developers – Tom J Nowell ♦ Commented Mar 9, 2019 at 2:08
• Thanks @TomJNowell that's what I went with in the end. – J86 Commented Mar 9, 2019 at 13:05

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

I couldn't find a way to place an image tag in there, so I did as Tom J Nowell suggested. I added a class and using CSS I made the text disappear and have the logo image appear in its place. It seems to work fine.