How to add design arrow ?

Developers Frontend
1

I want to add design arrow before the categories name on 2.0.4 version. Please help.

arrow.JPG

2

There really isn’t much room on that side so it abuts the name.


ul.menu-root-categories li a {styles.base.css (line 1234)
background:transparent url(images/icons/[COLOR="Blue"]your_arrow.gif[/COLOR]) no-repeat scroll left 5px;

3

I have add this line on style.bass.css but it is not working.


/* plain/dynamic menu */
ul.menu-root-categories li {
background:transparent url(images/icons/bullet.gif) no-repeat scroll left 5px;
}



i am doing something wrong ?

4

Did you upload the image to images/icons/bullet.gif?

5

I already upload the image on actualy folder.

6

any other help ?

7

In dropdown.css line 92 add



background: url(images/icons/bullet.gif) no-repeat scroll left 5px;



so it looks like this:



ul.dropdown li {

padding: 0px;

background-color: #f4fbff;

background: url(images/icons/bullet.gif) no-repeat scroll left 5px;

}



you may have to play around with the 5px to make your image position the way you want it. My background color is #f4fbff so yours may be different so just change to your color hex code.

8

Thanks mate, now it is working fine :slight_smile:

9

roban i have seen after clean cache arrow are now also displaying on top menu which is rediculous, how to remove them from top menu



10

When using Firebug, target in on the CSS classes for the list item (li) and then in the CSS file for them apply the rule:



background-image:none;