How can i add an image button into my navigation bar?

• 

  jobswriter22 · Member · May 24, 2015 at 10:48 pm

  • Copy link
  • Add topic to favorites

  i just want an image button instead of the actualy word on my navigation/main menu

  The blog I need help with is: (visible only to logged in users)

• 

  jobswriter22 · Member · May 24, 2015 at 10:55 pm

  • Copy link

  I want to change my main navigation into button images. not sure how to do it. i tried google and i can’t find anyone showing how to do it.

• 

  alexjgustafson · Member · May 25, 2015 at 6:49 pm

  • Copy link

  Hi there,

  This will take a little bit of CSS hacking, but it can be done. First, upload all your images to be used as menu icons into your media library.

  Next, visit your Menu Settings in your /wp-admin/ dashboard here:

  https://itworksfromyessy.wordpress.com/wp-admin/nav-menus.php

  Using the Advanced Settings, add a unique CSS class to every menu item that will be replaced with an image. Here are steps on how to do that:

  https://en.support.wordpress.com/advanced-menu-settings/#css-classes

  For example, on your shop link maybe I’d upload a picture of a shopping cart. Then in your menu settings add the CSS class ‘shop’ to that menu item.

  Next up, open your customizer and select the CSS tab. You’ll need to select your CSS class you just added. If you did that ‘shop’ class like my example, it would look like this:

  .shop{
  /* Insert properties here*/
  }

  Next, your first property within that selector will be to add the background image. Copy the URL of your image and add it to the background-image property. Here’s what it would look like in the shop example:

  .shop{
       background-image: url('http://placekitten.com/g/50/50')
  }

  After you do that, you’ll find that you have an image behind the text. So hide the text with another CSS rule:

  .shop a{
       color: transparent;
  }

  This make the text ‘Shop’ transparent, so we can still click the link but we only see your image.

  You’ll need to do this process for each menu item that gets turned into an image.

  -Alex G.