Title: Another menu icon problem
Last modified: August 22, 2016

---

# Another menu icon problem

 *  Resolved [anytime computers](https://wordpress.org/support/users/anytime-computers/)
 * (@anytime-computers)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/)
 * Hi Team, Been working on this webpage for a little now and I’n not a web delevplorer
   but I not an idiot either. I can’t seen to get the icons to change to anything.
 * [http://anytimecomputers.com.au/](http://anytimecomputers.com.au/)
 * Current CSS
    /*************************************** Menu 1 **************************************/
 * /* The menu wrapper “bar” */
    #menu1-wrapper { z-index: 1000; background: #ffffff;
 *  /* stick to bottom on 960 */
    position: absolute; bottom: 0; right: 0;
 *  /* next 2 lines enhance the “smooth-menu” animation slightly, not vital */
    
   border-bottom: solid 1px #cccccc; margin-bottom: -1px; }
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   959px) {
    #menu1-wrapper { position: relative; } }
 * /* 1st level UL */
    #menu1, #menu1-smooth { display: table; /* center without
   having to specify width */ margin: 0 auto; /* center menu, “comment” or delete
   both 2 lines to left-align menu */ }
 * #menu1 > li {
    background: transparent url(%tpldir%/images/menuline.png) 0 center
   no-repeat; box-shadow: 2px 4px 20px -18px #000; }
 * #menu1 > li:first-child {
    background: none; }
 * /* The <i> tag are inserted with Javascript.
    The <i> tags allows adding background
   images from a “sprite” image = background-image with */ #menu1 > li > a > i {
   display: block; width: 24px; height: 24px; margin: 0 auto 5px auto; background:
   transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 0 no-repeat; } #menu1
   > li:hover > a > i { background: transparent url(%tpldir%/images/menu-icons-0090d3.
   png) -24x 0 no-repeat; }
 * /* Part 1- for default state: */
    #menu1 .contact-us > a > i { background-position:
   0px 0px; } #menu1 .faq > a > i { background-position: 0px -24px; } #menu1 .home
   > a > i { background-position: 0px -48px; } #menu1 .services > a > i { background-
   position: 0px -72px; } /* Part 2 – for hover state: */ #menu1 .contact-us:hover
   > a > i, #menu1 .contact-us.active > a > i { background-position: -24px 0px; }#
   menu1 .faq:hover > a > i, #menu1 .faq.active > a > i { background-position: -
   24px -24px; } #menu1 .home:hover > a > i, #menu1 .home.active > a > i { background-
   position: -24px -48px; } #menu1 .services:hover > a > i, #menu1 .services.active
   > a > i { background-position: -24px -72px; }
 * /* Global link style */
    #menu1 a, #menu1-smooth a { font-family: ‘Yanone Kaffeesatz’,
   sans-serif; font-size: 22px; font-weight: 300; color: #000; padding: 12px 15px
   20px 15px; line-height: 22px; } /* 2nd level link style. With (#menu1-smooth)
   and without animation */ #menu1 ul a, #menu1-smooth a { font-size: 18px; }
 * /* 1st level links */
    #menu1 > li > a span.firstpart { color: #ccc; }
 * #menu1 a:hover,
    #menu1-smooth a:hover, #menu1 .active a, #menu1-smooth .active
   a { color: #0090d3; }
 * /* Line above 1st level menu items on hover */
    #menu1 > li { border-top: solid
   5px transparent; /* placeholder for border “on hover” */ }
 * #menu1 > li:hover,
    #menu1 > li.active , #menu1 > li.ancestor { border-top: solid
   5px #0090d3; }
 * /* 2nd+ levels */
    #menu1 .sub-menu, #menu1-smooth .sub-menu { list-style: none;
   background: #ffffff; /* for IE8 */ background: hsla(36, 100%, 100%, 0.95); border:
   solid 1px #ddd; font-size: 18px; padding: 5px 15px; box-shadow: 5px 5px 20px -
   15px #000; }
 * #menu1 .sub-menu a,
    #menu1-smooth .sub-menu a { padding: 5px 0; }
 * #menu1 > ul > li > ul {
    margin-left: -20px; }
 * /* border between list items */
    #menu1 .sub-menu li, #menu1-smooth .sub-menu
   li { border-top: solid 1px #eee; } #menu1 .sub-menu li:first-child, #menu1-smooth.
   sub-menu li:first-child { border-top: none; }
 * #menu1 .sub-menu .sub-menu,
    #menu1-smooth .sub-menu .sub-menu li:first-child{
   margin-top: -38px; /* – (line-height + padding) */ }

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Thread Starter [anytime computers](https://wordpress.org/support/users/anytime-computers/)
 * (@anytime-computers)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483174)
 * Ha, I must have done something strange because the change to blue effect on hover
   is no longer working too?
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483175)
 * So you’re trying to get the gray stars to change to blue stars like the default
   setting, or are you trying to use a different icon (i.e., something other than
   a star) for the menu items?
 *  Thread Starter [anytime computers](https://wordpress.org/support/users/anytime-computers/)
 * (@anytime-computers)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483176)
 * Both now, the blue effect has stopped working and I can’t change the stars to
   something else
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483178)
 * I’m putting together a detailed answer for you so please wait a few minutes.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483183)
 * Before I give you instructions on how to change the icons to something different,
   the reason why you’re no longer seeing the transition to the blue stars is that
   you have a syntax error in this rule:
 *     ```
       #menu1 > li:hover > a > i {
       background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24x 0 no-repeat;
       }
       ```
   
 * You need to change the **-24x** to **-24px** (somehow the **p** got dropped).
 *  Thread Starter [anytime computers](https://wordpress.org/support/users/anytime-computers/)
 * (@anytime-computers)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483184)
 * Thanks first of the two problems, good work so far. Thanks
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483190)
 * So this is the way it works:
 * The icons are being read from [this image file.](http://anytimecomputers.com.au/wp-content/themes/montezuma/images/menu-icons-0090d3.png)
   You’ll notice that there’s a column of gray icons, and an identical column of
   blue icons next to it.
 * Each individual icon is 24px high by 24px wide.
 * The position of each icon is referenced relative to the top left corner of the
   entire image. In other words:
    The gray star is 0px from the left and 0px from
   the top. The blue star is 24px from the left and 0px from the top. The gray leaf
   is 0px from the left and 72px from the top. The blue leaf is 24px from the left
   and 72px from the top and .
 * You can see a kind of pattern: All the gray icons will be 0px from the left and
   all the blue icons will be 24px from the left. To find out the top position of
   a particular icon, you can use this formula:
    Top = (icon # – 1) x 24 The envelope
   is icon #5 (i.e., the 5th icon down), so the top will be: (5 – 1) x 24 = 4 x 
   24 = 96px
 * So now we look at the CSS rules which control the display of the icons.
 * This rule controls the normal appearance of the icons:
 *     ```
       #menu1 > li > a > i {
       display:	block;
       width: 24px;
       height: 24px;
       margin: 0 auto 5px auto;
       background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 0 no-repeat;
       }
       ```
   
 * This rule controls the appearance of the icons when the menu item is “hovered,”
   i.e., the mouse is held over the menu item:
 *     ```
       #menu1 > li:hover > a > i {
       background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px 0 no-repeat;
       }
       ```
   
 * Notice that the **width** and **height** properties are set to 24px. That means,
   instead of displaying the entire image, we’re only going to show a small part
   of the image that is 24px square (which is the same size as one icon).
 * The two numbers you want to pay attention to, though, are the ones just before
   the **no-repeat** clause. The first number is the number of pixels that you want
   to shift the image sideways (along the x-axis) and the second number is the number
   of pixels you want to shift the image up & down (along the y-axis). From high
   school geometry, you might remember that moving to the left along the x-axis 
   is moving towards the negative side, and moving down along the y-axis is also
   moving towards the negative side.
 * So the first rule has **0 0** as the image position, which means don’t shift 
   the image at all. Therefore the gray star, which is at the origin (top left) 
   of the image, will be displayed.
 * The second rule has **-24px 0**, which means shift the image 24px to the left(
   since it’s a negative value), but don’t shift the image up or down. This will
   give you the blue star, since it’s the image that is 24px to the right of the
   origin.
 * Let’s change the icons to the jet plane.
 * The jet plane is the 10th image down. We already know that the gray plane will
   be 0px from the left and blue plane is 24px from the left. The top of both icons
   is:
    (10 – 1) x 24 = 9 x 24 = 216px.
 * So change the first rule so it looks like this:
 *     ```
       #menu1 > li > a > i {
       display:	block;
       width: 24px;
       height: 24px;
       margin: 0 auto 5px auto;
       background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 -216px no-repeat;
       }
       ```
   
 * You’re just changing the number just before **no-repeat** to **-216px**.
 * And the second rule so it looks like this:
 *     ```
       #menu1 > li:hover > a > i {
       background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px -216px no-repeat;
       }
       ```
   
 * Again, you’re just changing the number just before **no-repeat** to **-216px**.
 * Now you should have jet planes for your menu icons.
 * You can do all sorts of crazy things, like having a gray plane change to a blue
   heart. You can also create your own image file and use that instead. All you 
   would need to do is change the **url** property to point to your own icon image
   file. You can see an example [here](http://www.trendpersmixmedia.nl/). The designer
   uses the head of a woman as the default menu icon, and it transitions to a man’s
   head when hovered. Notice that she also changed the color of the icons to match
   the color scheme of her site.
 *  Thread Starter [anytime computers](https://wordpress.org/support/users/anytime-computers/)
 * (@anytime-computers)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483196)
 * thanks for that information, the code I included showed customised icons for 
   of the pages I have as per instructions on the Use Menu Page. Here is the extract
   in question
 * #menu1 > li > a > i {
    display: block; width: 24px; height: 24px; margin: 0 auto
   5px auto; background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 
   0 0 no-repeat; }
 * #menu1 > li:hover > a > i {
    background: transparent url(%tpldir%/images/menu-
   icons-0090d3.png) -24px 0 no-repeat; }
 * /* Part 1- for default state: */
    #menu1 .contact-us > a > i { background-position:
   0px 0px; } #menu1 .faq > a > i { background-position: 0px -24px; } #menu1 .home
   > a > i { background-position: 0px -48px; } #menu1 .services > a > i { background-
   position: 0px -72px; } /* Part 2 – for hover state: */ #menu1 .contact-us:hover
   > a > i, #menu1 .contact-us.active > a > i { background-position: -24px 0px; }#
   menu1 .faq:hover > a > i, #menu1 .faq.active > a > i { background-position: -
   24px -24px; } #menu1 .home:hover > a > i, #menu1 .home.active > a > i { background-
   position: -24px -48px; } #menu1 .services:hover > a > i, #menu1 .services.active
   > a > i { background-position: -24px -72px; }
 * As you can see in that code I have just copied in over the top of the default.
   as per instructions but its not loading the icons. i.e. with the code above it
   should be showing a leaf not the star.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483215)
 * OK, so it looks like you want a leaf over the **Services** menu item. The problem
   is that you are using the incorrect selector. Change this rule:
 *     ```
       #menu1 .services > a > i { background-position: 0px -72px; }
       ```
   
 * to this:
 *     ```
       #menu1 .page-services > a > i { background-position: 0px -72px; }
       ```
   
 * And this rule, for the hover state:
 *     ```
       #menu1 .services:hover > a > i, #menu1 .services.active > a > i { background-position: -24px -72px; }
       ```
   
 * to this:
 *     ```
       #menu1 .page-services:hover > a > i, #menu1 .services.active > a > i { background-position: -24px -72px; }
       ```
   
 * All you were missing was the word **page-** in front of **services**.
 * Same with the other rules. For the Home menu item, change the selector to **.
   page-home**.
 *  Thread Starter [anytime computers](https://wordpress.org/support/users/anytime-computers/)
 * (@anytime-computers)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483333)
 * Ah great that works heaps better thanks CrouchingBruin. Not sure if you are the
   guy who created this but the self help page about “Using Menu Icons” is incorrect
   and does not include the missing “page-” part.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483338)
 * I’m not the developer, but I try to support other users who are using the theme.
   Thanks, I’ll pass along the info.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Another menu icon problem’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/montezuma/1.2.8/screenshot.png)
 * Montezuma
 * [Support Threads](https://wordpress.org/support/theme/montezuma/)
 * [Active Topics](https://wordpress.org/support/theme/montezuma/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/montezuma/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/montezuma/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * Last activity: [11 years, 5 months ago](https://wordpress.org/support/topic/another-menu-icon-problem/#post-5483338)
 * Status: resolved