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

header menu

Right now, I have this:

current menu

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:

  function register_my_menu() {
    register_nav_menu('header-menu',__( 'Header Menu' ));

  add_action( 'init', 'register_my_menu' );

And added this to header.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.

  • 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
    Mar 9, 2019 at 2:08
  • Thanks @TomJNowell that's what I went with in the end.
    – J86
    Mar 9, 2019 at 13:05

1 Answer 1


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.