can a page title from my menu be a small image?

• 

  figofresh · Member · Oct 29, 2013 at 12:51 am

  • Copy link
  • Add topic to favorites

  I am brand new to the blogging world! I was wondering if I could make a page title (usually text) a small image instead.

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

• 

  thesacredpath · Member · Oct 29, 2013 at 4:52 pm

  • Copy link

  First, you will have to get the specific class for the menu item you want to put the image into. You can do that by using the web inspector built into your browser, or you can view the source code for your site (in Safari, developer menu > show page source). It will look something like this .menu-item-XX where XX is a number (could be single, or multiple digits). Then you need to edit the ID in the code below for your specific menu ID.

  Next you need to upload the image to your media library, get the URL of that image and then replace URL_OF_IMAGE between the quote marks with that URL. The image can be up to 60px high, which is the height of the existing menu area.

  .menu-item-XX {
      background: url("URL_OF_IMAGE") no-repeat scroll center center rgba(0, 0, 0, 0);
  }
  .menu-item-XX a {
      color: rgba(0, 0, 0, 0) !important;
  }